Volver
Desarrollo Web

De prompt a producción: despliega gratis en Vercel la app que te generó la IA

Tu app funciona en local. Ahora quieres verla en internet.

Has usado ChatGPT, Claude o la IA de turno. Te ha generado un proyecto en Next.js, Astro, Vite o incluso HTML plano. Lo ejecutas con npm run dev y todo bien.

Pero claro. Solo lo ves tú en localhost:3000.

Si quieres compartirlo, probarlo en móvil o enseñárselo a un cliente, necesitas desplegarlo en producción. Y aquí es donde mucha gente se frena.

Mi regla es simple: si es un proyecto generado por IA y quiero probarlo rápido, lo subo a Vercel. Cero servidores. Cero configuraciones raras. Plan gratuito más que suficiente.

Te explico cómo lo hago paso a paso.

Qué necesitas antes de empezar

Muy poco:

  • Una cuenta en GitHub
  • Una cuenta en Vercel
  • Tu proyecto funcionando en local
  • Node.js instalado

Si tu proyecto no está en una carpeta con package.json, probablemente la IA te generó algo incompleto. Antes de empezar de cero, habla con la IA y explícale qué quieres construir: tipo de proyecto, si necesita backend, si quieres algo estático o con SSR, qué dominio te gustaría, etc. Que te recomiende la stack que mejor encaja (Vite, Next.js, Astro, lo que sea) en lugar de casarte con una tecnología al azar porque sí. No es lo mismo una landing simple que una app con autenticación, y la IA te puede ayudar a decidir antes de generar nada.

Paso 1: Sube el proyecto a GitHub

Vercel despliega desde un repositorio. Así que lo primero es subir tu código.

Antes de nada, asegúrate de tener Git instalado en tu máquina. Si no lo tienes, descárgalo desde git-scm.com e instálalo. Para comprobar que está instalado:

git --version

Si te devuelve una versión, todo bien.

En la raíz del proyecto:

git init
git add .
git commit -m "Initial commit"

Ahora crea un repositorio vacío en GitHub. Sin README. Sin nada.

Después enlázalo:

git remote add origin https://github.com/tuusuario/tu-repo.git
git branch -M main
git push -u origin main

Ya está. Tu código vive en GitHub.

Si esto te suena complicado, la alternativa es usar la app de GitHub Desktop. Pero prefiero que entiendas qué está pasando.

Paso 2: Importa el repo en Vercel

Entra en:

👉 https://vercel.com

Haz login con GitHub.

Pulsa en “Add New Project”.

Vercel detecta automáticamente tus repositorios. Selecciona el que acabas de subir.

Y aquí viene lo bueno: en el 90% de los casos, Vercel detecta el framework automáticamente.

  • Si es Next.js → lo configura solo.
  • Si es Astro → también.
  • Si es Vite → igual.
  • Si es React + Vite → lo entiende.

No tienes que tocar nada.

Pulsa Deploy.

Y espera 1-2 minutos.

Paso 3: Ya está en producción

Cuando termine, Vercel te da una URL del tipo:

https://tu-proyecto.vercel.app

Eso ya está en producción.

Con HTTPS. Con CDN. Con certificado SSL. Gratis.

Sin tocar un servidor.

Cómo funciona por debajo (sin complicarnos)

Vercel hace tres cosas:

  1. Clona tu repo.
  2. Ejecuta npm install.
  3. Ejecuta el script de build (npm run build).
  4. Sirve la carpeta generada (dist, .next, etc).

Todo esto lo detecta automáticamente leyendo tu package.json.

Por ejemplo, si tu package.json tiene:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Vercel sabe que debe ejecutar vite build.

No necesitas configurar nada manualmente.

¿Y si la IA me generó solo HTML y CSS?

También puedes desplegar eso.

Estructura típica:

mi-proyecto/
├── index.html
├── styles.css
└── script.js

Lo subes igual a GitHub.

