Comment exporter le code Lovable.dev vers GitHub avec synchronisation continue et deploiement

10 min read

Vous cherchez a exporter votre projet Lovable vers GitHub ? Vous etes parmi les centaines de developpeurs recherchant exactement cette solution. Que vous ayez besoin de controle de version, de collaboration d'equipe ou que vous vouliez deployer ailleurs, ce guide couvre chaque methode pour mettre votre code Lovable dans GitHub.

Pourquoi exporter Lovable vers GitHub ?

Avant de plonger dans le comment, comprenons le pourquoi :

  • Controle de version : Suivre les changements, revenir sur les erreurs, gerer les branches
  • Collaboration d'equipe : Travailler avec des developpeurs qui ne sont pas sur Lovable
  • Liberte de deploiement : Deployer sur Vercel, Netlify, AWS, n'importe ou
  • Strategie de sauvegarde : Se proteger contre les problemes de plateforme
  • Gestion des couts : Continuer le developpement sans credits
  • Pipelines CI/CD : Automatiser les tests et le deploiement
  • Propriete du code : Controle total sur votre base de code

Table des matieres

  1. Methode 1 : Integration GitHub directe
  2. Methode 2 : Telecharger et Pusher
  3. Methode 3 : Configuration Git Remote
  4. Sync continue vs Export unique
  5. Configuration GitHub Actions
  6. Problemes courants et solutions
  7. Ce qui est exporte
  8. Workflow post-export

Prerequis

Avant de commencer, assurez-vous d'avoir :

  • Un compte Lovable avec un projet a exporter
  • Un compte GitHub
  • Git installe localement (pour les methodes manuelles)
  • Connaissances basiques du terminal/ligne de commande
  • Permissions de telechargement de projet dans Lovable

Methode 1 : Integration GitHub directe

La methode la plus simple si votre forfait Lovable le supporte.

Etape 1 : Activer l'integration GitHub dans Lovable

  1. Ouvrez votre projet Lovable
  2. Naviguez vers Settings → Integrations
  3. Cliquez sur Connect GitHub
  4. Authentifiez-vous avec GitHub
  5. Accordez les permissions a Lovable

Etape 2 : Configurer le depot

# Lovable vous demandera de :
1. Creer un nouveau depot OU
2. Connecter un depot existant

Pour un nouveau depot :

  • Nom du depot : votre-nom-de-projet
  • Visibilite : Public/Prive
  • Initialiser avec README : Non (Lovable le fournit)

Pour un depot existant :

  • Selectionnez dans la liste deroulante
  • Choisissez la branche (main/master)
  • Resolution de conflit : Ecraser/Fusionner

Etape 3 : Synchronisation initiale

Cliquez sur le bouton Sync to GitHub. Lovable va :

  1. Exporter tous les fichiers du projet
  2. Creer le commit initial
  3. Pusher vers la branche selectionnee

Etape 4 : Activer l'auto-sync (optionnel)

Activez Auto-sync pour pusher automatiquement les changements :

  • A chaque sauvegarde
  • Toutes les 5 minutes
  • Sur declenchement manuel

Methode 2 : Telecharger et Pusher

Pour quand l'integration GitHub n'est pas disponible.

Etape 1 : Telecharger votre projet

# Dans Lovable :
1. Cliquez sur le bouton "Export" ou "Download"
2. Selectionnez "Download as ZIP"
3. Sauvegardez sur votre machine locale

Etape 2 : Extraire et initialiser Git

# Commandes terminal :
unzip lovable-project.zip
cd lovable-project
git init

Etape 3 : Creer un depot GitHub

# Avec GitHub CLI :
gh repo create votre-nom-de-projet --public --source=.

# Ou manuellement sur GitHub.com :
1. Cliquez "New repository"
2. Nommez-le
3. N'initialisez pas avec README
4. Copiez l'URL du depot

Etape 4 : Pusher vers GitHub

# Ajouter tous les fichiers
git add .

# Creer le commit initial
git commit -m "Initial export from Lovable"

# Ajouter l'origin remote
git remote add origin https://github.com/votreusername/votre-projet.git

# Pusher vers GitHub
git push -u origin main

Methode 3 : Configuration Git Remote

Pour les utilisateurs avances voulant un controle granulaire.

Etape 1 : Acceder a l'URL Git de Lovable

Certains projets Lovable fournissent un acces Git :

# Dans les parametres du projet Lovable, cherchez :
Git URL: https://git.lovable.dev/votre-projet.git

Etape 2 : Cloner localement

git clone https://git.lovable.dev/votre-projet.git
cd votre-projet

Etape 3 : Ajouter GitHub comme remote

