Cómo subir mi página web a Vercel y desplegar tu app

Para subir tu página web a Vercel, lo más práctico es tener tu proyecto en GitHub, importarlo desde el panel de Vercel y dar clic en Deploy: Vercel detecta el framework, construye la app y te da una dirección tuproyecto.vercel.app con HTTPS. Si no usas GitHub, puedes desplegar desde la terminal con la CLI. Abajo van ambos caminos, las condiciones del plan gratis y qué revisar cuando falla.

Vercel es una plataforma para publicar sitios y apps web; es la empresa detrás de Next.js y de v0. Funciona muy bien con proyectos exportados de Lovable, Bolt, v0 o Cursor.

Planes de Vercel (a noviembre de 2026)

Según la página de precios de Vercel:

Plan	Precio	Notas
Hobby	0 USD/mes	100 GB de Fast Data Transfer y 1M de invocaciones de funciones al mes. Solo uso personal, no comercial
Pro	20 USD/mes	Para equipos y uso comercial

Si la página es de tu negocio y genera ingresos, el plan Hobby no aplica según sus condiciones. Para opciones gratis con uso comercial, compara en desplegar app web gratis.

Desplegar app en Vercel desde GitHub

1. Sube tu proyecto a GitHub. Si viene de Lovable, mira cómo conectar Lovable a GitHub.
2. Entra a vercel.com y regístrate con tu cuenta de GitHub.
3. En el panel, Add New… → Project.
4. Elige el repositorio y da clic en Import.
5. Revisa la configuración que Vercel detectó:
   • Framework Preset: Vite, Next.js, etc.
   • Build Command: normalmente npm run build.
   • Output Directory: dist para Vite (Next.js lo maneja solo).
6. Abre Environment Variables y agrega las variables que tu app necesita (por ejemplo VITE_SUPABASE_URL). Sin esto, la app carga en blanco o no se conecta.
7. Da clic en Deploy. En uno o dos minutos tienes tu dirección.

A partir de ahí, cada push a la rama principal crea un despliegue de producción y cada rama o pull request un despliegue de vista previa con su propia URL.

Los nombres de menús corresponden al panel de Vercel a noviembre de 2026 y pueden cambiar.

Desplegar desde la terminal (sin GitHub)

npm install -g vercel
vercel login
vercel          # crea un despliegue de vista previa
vercel --prod   # publica en producción

La primera vez te pregunta el nombre del proyecto y la carpeta. Útil si no quieres usar Git, aunque pierdes el despliegue automático.

Apps React/Vite con rutas: evita el 404

Si tu app usa React Router y al recargar /perfil aparece 404, agrega en la raíz del proyecto un vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Esto le dice a Vercel que todas las rutas carguen tu app. El problema completo está en error 404 Not Found en Vercel.

Conectar tu dominio

En el proyecto, ve a Settings → Domains, escribe tu dominio y sigue las instrucciones de DNS. Lo explicamos paso a paso en cómo conectar tu dominio a Vercel.

Errores comunes al desplegar en Vercel

• “Command ‘npm run build’ exited with 1”: el build falló. Lee el log desde la primera línea roja. Tenemos una guía para ese error.
• Página en blanco: faltan variables de entorno o el Output Directory está mal.
• Error 500 en funciones: una función de servidor truena, casi siempre por una variable faltante o una llave inválida. Revisa los logs de la función en el panel del proyecto.
• Funciona en Windows/Mac, falla en Vercel: Vercel distingue mayúsculas. Logo.png y logo.png son archivos distintos.
• Llaves secretas expuestas: solo las variables que empiezan con VITE_ (o NEXT_PUBLIC_) llegan al navegador, y por eso nunca deben ser secretas.

Vistas previas y cómo regresar a una versión anterior

Cada despliegue en Vercel queda guardado con su propia URL. Eso te da dos ventajas:

• Probar antes de publicar. Si trabajas en una rama distinta de main en GitHub, Vercel crea un despliegue de vista previa. Revisa ahí los cambios (en celular también) y solo cuando todo esté bien, junta la rama con main.
• Regresar si algo se rompe. En la pestaña Deployments del proyecto ves la lista de despliegues. Desde el menú de uno anterior que funcionaba puedes volver a ponerlo en producción (Vercel lo llama Instant Rollback o Promote, según el plan y la versión del panel). Es mucho más rápido que intentar arreglar el código con prisa.

Ojo: regresar el despliegue no regresa tu base de datos. Si el cambio que rompió algo también modificó tablas en Supabase, eso hay que revisarlo aparte.

Variables de entorno: producción, vista previa y desarrollo

En Vercel cada variable se asigna a uno o varios entornos: Production, Preview y Development. Esto explica muchos casos de “en la vista previa funciona y en producción no” (o al revés):

1. En Settings → Environment Variables, revisa que cada variable esté marcada en los entornos donde la necesitas.
2. Si usas una base de datos de pruebas, pon su URL solo en Preview y la de verdad solo en Production.
3. Después de agregar o cambiar una variable, vuelve a desplegar. Los despliegues que ya existían se quedan con los valores viejos; el cambio aplica en el siguiente build.

Más detalles en la documentación de variables de entorno de Vercel.

Si tu proyecto no está en la raíz del repositorio

Algunos proyectos tienen la app dentro de una subcarpeta (por ejemplo frontend/ o web/). Si Vercel no encuentra el package.json, el build falla aunque el código esté bien. En la configuración del proyecto, ajusta Root Directory a esa carpeta y vuelve a desplegar. Pasa seguido con repositorios que juntan el frontend y un backend en el mismo lugar.

Qué revisar después del primer despliegue

• Abre la URL en incógnito y en tu celular.
• Recarga varias rutas internas para confirmar que no aparece 404.
• Revisa la consola del navegador por errores en rojo.
• Prueba login, formularios y pagos con una cuenta de prueba.
• Confirma que tu dominio abre con HTTPS, con y sin www.

Cuándo pedir ayuda

Desplegar un proyecto que ya compila en tu computadora es cuestión de minutos. Si el build falla con errores que no entiendes, la app se conecta a una base de datos o cobra pagos, o necesitas el plan correcto para tu negocio, conviene una revisión. En Black Engine lo revisamos por WhatsApp y te ayudamos a dejarla en línea.