Desplegar tu proyecto en Internet: Devin Apps vs Vercel

Aprender a desplegar tu proyecto en Internet con Devin Apps y Vercel es el paso que convierte tu código en algo que otra persona puede abrir, usar y entender. Porque un proyecto no termina cuando compila: termina cuando alguien más puede entrar y ver qué construiste. Esta guía es para quienes ya tienen una app lista y quieren sacarla de su computador.

¿Cómo desplegar un sitio estático con Devin Apps?

Devin nos entrega el dominio devinapps.com para desplegar aplicaciones y archivos estáticos. El primer requisito es tener un repositorio, porque el despliegue en la nube es una función exclusiva de Devin en la nube, no del CLI local.

En la demostración se usa un proyecto nuevo de Next.js, sin ningún cambio, tal como viene el template al instalarlo [00:33]. Desde el CLI se inicializa Devin y se le pide crear un repo en GitHub para subir el proyecto.

El flujo es directo:

1. Inicializar Devin dentro del CLI y pedir que cree el repositorio en GitHub.
2. Nombrar el repo, en este caso devin-deploy-platzi, y elegir si es público o privado.
3. Hacer un handoff para que la nube tome la tarea de desplegar.
4. Aprobar el despliegue con el botón que aparece para recibir la URL final.

Una vez en la nube, Devin revisa el proyecto para elegir la mejor forma de desplegarlo y propone un static export, que necesita un build de la aplicación [02:24]. Aquí entra un detalle técnico importante.

¿Qué es un handoff en Devin? Es el momento en que pasas una tarea del CLI local a Devin en la nube para que la ejecute allá. Se usa para desplegar, porque el despliegue solo funciona en la nube.

¿Por qué Next.js necesita configurar un puerto de salida?

Durante el despliegue, Next.js requiere tener un puerto de salida para configurarse correctamente y poder navegarse bien cuando ya está en Internet [03:12]. Sin esa configuración, la app no se serviría de forma adecuada.

Devin abre una máquina virtual para hacer el trabajo y pregunta el sistema operativo que necesitas; en la clase se elige Ubuntu [01:39]. Al terminar, entrega una URL pública bajo devinapps.com y cualquiera con ese enlace puede ver el proyecto.

El resultado: el proyecto básico de Next.js que se creó en la terminal quedó publicado en la nube, con un dominio generado automáticamente.

¿Cuándo conviene usar Devin Apps y cuándo Vercel?

Devin Apps brilla con páginas estáticas, es decir, sitios que no se conectan a un servicio de terceros. Es ideal para casos rápidos y sencillos.

La recomendación es clara sobre para qué sirve cada herramienta:

• Usa Devin Apps para una landing page, un portafolio o una primera propuesta de tu proyecto, pero solo del front-end.
• Usa Vercel cuando tu proyecto se conecta a servicios externos o necesita escalar con más personalización.

Y aquí viene la limitación importante. En el ejemplo, ShipBlog se conecta a Supabase. Si quisieras cambiar de proveedor de base de datos o cambiar la instancia de Supabase, Devin Apps no te daría esa facilidad [03:44]. Para eso necesitas algo más avanzado.

¿Por qué Devin Apps no sirve para apps con base de datos? Porque está pensado para archivos estáticos y no te permite gestionar servicios de terceros ni modificar proveedores de base de datos con flexibilidad.

¿Qué ventajas ofrece Vercel para proyectos que escalan?

Vercel entrega un panel completo del despliegue y un dominio propio, como shipblog-platzi.vercel.app, donde puedes navegar el proyecto ya publicado [04:25]. La gran diferencia está en el control.

En Vercel puedes gestionar las variables de entorno directamente desde el panel:

• Modificar credenciales si cambias de proveedor de base de datos.
• Cambiar la instancia de Supabase sin fricción.
• Agregar un nuevo servicio de terceros, como Resend para envío de emails, incorporando su variable de entorno.

Este tipo de servicios te dan muchas más opciones para personalizar, y son los recomendados cuando tu proyecto está escalando.

¿Qué es una variable de entorno en un despliegue? Es un dato de configuración, como una clave de conexión a tu base de datos, que se guarda fuera del código para que la app funcione en producción sin exponer información sensible.

Vercel también ofrece un MCP server para manejar muchas de sus herramientas, incluido el despliegue [05:22]. El detalle de cómo usar el despliegue vía MCP se explica en el curso de herramientas de AI para desarrolladores, con el enlace en la sección de recursos.

Con esto ya tienes ShipBlog publicado en Internet usando todo el ecosistema de Devin. De aquí en adelante queda seguir explorando lo que Devin puede hacer, porque esto no para. Cuéntame en los comentarios qué es lo que más te ha gustado de Devin y cómo piensas incluirlo en tus proyectos.