Convertissez votre application Lovable en iOS et Android avec Capacitor

Introduction

Lovable est un générateur d'applications IA qui transforme vos prompts en applications React fonctionnelles en quelques minutes. Vous pouvez publier rapidement depuis le navigateur — mais que faire si vous voulez que votre app soit sur l'App Store et Google Play, sur l'écran d'accueil comme n'importe quelle autre app native ?

Version courte : la Page Lovable vers iOS et Android résume tout le parcours sur un seul écran : l'export, Capacitor, les builds cloud sans Mac et les live updates.

Ce guide détaille tout le processus : l'export depuis Lovable, l'encapsulation de l'app web avec Capacitor, le build de binaires iOS et Android signés dans le cloud avec Builder Capgo (sans Mac requis), l'ajout d'une fonctionnalité native réelle et le déploiement d'un correctif de mise en page via Live Updates Capgo.

Nous utilisons Cursor tout au long — son IA peut exécuter la plupart des commandes terminal pour vous si vous préférez ne pas les taper manuellement.

Temps requis : environ 1 à 2 heures la première fois, principalement la configuration du compte et l’attente des builds cloud.

À la fin, vous aurez :

• Une application iOS et Android native compilée dans le cloud — sans passer par Xcode ni Android Studio
• L’application qui tourne sur un appareil réel (TestFlight, installation directe ou test interne Play)
• Une fonctionnalité caméra opérationnelle que seule une application native peut offrir
• Live Updates configurés pour déployer les correctifs UI et CSS sans passer par la revue des stores

Prerequisites

Coûts (uniquement pour la publication publique) :

Optionnel (simulateur local uniquement) :

Vous pouvez passer les deux. Le chemin principal de ce guide compile dans le cloud et installe sur des appareils réels sans eux.

Note rapide sur Lovable et les frameworks

Avant de toucher à code, sachez que le type d’application web générée par Lovable influence l’emballage mobile.

Pendant longtemps, le défaut de Lovable était une application monopage (SPA) React + Vite. Depuis mai 2026, les nouvelles applications Lovable peuvent utiliser TanStack Start avec rendu côté serveur (SSR) par défaut. Le SSR est idéal pour le web, mais Capacitor enveloppe un build statique — un dossier HTML, CSS et JavaScript avec un index.html à la racine — qui est embarqué dans l'app sur l'appareil.

Une app SSR nécessite un serveur pour rendre les pages à chaque requête. Or, il n'y a pas de serveur dans un téléphone ; pour Capacitor, vous voulez un rendu statique côté client.

Que faire :

• Repartir de zéro : Demandez à Lovable une application monopage (SPA) ou pour ignorer le SSR et passer en statique dist/ dossier.
• Déjà sur TanStack Start (SSR) : Configurez-le pour pré-rendre ou générer une SPA statique. La seule exigence stricte est un dossier de build statique contenant index.html.
• Projets Lovable Next.js legacy : Utiliser export statique — la sortie va dans out/ au lieu de dist/.

Quel que soit le framework que vous utilisez, pointez Capacitor webDir ce dossier. Pour une SPA Vite, ce dossier est dist.

Étape 1 — Exportez votre app Lovable vers GitHub

Lovable conserve votre code dans son éditeur jusqu’à ce que vous connectiez GitHub.

1. Ouvrez votre projet Lovable dans le navigateur
2. Cliquez Mise à niveau (en haut à droite) si nécessaire, puis ouvrez Git dans le menu de gauche
3. Choisissez GitHub, autorisez Lovable et liez votre compte
4. Lovable crée un dépôt et pousse votre application automatiquement

✅ Succès : Visite github.com/YOUR-USERNAME/your-app affiche le code de votre application.

Étape 2 — Configurez Cursor et clonez votre projet

Avant de pouvoir travailler avec votre code en local, vous aurez besoin d'un éditeur code. Nous recommandons Cursor, un éditeur propulsé par l’IA capable d’exécuter des commandes de terminal pour vous.

Télécharger et installer Cursor