# Ajouter GitHub comme remote supplementaire
git remote add github https://github.com/votreusername/votre-repo.git

# Verifier les remotes
git remote -v
# Sortie :
# origin    https://git.lovable.dev/votre-projet.git (fetch)
# origin    https://git.lovable.dev/votre-projet.git (push)
# github    https://github.com/votreusername/votre-repo.git (fetch)
# github    https://github.com/votreusername/votre-repo.git (push)

Etape 4 : Pusher vers GitHub

# Pusher vers le remote GitHub
git push github main

# Definir GitHub comme defaut (optionnel)
git branch --set-upstream-to=github/main

Sync continue vs Export unique

Synchronisation continue

Avantages :

  • Toujours a jour
  • Sauvegardes automatiques
  • L'equipe voit les changements immediatement

Inconvenients :

  • Necessite un forfait Pro+ Lovable
  • Peut creer beaucoup de commits
  • Conflits de sync potentiels

Configuration :

// .lovable/sync.config.json
{
  "github": {
    "enabled": true,
    "repository": "username/repo",
    "branch": "main",
    "frequency": "on_save", // ou "5min", "manual"
    "commit_message": "Auto-sync from Lovable: {timestamp}"
  }
}

Export unique

Avantages :

  • Fonctionne sur n'importe quel forfait
  • Controle total sur les commits
  • Pas de connexion continue necessaire

Inconvenients :

  • Processus manuel
  • Peut devenir obsolete
  • Necessite un re-export pour les mises a jour

Workflow recommande :

  1. Exporter aux jalons majeurs
  2. Continuer le developpement localement
  3. Re-importer dans Lovable si necessaire

Configuration GitHub Actions

Automatiser le deploiement apres l'export.

Workflow de deploiement basique

Creez .github/workflows/deploy.yml :

name: Deploy Lovable Export

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Build project
      run: npm run build

    - name: Run tests
      run: npm test

    - name: Deploy to Vercel
      if: github.ref == 'refs/heads/main'
      run: |
        npm i -g vercel
        vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

Variables d'environnement

Stockez les variables d'environnement Lovable dans GitHub :

  1. Repository → Settings → Secrets
  2. Ajoutez chaque variable de Lovable
  3. Referencez dans les workflows : ${{ secrets.VAR_NAME }}

Ce qui est exporte

Inclus dans l'export

  • Code source : Tous les fichiers JavaScript/TypeScript
  • Styles : CSS, SCSS, configs Tailwind
  • Assets : Images, polices, icones
  • Configuration : package.json, configs
  • Fichiers publics : HTML, robots.txt, manifests
  • Documentation : README, licences

NON inclus

  • Variables d'environnement : A exporter separement
  • Donnees de base de donnees : Seul le schema est exporte
  • Metadonnees Lovable : Donnees internes de la plateforme
  • Artefacts de build : dist/, .next/, etc.
  • Parametres de deploiement : Configurations serveur
  • Donnees analytiques : Statistiques d'utilisation
  • Uploads utilisateur : Contenu dynamique

Export des variables d'environnement

# Dans Lovable, allez a Settings → Environment Variables
# Cliquez "Export as .env"

# Cree un fichier .env :
API_KEY=votre-cle-api
DATABASE_URL=votre-url-base-de-donnees
NEXT_PUBLIC_APP_URL=https://votre-app.com

Avertissement securite : Ne commitez jamais .env sur GitHub !

# Ajouter a .gitignore
echo ".env" >> .gitignore
echo ".env.local" >> .gitignore

Problemes courants et solutions

Probleme 1 : "Authentication Failed"

Solution :

# Utilisez un personal access token au lieu du mot de passe
1. GitHub → Settings → Developer settings
2. Personal access tokens → Generate new token
3. Selectionnez les scopes : repo, workflow
4. Utilisez le token comme mot de passe

Probleme 2 : "Large Files Rejected"

Erreur : this exceeds GitHub's file size limit of 100.00 MB

Solution :

# Utilisez Git LFS pour les gros fichiers
git lfs track "*.psd"
git lfs track "*.zip"
git add .gitattributes
git add large-file.psd
git commit -m "Add large files with LFS"
git push

Probleme 3 : "Merge Conflicts"

Solution :

# Recuperer les derniers changements
git pull origin main

# Resoudre les conflits dans VS Code ou :
git status  # Voir les fichiers en conflit
# Editez les fichiers, supprimez les marqueurs de conflit
git add .
git commit -m "Resolve merge conflicts"
git push

Probleme 4 : "Missing Dependencies"

Solution :

# Lovable peut utiliser des packages internes
# Verifiez package.json pour les packages @lovable/*
# Remplacez par des alternatives publiques :

