Cómo llevar tu proyecto de Lovable a Vercel o Netlify
Pasa tu app de Lovable a Vercel o Netlify: revisa tu stack, configura compilación y variables, arregla rutas y login, y luego cambia el dominio.
Read in English →
Para alojar un proyecto de Lovable en Vercel o Netlify, conecta el proyecto a GitHub, importa ese repositorio en el hosting, compila con npm run build sobre Node.js 22, copia los valores VITE_ del archivo .env a las variables de entorno del hosting y agrega la nueva dirección a las URL de redirección del login. Antes de todo eso, averigua qué stack usa tu proyecto: las apps creadas en Lovable desde el 13 de mayo de 2026 usan TanStack Start y necesitan un hosting que ejecute código de servidor; las más antiguas, hechas con React + Vite, son archivos estáticos.
En esta guía vas paso a paso, con los dos ajustes que casi todos olvidan (rutas y login), cómo probar antes de mover el dominio y qué pierdes al dejar el hosting de Lovable.
¿Conviene mudar el hosting?
El hosting de Lovable incluye HTTPS, dominios propios y, en las apps React + Vite, páginas prerenderizadas para buscadores y vistas previas en redes sociales. Si el frontend corre en otro lado, el proceso de despliegue, las variables, la disponibilidad y los registros pasan a ser tu responsabilidad, y Lovable no puede vigilar ni depurar una infraestructura que no controla. El botón Publish de Lovable sigue publicando solo en el hosting de Lovable.
Buenas razones para mudarte: tu equipo ya despliega todo en una plataforma, necesitas despliegues de prueba por rama o una política te obliga a alojar la app en un lugar concreto. "A lo mejor va más rápido" no suele serlo: mide primero.
Puedes mudar solo el frontend y seguir usando el backend integrado (Lovable Cloud). Mover la base de datos es otro proyecto, que la guía de hosting externo de Lovable describe aparte.
¿Qué stack usa mi proyecto?
Abre package.json en la vista Code de Lovable.
Si package.json… | Tu stack | Qué tiene que hacer el hosting |
|---|---|---|
incluye @tanstack/react-start | TanStack Start (proyectos nuevos) | Ejecutar la parte de servidor: renderizado en servidor y funciones de servidor |
| no lo incluye | React + Vite (proyectos anteriores) | Servir los archivos de dist/, con todas las rutas apuntando a index.html |
En TanStack Start, revisa también que aparezca nitro. Nitro empaqueta el servidor para cada plataforma y reconoce Vercel y Netlify solo. Sin él, la compilación no genera nada que un hosting pueda ejecutar.
¿Cómo muevo el frontend paso a paso?
1. Conecta el proyecto a GitHub
En Lovable, abre Project settings → Git, conecta GitHub y deja que cree el repositorio. Mantén la sincronización activa para que cada cambio hecho en Lovable llegue al repositorio. Si la sincronización falla, revisa la guía de sincronización de Lovable con GitHub.
2. Córrelo una vez en tu computadora
Clona el repositorio y ejecuta npm install y npm run dev. Si arranca en tu máquina, ya sabes qué variables y dependencias necesita antes de que el hosting sume sus propias sorpresas. Si el repositorio solo trae bun.lock, usa Bun o ejecuta npm install y sube el package-lock.json que se genera, para que el hosting instale las mismas versiones.
3. Importa el repositorio en el hosting
- Vercel: crea un proyecto nuevo e importa el repositorio. Comando de compilación
npm run build, Node.js 22. Para TanStack Start no hace falta indicar carpeta de salida; con React + Vite detectadist. - Netlify: crea un sitio nuevo desde el repositorio. Comando
npm run build, carpeta de publicacióndist, Node.js 22.
Elige la rama desde la que vas a desplegar producción: puede ser la que sincroniza Lovable o una rama de releases a la que fusionas después de revisar.
4. Carga las variables de entorno
Copia los valores del archivo .env del repositorio a los ajustes de variables del hosting.
| Variable | La usa |
|---|---|
VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID | El navegador (los dos stacks) |
SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY | El código de servidor (solo TanStack Start) |
| Los secretos que lean tus funciones de servidor | El código de servidor (solo TanStack Start) |
Los valores VITE_ se meten en la compilación. Si cambias uno, lanza una compilación nueva; cambiar la variable no alcanza. Y nunca le pongas VITE_ a una clave secreta: terminaría en el navegador de cada visitante.
5. Arregla las rutas en apps React + Vite
Una app de una sola página tiene un único archivo real, index.html. Si alguien abre /ajustes directo, el hosting busca un archivo con ese nombre, no lo encuentra y responde 404. Hay que indicarle que use index.html.
En Vercel, agrega vercel.json en la raíz:
{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }En Netlify, agrega un archivo llamado _redirects dentro de la carpeta public:
/* /index.html 200En TanStack Start sáltate este paso: el servidor maneja las rutas.
6. Actualiza las URL de redirección del login
Agrega la nueva dirección (la temporal del hosting ahora, tu dominio después) a las Redirect URLs de autenticación. En Lovable Cloud están en More → Cloud → Users → Auth settings → Advanced. Si usas credenciales propias de Google, agrégala también en Google Cloud Console. La guía sobre el login de Lovable que redirige a localhost explica estos ajustes en detalle.
¿Cómo pruebo antes de mover el dominio?
Usa la dirección temporal del hosting y compárala con la app en Lovable:
- Abre directo una página interna y recarga. Un 404 indica que falta el paso 5 (React + Vite) o que el servidor no está corriendo (TanStack Start).
- Inicia y cierra sesión. Un error de redirección indica que el paso 6 quedó incompleto.
- Haz las lecturas, escrituras y subidas de archivos de las que depende la app.
- En TanStack Start, carga una página renderizada en servidor y dispara una función de servidor, no solo la interfaz.
Si en cambio falla la compilación, el registro dice por qué; mira cómo leer un error de build en Vercel.
¿Cómo muevo el dominio?
Cuando la prueba funcione, agrega tu dominio en el nuevo hosting y cambia los registros DNS por los que te indique. Después quita el dominio de Project settings → Domains en Lovable, para que no lo reclamen dos lugares. Tu dirección lovable.app sigue mostrando la última versión que publicaste ahí; despublícala si no quieres dos copias en vivo.
Los cambios de DNS pueden tardar de minutos a horas. No toques la configuración vieja hasta que la nueva responda en tu dominio con un certificado válido.
¿Puedo seguir construyendo en Lovable?
Sí. Con la sincronización activa, cada cambio que Lovable sube al repositorio dispara un despliegue en el nuevo hosting, según las reglas que pusiste ahí. La diferencia práctica es que "publicar" pasa a ser "fusionar en la rama de producción", y la vista previa de Lovable ya no es exactamente lo que ve tu usuario. Si todavía no eliges plataforma, lee Netlify o Vercel para una app hecha con IA.
Respuestas rápidas
¿Pierdo Lovable Cloud si alojo en Vercel? No. El frontend se puede mudar mientras la base de datos, el login y el almacenamiento siguen en el backend integrado.
¿Por qué mi página da 404 al recargar? En apps React + Vite, al hosting le falta la regla que manda todo a index.html.
¿Cambia el SEO? Lovable prerenderiza las apps React + Vite para los buscadores en su propio hosting. En un hosting estático eso se pierde, así que revisa cómo ven tus páginas los buscadores después de la mudanza.
¿Prefieres que alguien haga la mudanza?
Mudar el hosting toca DNS, login y compilación al mismo tiempo, y ahí un error chico cuesta horas sin servicio. Revisa tu situación actual con el chequeo gratuito de tu app, mira cómo arreglamos apps de Lovable y cómo las mantenemos después, o pregúntanos por tu proyecto.