1. Visitez cursor.sh et téléchargez la version pour votre système d'exploitation
2. Installez Cursor en suivant l'assistant d'installation
3. Une fois installé, ouvrez Cursor

Configurez Cursor pour le développement avec l'IA

Pour une expérience optimale, configurez Cursor avant de commencer :

1. Achetez un plan Cursor — Cursor propose une version gratuite, mais un plan Pro (20 $/mois) vous donne des complétions IA illimitées, l'accès à Claude et GPT-4 et l'exécution de commandes
2. Ouvrez les paramètres de Cursor en appuyant sur Command+, (Mac) ou Ctrl+, (Windows)

3. Activer les modèles d'IA — Vérifiez que les fonctionnalités IA sont activées :

4. Sélectionnez votre modèle préféré — Choisissez Claude ou GPT-4 pour de meilleurs résultats :

5. Autoriser l'exécution de commandes — Autorisez Cursor à exécuter des commandes pour vous :

Clonez votre dépôt dans Cursor

1. Dans Cursor, appuyez sur Shift+Command+P (Mac) ou Shift+Ctrl+P (Windows) pour ouvrir la palette de commandes
2. Tapez « clone » et sélectionnez Git: Clone
3. Collez l'URL de votre dépôt GitHub : https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Choisissez un dossier où enregistrer le projet

5. Cursor va cloner et ouvrir votre projet

Étape 3 — Installer les dépendances et lancer en local

Méthode 1 : utiliser Cursor AI (recommandée)

1. Ouvrez l'onglet IA de Cursor en appuyant sur Command+K (Mac) ou Ctrl+K (Windows)
2. Tapez la commande suivante :

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

L'IA détectera automatiquement votre OS, installera Node.js, exécutera npm install, et lancera le serveur de dev avec npm run dev.

Méthode 2 : installation manuelle

Ouvrez le terminal dans Cursor en appuyant sur Shift+Command+T (Mac) ou Shift+Ctrl+T (Windows), puis :

Pour macOS :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Pour Windows :

1. Téléchargez le 24 LTS installateur depuis nodejs.org
2. Lancez l'installateur
3. Ouvrez le terminal et lancez :

cd your-lovable-app
npm install
npm run dev

Les applications Lovable tournent généralement sur http://localhost:8080 ou http://localhost:5173 — utilisez l'adresse affichée dans votre terminal.

Appuyez sur Ctrl + C pour arrêter le serveur de dev quand vous êtes prêt à continuer.

✅ Succès : Votre application s’ouvre dans le navigateur et son interface fonctionne.

Étape 4 — Préparez le build statique de production

Capacitor nécessite un build de production avant d’ajouter les plateformes natives.

React + Vite (la plupart des apps Lovable)

Méthode 1 : utiliser Cursor AI (recommandée)

Appuyez sur Command+K (Mac) ou Ctrl+K (Windows) et demandez :

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Méthode 2 : Configuration manuelle

Confirmer vite.config.ts utilise une base relative pour que les assets se chargent dans la WebView native :

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Compiler et vérifier :

npm run build

Vous devriez voir un dist/ dossier avec index.html à sa racine.

Projets legacy Next.js Lovable

Si votre repo utilise Next.js, demandez à Cursor :

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

Ou suivez Convert Your Next.js App to Mobile pour la configuration next.config complète, puis utilisez webDir: 'out' dans Capacitor à la place de dist.

✅ Succès : Un dossier de build statique existe (dist/ ou out/) avec index.html.

Étape 5 — Ajouter Capacitor et les plateformes natives

Capacitor encapsule votre application web dans de véritables coquilles iOS et Android — aucune réécriture nécessaire.

Méthode 1 : utiliser Cursor AI (recommandée)

Appuyez sur Command+K (Mac) ou Ctrl+K (Windows) et demandez :

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

L'IA vous demandera votre nom de l’app et ID du bundle (ex. com.yourcompany.myapp).

Méthode 2 : installation manuelle

npm install @capacitor/core @capacitor/cli
npx cap init

Lorsque demandé :

