Com allotjar fora de Lovable una app creada amb Lovable

Publicar amb Lovable i allotjar fora de Lovable són coses diferents. Pots moure només l’aplicació web i mantenir Lovable Cloud, o traslladar també les dades i els serveis. Abans de canviar el DNS, decideix quines parts vols operar i qui s’encarregarà de les actualitzacions, les còpies i la seguretat.

La guia oficial de desplegament extern de Lovable descriu tots dos camins. Aquesta guia se centra en les decisions d’allotjament i en l’ordre segur per provar el canvi sense apagar primer la versió que funciona.

1. Descarrega una còpia del codi i prova-la en local

Connecta el projecte a GitHub, GitLab o Bitbucket amb Git sync de Lovable. El repositori queda sincronitzat amb el projecte i et permet desplegar una branca concreta. Si només necessites una còpia puntual, Lovable també permet descarregar el codi segons les condicions del teu pla.

Clona el repositori, revisa package.json i executa l’aplicació al teu ordinador abans de configurar un servidor. Comprova la branca, el directori del projecte i els scripts reals. Un monorepositori pot tenir diverses aplicacions; el manifest de l’arrel no sempre descriu la construcció que vols publicar.

2. Comprova si necessites fitxers estàtics o un servidor

Lovable indica que els projectes nous creats des del 13 de maig de 2026 fan servir TanStack Start; els projectes anteriors de React i Vite mantenen l’arquitectura original. Identifica la teva a package.json abans de triar allotjament.

Les apps antigues de Lovable fetes amb React i Vite generen una sortida estàtica, normalment a dist/. La pot servir un servidor web estàtic, però les rutes del navegador necessiten una alternativa a index.html. Obre directament una ruta interna i prova de recarregar-la.

TanStack Start pot renderitzar rutes al servidor (SSR), preconstruir-les com a fitxers estàtics (SSG) o combinar modes. La guia de desplegament extern de Lovable prepara un servidor per a TanStack Start; en necessites un si l’app utilitza SSR a cada petició, funcions de servidor dinàmiques o rutes API. L’allotjament estàtic serveix si la configuració genera totes les rutes necessàries i no cal un servidor d’aplicació a cada petició; el frontend encara pot cridar un backend extern. Comprova si package.json inclou @tanstack/react-start, nitro, @lovable.dev/vite-tanstack-config i la configuració de compilació que descriu la guia externa de Lovable.

Per a un servidor Node que gestionis, la guia oficial de Lovable mostra aquest flux amb Node.js 22 i el preset node-server. Si fas servir Lovable Cloud, defineix VITE_SUPABASE_URL i VITE_SUPABASE_PUBLISHABLE_KEY abans de compilar; configura SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY i els secrets que necessiti el servidor al seu entorn d’execució. Les variables VITE_* arriben al navegador: no hi posis secrets privats.

# Si el repositori conté package-lock.json
npm ci
NITRO_PRESET=node-server npm run build
node .output/server/index.mjs

La compilació genera el servidor dins de .output. Segueix els scripts i el fitxer de bloqueig del teu repositori; si fas servir un altre gestor de paquets o preset, adapta les ordres i prova la sortida generada. L’assignació NITRO_PRESET=... utilitza la sintaxi d’un shell POSIX; a PowerShell, defineix $env:NITRO_PRESET="node-server" abans de npm run build. No publiquis només dist/ si l’app necessita SSR o funcions de servidor.

Projects d’Hostbrid permet desplegar projectes des d’un repositori i executar serveis Node o Docker. Compara els requisits de l’app amb la configuració i el pla disponibles. Si l’exportació és estàtica, defineix la construcció i el directori de sortida; si és TanStack Start, valida el runtime i el punt d’entrada del servidor abans de contractar.

3. Decideix què passa amb Lovable Cloud

Moure el frontend no migra automàticament la base de dades, l’autenticació, els fitxers, les funcions Edge, els connectors ni les funcions d’IA. Pots continuar utilitzant Lovable Cloud des d’un frontend allotjat fora. En aquest cas, les dades continuen al backend actual i el projecte encara depèn d’aquests serveis.

Si també vols deixar Cloud, prepara una migració separada de les dades i els serveis. La guia oficial de Lovable fa servir Supabase com a destinació de referència i explica què s’ha de copiar i tornar a configurar. Revisa les polítiques RLS, els usuaris, les URL de retorn de l’inici de sessió, els fitxers, les funcions i les tasques abans de canviar el frontend. No esborris el backend original fins que hagis validat la còpia i tinguis un pla per tornar enrere.

Les variables VITE_* acaben dins del JavaScript que rep el navegador. Considera-les públiques: no hi posis contrasenyes, claus de servei ni tokens privats. Configura els secrets del servidor a l’entorn d’execució i comprova els permisos de cada taula i API.

4. Desplega en una URL temporal i prova els fluxos

Configura la construcció segons el repositori. Els exemples actuals de Lovable fan servir npm run build i Node 22, però comprova el lockfile i el runtime del teu projecte. Prova’l en una URL temporal abans de canviar el DNS de producció.

Obre directament una ruta interna i recarrega-la, inicia i tanca sessió, envia formularis, puja fitxers i executa les funcions que utilitza l’app. Amb TanStack Start, prova també una pàgina renderitzada al servidor i una funció del servidor. Que s’obri la portada no demostra que funcionin els pagaments, l’autenticació o les escriptures a la base de dades.

Quan les proves passin, apunta el domini al nou allotjament i comprova HTTPS, els retorns d’autenticació i les crides a l’API. Mantén la versió antiga disponible mentre verifiques el canvi. El botó Publish de Lovable continua publicant a Lovable; un canvi a la branca Git pot activar el desplegament extern, segons la integració que hagis configurat.

Per desplegar l’app fora de Lovable amb Hostbrid, consulta Projects i els preus actuals. L’allotjament extern et dona control sobre els desplegaments, però també et fa responsable d’operar i protegir cada servei que traslladis.