Aller au contenu
Retour au blog

Héberger en dehors de Lovable une application créée avec Lovable

Transférez une app Lovable vers votre hébergement : synchronisez le code, identifiez Vite ou TanStack Start, gardez ou migrez Cloud et testez avant de changer le DNS.

  • Lovable
  • déploiement
  • hébergement

Publier avec Lovable et héberger en dehors de Lovable sont deux choses différentes. Vous pouvez déplacer uniquement l’application web et conserver Lovable Cloud, ou transférer aussi ses données et ses services. Avant de modifier le DNS, décidez quelles parties vous allez exploiter et qui prendra en charge les mises à jour, les sauvegardes et la sécurité.

Le guide officiel de déploiement externe de Lovable décrit ces deux parcours. Cette page se concentre sur les choix d’hébergement et sur un ordre de vérification qui évite d’arrêter d’abord la version qui fonctionne.

1. Récupérez une copie du code et testez-la en local

Connectez le projet à GitHub, GitLab ou Bitbucket avec Git sync de Lovable. Le dépôt reste synchronisé avec le projet et vous permet de déployer une branche précise. Pour une copie ponctuelle, Lovable propose aussi le téléchargement du code selon les conditions de votre offre.

Clonez le dépôt, ouvrez package.json et exécutez l’application sur votre ordinateur avant de configurer un serveur. Vérifiez la branche, le dossier du projet et les scripts réels. Un monorepo peut contenir plusieurs applications ; le manifeste à la racine ne décrit pas toujours le build que vous souhaitez publier.

2. Vérifiez si vous avez besoin de fichiers statiques ou d’un serveur

Lovable indique que les nouveaux projets créés depuis le 13 mai 2026 utilisent TanStack Start ; les projets React et Vite plus anciens conservent leur architecture d’origine. Vérifiez package.json avant de choisir l’hébergement.

Les anciennes applications Lovable créées avec React et Vite produisent des fichiers statiques, généralement dans dist/. Un serveur web statique peut les distribuer, mais les routes du navigateur ont besoin d’un fallback vers index.html. Ouvrez une route interne directement et actualisez-la pour vérifier le comportement.

TanStack Start peut rendre les routes côté serveur (SSR), les pré-générer sous forme de fichiers statiques (SSG) ou combiner les modes. Le guide de déploiement externe de Lovable prépare un serveur pour TanStack Start ; il vous en faut un si l’application utilise le SSR à chaque requête, des fonctions serveur dynamiques ou des routes API. L’hébergement statique convient si la configuration génère toutes les routes nécessaires et qu’aucun serveur applicatif n’est requis à chaque requête ; le frontend peut toujours appeler un backend externe. Vérifiez dans package.json la présence de @tanstack/react-start, nitro, @lovable.dev/vite-tanstack-config et la configuration de build décrite dans le guide externe de Lovable.

Pour un serveur Node que vous gérez, le guide officiel de Lovable présente ce parcours avec Node.js 22 et le preset node-server. Si votre app utilise Lovable Cloud, définissez VITE_SUPABASE_URL et VITE_SUPABASE_PUBLISHABLE_KEY avant le build ; configurez SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY et les secrets requis par le serveur dans son environnement d’exécution. Les variables VITE_* sont envoyées au navigateur : n’y placez jamais de secret privé.

# Si le dépôt contient package-lock.json
npm ci
NITRO_PRESET=node-server npm run build
node .output/server/index.mjs

Le build produit le serveur dans .output. Suivez les scripts et le fichier de verrouillage de votre dépôt ; avec un autre gestionnaire de paquets ou un autre preset, adaptez ces commandes et testez la sortie générée. L’affectation NITRO_PRESET=... utilise la syntaxe d’un shell POSIX ; dans PowerShell, définissez $env:NITRO_PRESET="node-server" avant npm run build. Ne publiez pas uniquement dist/ pour une app qui a besoin du SSR ou de fonctions serveur.

Projects chez Hostbrid permet de déployer des projets depuis un dépôt et d’exécuter des services Node ou Docker. Comparez les besoins de votre app avec la configuration et l’offre disponibles. Pour une sortie statique, définissez le build et le dossier de sortie ; pour TanStack Start, validez le runtime et le point d’entrée serveur avant de commander.

3. Décidez quoi faire de Lovable Cloud

Déplacer le frontend ne migre pas automatiquement sa base de données, l’authentification, les fichiers, les fonctions Edge, les connecteurs ou les fonctions d’IA. Vous pouvez continuer à utiliser Lovable Cloud depuis un frontend hébergé ailleurs. Dans ce cas, les données restent dans le backend actuel et l’application dépend toujours de ces services.

Si vous souhaitez aussi quitter Cloud, préparez séparément la migration des données et des services. Le guide officiel utilise Supabase comme destination de référence et explique quoi copier et reconfigurer. Vérifiez les politiques RLS, les utilisateurs, les URL de redirection de connexion, les fichiers, les fonctions et les tâches avant de changer le frontend. Ne supprimez pas le backend d’origine tant que la copie n’est pas validée et que vous n’avez pas de plan de retour.

Les variables VITE_* sont intégrées au JavaScript envoyé au navigateur. Considérez-les comme publiques : n’y mettez ni mots de passe, ni clés de service, ni jetons privés. Configurez les secrets serveur dans l’environnement d’exécution et vérifiez les droits de chaque table et API.

4. Déployez sur une URL temporaire et testez les parcours

Configurez le build à partir du dépôt. Les exemples actuels de Lovable utilisent npm run build et Node 22, mais vérifiez le fichier de verrouillage et le runtime de votre projet. Testez sur une URL temporaire avant de modifier le DNS de production.

Ouvrez une route interne directement et actualisez-la, connectez-vous et déconnectez-vous, envoyez des formulaires, téléversez des fichiers et lancez les fonctions utilisées par l’application. Avec TanStack Start, testez aussi une page rendue côté serveur et une fonction serveur. Une page d’accueil qui s’ouvre ne prouve pas que les paiements, l’authentification ou les écritures en base fonctionnent.

Quand les tests passent, dirigez le domaine vers le nouvel hébergement et vérifiez HTTPS, les redirections de connexion et les appels API. Gardez l’ancienne version disponible pendant le contrôle. Le bouton Publish de Lovable continue de publier sur Lovable ; une modification de votre branche Git peut déclencher le déploiement externe selon l’intégration configurée.

Pour déployer votre app en dehors de Lovable avec Hostbrid, découvrez Projects et les tarifs actuels. L’hébergement externe vous donne la maîtrise du déploiement, mais vous rend aussi responsable de l’exploitation et de la protection de chaque service transféré.

Gérez vos sites, serveurs et e-mails.

Mot de passe oublié ?

C’est gratuit et ça prend une minute.

8 caractères minimum. Ni que des chiffres, ni un mot de passe courant.

Nous vous enverrons un e-mail pour confirmer le compte.