Pick a Package ID you actually own. Les Bundle IDs sont uniques au niveau mondial. Utilisez un ID en domaine inversé basé sur un domaine que vous contrôlez dès le départ — le changer plus tard implique un rechercher-remplacer dans ios/ et android/ et un rebuild.

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Configurer Capacitor

Méthode 1 : utiliser Cursor AI (recommandée)

Demander à Cursor :

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Pour l'export statique Next.js, demandez-lui d'utiliser out plutôt.

Méthode 2 : Configuration manuelle

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Build et Sync

Méthode 1 : utiliser Cursor AI (recommandée)

Dites à Cursor :

Build the production web app and sync it with Capacitor platforms

Méthode 2 : Commandes manuelles

npm run build
npx cap sync

Voici à quoi ressemble votre projet :

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

Pas besoin de CocoaPods. Capacitor 8 utilise Swift Package Manager pour les dépendances iOS automatiquement.

✅ Succès : ios/ et android/ des dossiers apparaissent et le terminal affiche Sync finished.

Étape 6 — Vérifiez votre .gitignore

Capgo Builder compile depuis votre dépôt Git, donc ios/ et android/ doivent être commités. Une erreur fréquente consiste à les ignorer à la racine du dépôt.

Vérifiez :

• Racine .gitignore ignore node_modules et dist (le cloud reconstruit dist pendant les builds web)
• ios/ et android/ eux-mêmes sont pas ignorés

✅ Succès : git status affiche ios/ et android/ prêt à commit (non ignoré).

Étape 7 — Commit et push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Succès : Votre dépôt GitHub affiche les ios/ et android/ dossiers.

Étape 8 — Compiler des binaires prêts pour les stores avec Capgo Builder

Vous n’avez pas besoin d’un Mac ni d’un pipeline local Xcode/Android Studio pour déployer. Builder Capgo compile, signe et peut soumettre des builds iOS et Android depuis le cloud.

Configurer Capgo Builder

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Save signing credentials once. Use our free tools if you need help generating them:

• Générateur de certificat iOS
• Générateur de keystore Android
• Trouver l'UDID iOS — enregistrez votre iPhone pour les builds de développement

Consultez Gestion des identifiants et Compiler pour iOS depuis Windows.

Demander un build cloud

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

Les logs de build défilent dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent être envoyés automatiquement vers TestFlight.

Installer sur un appareil physique :

• iOS : TestFlight (recommandé) ou un build de développement avec l'UDID de votre appareil enregistré
• Android : Canal de test interne Google Play ou un APK/AAB de release signé

✅ Succès : Le build signé est terminé et vous pouvez l'installer sur un appareil réel.

Étape 9 — Facultatif : tester localement dans Xcode ou Android Studio

Si vous avez un Mac ou si vous voulez tester sur émulateur avant les builds cloud :

Pour iOS

Méthode 1 : utiliser Cursor AI (recommandée)

Open the iOS project in Xcode

Méthode 2 : commande manuelle

npx cap open ios

Configuration initiale de Xcode :

1. Sélectionnez un simulateur dans le menu déroulant des appareils (ex. iPhone 15)
2. Pour les appareils réels : activer Gérer automatiquement la signature et sélectionner votre équipe Apple Developer
3. Cliquez sur le bouton ▶️ Play — le premier build prend 5 à 10 minutes

Pour Android

Méthode 1 : utiliser Cursor AI (recommandée)

Open the Android project in Android Studio

Méthode 2 : commande manuelle

npx cap open android

Première configuration d’Android Studio :

1. Installez les packages SDK manquants si demandé
2. Créez un émulateur dans Device Manager (ex. Pixel 6, API 33+)
3. Cliquez sur le bouton Run vert ▶️ — le premier build prend 5 à 15 minutes

Utilisez des IDE locaux pour le débogage quotidien. Utilisez Builder Capgo lorsque vous avez besoin de binaires de release signés.

✅ Succès : L’application s’ouvre dans le simulateur ou l’émulateur et affiche votre contenu Lovable.

Étape 10 — Activer le Live Reload (développement)

Accélérez les itérations en pointant le shell natif vers votre serveur de dev local.

Méthode 1 : utiliser Cursor AI (recommandée)