Cuando lo importas en Vercel, detectará que es un proyecto estático. No necesita build.

Y funciona.

Problemas comunes (y cómo arreglarlos)

Aquí es donde la gente se bloquea. Te dejo los más típicos.

1️⃣ Falla el build

Error típico:

Module not found

Causa: la IA te generó imports que no están instalados.

Solución:

npm install nombre-del-paquete

Haz commit y push otra vez:

git add .
git commit -m "fix: install missing dependency"
git push

Vercel vuelve a desplegar automáticamente.

2️⃣ Variables de entorno

Si tu app usa algo como:

process.env.API_KEY;

Eso no va a funcionar en producción si no configuras la variable.

En Vercel:

  • Entra en tu proyecto.
  • Settings → Environment Variables.
  • Añade la variable.

Vercel vuelve a desplegar.

Muy importante: nunca subas tus claves al repositorio. Si tienes un archivo .env con secretos, añádelo a tu .gitignore antes del primer commit:

# .gitignore
.env
.env.local
.env.*.local
node_modules

Si por error ya hiciste commit con la clave dentro, considérala comprometida: rótala en el servicio correspondiente y limpia el historial. Una clave subida a un repo público se escanea y se filtra en cuestión de minutos.

Y otra cosa: si es frontend puro, no expongas claves privadas. Usa variables públicas solo si sabes lo que haces.

3️⃣ El puerto no importa

En local usas localhost:3000. En Vercel eso no existe.

No intentes configurar puertos.

Vercel se encarga.

Cada push es un deploy automático

Esto es lo mejor.

Cambias algo en local.

git add .
git commit -m "update hero section"
git push

En 1 minuto tienes nueva versión online.

Sin FTP. Sin subir archivos manualmente. Sin romper nada.

Además, cada pull request genera una preview URL distinta. Perfecto para probar cambios sin tocar producción.

¿Es realmente gratis?

Sí, para proyectos personales y pruebas.

El plan gratuito incluye:

  • Deploys ilimitados
  • Dominio .vercel.app
  • HTTPS
  • CDN global
  • Previews por rama

Para una app generada por IA que quieres validar o enseñar, sobra.

Si algún día escalas a algo serio con mucho tráfico, ya hablamos.

Alternativa aún más rápida: Vercel CLI

Si no quieres pasar por GitHub, puedes usar la CLI.

Instala:

npm i -g vercel

En la carpeta del proyecto:

vercel

Responde a las preguntas y listo.

Personalmente prefiero el flujo con GitHub porque:

  • Tienes versionado.
  • Tienes histórico.
  • Tienes previews automáticas.
  • Es más profesional.

Pero para una demo rápida, la CLI va perfecta.

Mi flujo real cuando genero algo con IA

Te cuento cómo lo hago yo.

  1. Pido a la IA que me genere el proyecto como:
    • npm create vite@latest
    • o create-next-app
  2. Lo pruebo en local.
  3. Ajusto errores.
  4. Subo a GitHub.
  5. Importo en Vercel.
  6. Comparto URL.

En menos de 15 minutos tengo algo público.

Y eso cambia completamente la forma de experimentar.

Lo que esto desbloquea

Muchísima gente genera proyectos con IA pero se quedan en local.

Error.

Cuando lo subes a producción:

  • Lo ves desde el móvil.
  • Puedes compartirlo.
  • Puedes medir rendimiento.
  • Puedes validarlo con usuarios reales.

Pasas de “prototipo en mi máquina” a producto público.

Y la barrera es ridículamente baja.

Resumen rápido

Si has creado algo con IA y quieres probarlo online:

  1. Sube el proyecto a GitHub.
  2. Importa el repo en Vercel.
  3. Pulsa Deploy.
  4. Comparte la URL.

Eso es todo.

No necesitas DevOps. No necesitas servidor. No necesitas pagar.

Solo necesitas dar el paso.

Porque una app que solo vive en localhost no existe.