# Avant :
"@lovable/ui": "^1.0.0"

# Apres :
"@shadcn/ui": "^0.8.0"

Probleme 5 : "Build Fails After Export"

Corrections courantes :

# Vider les caches
rm -rf node_modules package-lock.json
npm install

# Verifier la version Node
node --version  # Doit correspondre a celle de Lovable

# Installer les peer deps manquantes
npm install --save-peer-deps

# Verifier les imports specifiques a Lovable
# Remplacer par des imports standards

Workflow post-export

1. Configurer l'environnement de developpement

# Installer les dependances
npm install

# Configurer les variables d'environnement
cp .env.example .env
# Editez .env avec vos valeurs

# Lancer le serveur de developpement
npm run dev

2. Configurer VS Code

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  }
}

3. Configurer les pre-commit hooks

# Installer husky
npm install --save-dev husky lint-staged
npx husky init

# Ajouter le pre-commit hook
echo "npx lint-staged" > .husky/pre-commit

4. Continuer le developpement

Vous pouvez maintenant :

  • Editer dans VS Code/Cursor
  • Utiliser GitHub Copilot
  • Collaborer avec l'equipe
  • Deployer n'importe ou
  • Retourner a Lovable a tout moment

Deployer votre projet exporte

Vers Vercel

# Installer Vercel CLI
npm i -g vercel

# Deployer
vercel

# Suivez les prompts, obtenez l'URL

Vers Netlify

# Installer Netlify CLI
npm i -g netlify-cli

# Deployer
netlify deploy --prod

# Ou glisser-deposer dans l'UI Netlify

Vers Cloudflare Pages

# Build du projet
npm run build

# Installer Wrangler
npm i -g wrangler

# Deployer
wrangler pages deploy ./dist

Retourner a Lovable

Besoin de ramener les changements dans Lovable ?

Option 1 : Re-importer le projet

  1. Lovable → New Project → Import from GitHub
  2. Selectionnez le depot
  3. Configurez les parametres d'import

Option 2 : Sync manuelle

# Dans votre projet local
git remote add lovable https://git.lovable.dev/project.git
git push lovable main

Bonnes pratiques

1. Messages de commit

# Lors de l'export, utilisez des messages clairs
git commit -m "Export from Lovable: [date]"
git commit -m "Post-export: Fix dependencies"
git commit -m "Post-export: Add GitHub Actions"

2. Strategie de branches

# Gardez les exports Lovable separes
git checkout -b lovable-export
# Faites les changements
git checkout main
git merge lovable-export

3. Documentation

Mettez toujours a jour le README apres export :

# Nom du projet

Originalement cree avec [Lovable](https://lovable.dev)
Exporte vers GitHub le : 2025-01-26

## Developpement
- Lancer localement : `npm run dev`
- Build : `npm run build`
- Deployer : `npm run deploy`

Script d'automatisation

Gagnez du temps avec ce script d'export :

#!/bin/bash
# sauvegardez en export-lovable.sh

echo "Exportation du projet Lovable vers GitHub"

# Telecharger depuis Lovable (etape manuelle)
echo "1. Telechargez le projet depuis Lovable"
echo "   Appuyez sur Entree quand c'est fait..."
read

# Configuration
unzip ~/Downloads/lovable-export.zip -d ./lovable-project
cd lovable-project
git init

# Configurer git
git add .
git commit -m "Initial export from Lovable $(date +%Y-%m-%d)"

# Creer le depot GitHub
echo "Entrez le nom du depot GitHub :"
read REPO_NAME
gh repo create $REPO_NAME --public --source=.

# Pusher
git push -u origin main

echo "Export termine ! Voir a : https://github.com/$(gh api user -q .login)/$REPO_NAME"

Conclusion

Exporter de Lovable vers GitHub ouvre des possibilites infinies pour votre projet. Que vous choisissiez la sync continue ou l'export unique, vous avez maintenant les connaissances pour :

  • Prendre le controle total de votre code
  • Collaborer avec n'importe quel developpeur
  • Deployer n'importe ou
  • Reduire la dependance a la plateforme

Rappelez-vous : Vous pouvez toujours retourner a Lovable pour le developpement assiste par IA quand vous en avez besoin !

Tutoriels connexes

Questions ? Trouve un probleme ? Consultez nos autres guides Lovable pour plus d'aide.

Fred

Fred

AUTHOR

Full-stack developer with 10+ years building production applications. I've deployed applications to every major cloud platform and lived to tell the tale.

Sidebar: If your AI-built app is acting like it has opinions, I specialize in teaching it manners. Get rescue help →

Stuck with broken vibe-coded site?

I fix Lovable, Bolt, and Cursor messes. Get your project back on track.

Get Help →