Dites à Cursor :

Set up live reload for Capacitor development with my local IP address

Méthode 2 : configuration manuelle

1. Trouvez votre adresse IP locale :

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Mise à jour capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Utiliser le port 8080 ou 3000 si c'est ce que npm run dev affiche.

3. Appliquer les changements :

npx cap copy

✅ Succès : Les modifications de votre web code se rechargent à chaud sur l’appareil ou le simulateur.

Étape 11 — ajouter une fonctionnalité native : la caméra

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

Méthode 1 : utiliser Cursor AI (recommandée)

Dites à Cursor :

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Méthode 2 : installation manuelle

npm install @capacitor/camera
npx cap sync

iOS — à ajouter dans ios/App/App/Info.plist dans le niveau supérieur de <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — ajouter à l’intérieur <manifest> dans android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

L’ajout d’un plugin nécessite un nouveau build natif via le Capgo Builder avant qu'il ne fonctionne sur les appareils.

✅ Succès : Camera code compile et npx cap sync se termine sans erreur.

Étape 12 — ajouter Capgo Live Updates

Chaque modification native passe normalement par la revue des stores. Live Updates Capgo poussez des changements sur la couche web de votre app (HTML, CSS, JS, images) en OTA en quelques minutes.

Installez l'updater dans votre première release pour ne plus jamais être bloqué par la revue quand vous devez déployer un correctif.

npm install @capgo/capacitor-updater
npx cap sync

Ajouter à capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Initialisez dans le point d'entrée de l'app (ex. src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commitez, pushez et lancez un nouveau build Capgo Builder pour que l'updater SDK soit intégré au shell natif.

Envoyez les bundles web après le lancement :

npm run build
npx @capgo/cli@latest bundle upload --channel production

Consultez Docs Capgo Live Updates.

Pour automatiser cet upload à chaque clic Publier dans Lovable, suivez Automatisez les Capgo Live Updates depuis Lovable avec GitHub Actions.

✅ Succès : Le plugin updater est installé et notifyAppReady() s'exécute au démarrage.

Étape 13 — Corriger l'espacement de la barre d'état avec un Live Update

Sur un vrai iPhone, votre en-tête peut se superposer sous la barre d’état (horloge et batterie). Les Capacitor modernes s’étendent de bord à bord, votre application doit donc respecter les marges de sécurité: env(safe-area-inset-top), -bottom, -left, -right.

De nombreuses applications Lovable gèrent déjà la marge inférieure, mais utilisent un padding supérieur fixe (comme pt-6) sans la marge supérieure.

1. Confirmer viewport-fit=cover dans index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Corriger les en-têtes du haut — utilisez max() pour conserver le padding web et s’adapter aux appareils avec encoche :

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Dans Cursor ou Lovable, demandez :

« Le contenu de l’app passe sous la barre de statut en haut sur mobile. Ajoutez env(safe-area-inset-top) au padding supérieur de chaque en-tête de page en utilisant max(), en conservant le padding existant comme minimum. »

3. Déployer la correction en OTA — c’est du CSS pur, aucun rebuild natif nécessaire :

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Forcez la fermeture de l’app sur votre appareil, rouvrez-la, attendez environ 15 à 30 secondes, puis ouvrez-l’à nouveau. L’en-tête doit se trouver sous la barre de statut — corrigé sans revue du store.

✅ Succès : Le contenu du haut évite la barre d'état après l'application du bundle OTA.

Pour approfondir la mise en page, consultez @capgo/tailwind-capacitor et Capacitor l'affichage edge-to-edge.

Étape 14 — Préparez votre fiche sur les stores

Votre app est compilée, installable, et vous pouvez envoyer des mises à jour instantanées. La publication sur les stores publics relève surtout de la paperasse :

• Icône de l'app — 1024×1024px pour iOS (sans transparence), 512×512px pour Google Play
• Captures d'écran — Apple exige des captures d'écran pour iPhone 6,9″ (1320×2868px)
• Nom de l'app, sous-titre, description, mots-clés
• URL de la politique de confidentialité — requise par les deux stores, même pour les apps gratuites
• Classement par âge — questionnaire dans chaque console
• Déclarations de collecte de données — Apple Privacy Nutrition Labels et Google Data Safety

Méthode 1 : utiliser Cursor AI (recommandée)

Set up app icons and splash screens for my Capacitor app

Méthode 2 : configuration manuelle

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Ce qu’il reste avant le « live » :

1. Tests fermés Google Play (comptes personnels créés après le 13 nov. 2023) : au moins 12 testeurs pendant 14 jours consécutifs avant l’accès à la production. Pas d’équivalent sur iOS.
2. Soumettre pour examen — Apple ~3–5 jours, Google ~3–7 jours une fois les conditions de test remplies.

Consultez notre guide du premier examen de l'app pour la checklist complète.

Erreurs courantes (et comment les corriger)

• Could not find the web assets directory: ./dist — Exécuter npm run build avant npx cap add ou npx cap sync. Assurez-vous que webDir dans capacitor.config.ts correspond à la sortie de votre framework (dist pour Vite, out pour l’export statique Next.js).
• « This App ID … is not available » — Les Bundle IDs sont uniques au niveau mondial. Choisissez un ID en domaine inversé que vous contrôlez.
• Le build iOS échoue après modification du Bundle ID — L’ID dans votre projet natif doit correspondre à Apple App Store Connect. Recherchez et remplacez dans ios/ et android/, committez, recompilez.
• Écran blanc au lancement — Définissez base: './' dans la config Vite, recompilez et exécutez npx cap sync.
• Contenu sous la barre de statut — Ajouter viewport-fit=cover et env(safe-area-inset-top) padding (étape 13).
• APK signé en mode debug — Google Play rejette les builds debug. Utilisez un build release signé avec votre keystore.
• Déploiement refusé — la version existe déjà — Incrémentez le numéro de version/build dans les projets natifs et recompilez.

Pour les problèmes de Capgo Builder, voir Dépannage Native Build et Débogage des Live Updates.

Conclusion

Vous avez fait passer votre application web Lovable en natif iOS et Android — compilée dans le cloud sans Mac, avec une vraie fonctionnalité caméra et un correctif de mise en page déployé en OTA. Le plus dur est fait.

Étapes suivantes

• Live Updates Capgo — Déployer des correctifs d’interface et de textes sans attendre la revue du store
• Builder Capgo — Automatiser les builds de release dans la CI
• Capgo Répertoire des plugins — Biométrie, notifications push, géolocalisation et plus encore
• Guides associés : Passer de Base44 au mobile · Bolt.new vers le mobile

Créez un compte Capgo gratuit pour activer les Live Updates et les builds natifs cloud.

Ressources

• Documentation Lovable
• Documentation Capacitor
• Capgo Native Build
• Capgo — Live Updates pour les apps Capacitor
• Compiler pour iOS depuis Windows
• Export statique Next.js pour le mobile

Foire aux questions

Comment convertir une application Lovable en application mobile ?

Exportez le projet Lovable vers GitHub, compilez-l’en application web statique (la plupart des applications Lovable utilisent React et Vite), ajoutez Capacitor avec les plateformes iOS et Android, puis synchronisez et compilez les binaires prêts pour les stores. Ce guide détaille chaque étape, et Build Capgo peut compiler et signer les apps iOS et Android dans le cloud.

Puis-je transformer un projet Lovable en app pour l'App Store et Google Play ?

Oui. Capacitor encapsule le build web de Lovable dans une enveloppe native iOS et Android : vous gardez une seule base de code et pouvez ajouter des fonctionnalités natives comme la caméra. Après la première release sur les stores, les live updates Capgo vous permettent de déployer des changements web sans attendre une nouvelle validation.

Continuer depuis « Convertir votre app Lovable en iOS et Android avec Capacitor »

Si vous utilisez Convertissez votre application Lovable en iOS et Android avec Capacitor pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Capgo Native Build pour le workflow produit dans Capgo Native Builds, et Compiler pour iOS depuis Windows pour les builds iOS cloud sans Mac.