Convert Your Lovable App to iOS and Android with Capacitor

Introduction

Lovable is an AI app builder that turns prompts into working React apps in minutes. You can ship in the browser fast — but what if you want your app on the App Store and Google Play, sitting on home screens like every other native app?

Cette guide vous accompagne tout au long du chemin : exporter depuis Lovable, envelopper l'application web avec Capacitor, construisez des binaires iOS et Android signés dans le cloud avec Capgo Constructeur Aucun Mac n'est requis, ajoutez une vraie fonction native et envoyez une mise à jour de mise en page par Wi-Fi. Capgo Live Updates.

Nous utilisons Cursor à travers — son IA peut exécuter la plupart des commandes du 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 obtiendrez :

• Une application native iOS et Android construite à partir du cloud — sans Xcode ou Android Studio sur la voie principale
• L'application fonctionnant sur un appareil réel (TestFlight, installation directe ou Play internal testing)
• A working camera feature that only a native app can offer
• Live Updates configured so UI and CSS fixes ship without store review

Prerequisites

Coûts (seuls pour la publication publique) :

Facultatif (simulateur local uniquement) :

Vous pouvez passer outre les deux. La voie principale de ce guide construit dans le cloud et installe sur des appareils réels sans les nécessiter.

Une Note Rapide sur Lovable et les Frameworks

Avant de toucher code, sachant que le type d'application web généré par Lovable affecte l'enveloppement mobile.

Pendant longtemps, la valeur par défaut de Lovable était un application web unique (SPA) React + ViteComme de mai 2026, les nouvelles applications Lovable peuvent utiliser TanStack commence avec le rendu côté serveur (SSR) Le SSR est excellent pour le web, mais Capacitor enveloppe une construction statique — un dossier contenant des fichiers HTML, CSS et JavaScript avec un index.html à son sommet — qui est envoyé à l'intérieur de l'application sur le dispositif.

Une application SSR attend que le serveur rende les pages à chaque requête. Il n'y a pas de serveur à l'intérieur d'un téléphone, donc pour Capacitor vous voulez une sortie statique, client-réalisée.

Que faire :

• En commençant frais : Demander à Lovable un une application web unique (SPA) ou pour sauter SSR afin d'obtenir un site statique dist/ dossier.
• Déjà sur TanStack Start (SSR) : Configurez-le pour pré-render ou pour produire une application SPA statique. La seule exigence difficile est un dossier de construction statique contenant index.html.
• Projets Lovable Next.js Legacy : Utilisez l'export statique — sortir dans out/ au lieu de dist/.

Whatever framework you use, point Capacitor’s webDir à ce dossier. Pour une SPA Vite, ce dossier est dist.

Étape 1 — Exportez votre application aimable vers GitHub

Lovable garde votre code dans son éditeur jusqu'à ce que vous connectiez GitHub

1. Ouvrez votre projet Lovable dans le navigateur
2. Cliquez Mettre à jour (en haut à droite) si nécessaire, puis ouvrez Git dans le menu de gauche
3. Sélectionnez GitHubautoriser Lovable, et reliez votre compte
4. Lovable crée un dépôt et pousse automatiquement votre application

✅ Réussi : Visitez github.com/YOUR-USERNAME/your-app pour afficher votre application code.

Étape 2 — Configuration de Cursor et clonage de votre projet

Avant de pouvoir travailler avec votre code localement, vous aurez besoin d'un éditeur code. Nous recommandons Cursor, an AI-powered editor that can run terminal commands for you.

Téléchargez et installez Cursor

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

Configurez Cursor pour le développement AI

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

1. Achetez un plan Cursor — Même si Cursor offre un niveau gratuit, un plan Pro (20 $/mois) vous offre des compléments AI illimités, l'accès à Claude et GPT-4, ainsi que l'exécution de commandes
2. Ouvrez les paramètres de Cursor en appuyant sur Command+, ou Ctrl+, ou

3. Activer les modèles d'intelligence artificielle — Make sure AI features are enabled:

4. Sélectionnez votre modèle préféré Sélectionner le modèle de la souris

5. Autoriser l'exécution de commandes — Activez le curseur pour exécuter des commandes pour vous :

Cloner votre dépôt dans le curseur

1. Dans le curseur, appuyez sur Shift+Command+P ou Shift+Ctrl+P pour ouvrir la palette de commandes
2. Tapez « clone » et sélectionnez Git : Cloner
3. Collez votre adresse URL de dépôt GitHub : https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Choisissez un dossier où vous souhaitez sauvegarder le projet

5. Le curseur clonera et ouvrira votre projet

Étape 3 — Installez les dépendances et exécutez localement

Méthode 1 : Utilisation de Cursor AI (Recommandée)

1. Ouvrez la fenêtre de Cursor AI en appuyant sur Command+K (Mac) ou Ctrl+K (Windows)
2. Entrez 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, installe Node.js, exécute npm install, et démarre le serveur de développement avec npm run dev.

Méthode 2 : Installation manuelle

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

For 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

For Windows :

1. Téléchargez le 24 LTS l'installeur depuis nodejs.org
2. Exécutez l'installeur
3. Ouvrez un terminal et exécutez :

cd your-lovable-app
npm install
npm run dev

L'application Lovable fonctionne généralement sur http://localhost:8080 or http://localhost:5173 — utilisez l'adresse que votre terminal imprime.

Appuyez Ctrl + C pour arrêter le serveur de développement lorsque vous êtes prêt à continuer.

✅ Réussite : Your app opens in the browser with its UI working.

Étape 4 — Préparez la production statique

Avant d'ajouter des plateformes natives, Capacitor nécessite une mise en production.

React + Vite (les applications les plus aimables)

React + Vite (les applications les plus aimables)

Appuyez 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 afin que les assets se chargent à l'intérieur de la vue native :

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

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

Construire et vérifier :

npm run build

Vous devriez voir un dist/ dossier avec index.html à son sommet.

Projets Next.js Legacy Lovable

Si votre dépôt 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 Convertissez votre application Next.js en mobile pour la mise en place complète next.config puis utilisez webDir: 'out' dans Capacitor au lieu de dist.

✅ Réussite : Un dossier de build statique existe (dist/ ou out/) with index.html.

Étape 5 — Ajoutez Capacitor et les plateformes natives

Capacitor enveloppe votre application web dans des coques iOS et Android réelles — pas de réécriture nécessaire.

Méthode 1 : Utiliser Cursor AI (Recommandé)

Press 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 app name et ID de bundle ID de bundle com.yourcompany.myapp).

__CAPGO_KEEP_0__ initialisation

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

Méthode 2 : Installation manuelle

Pick a Package ID you actually own. Les ID de bundle sont uniques à l'échelle mondiale. Utilisez un ID de domaine inversé basé sur un domaine que vous contrôlez dès le début — changer cela plus tard signifie effectuer des recherches et remplacer partout ios/ et android/ et la reconstruction.

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 : Utilisation de Cursor AI (Recommandé)

Demandez à Cursor :

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

Pour l'export statique de Next.js, demandez-lui d'utiliser out au lieu de cela.

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;

Construire et Synchroniser

Méthode 1 : Utilisation de Cursor AI (Recommandé)

Dites à Cursor :

Build the production web app and sync it with Capacitor platforms

Méthode 2 : Commandes manuelles

npm run build
npx cap sync

Votre projet ressemble à ceci :

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 de CocoaPods nécessaires. Capacitor 8 utilise le gestionnaire de packages Swift pour les dépendances iOS automatiquement.

✅ Réussite : ios/ et android/ dossiers apparaissent et le terminal affiche Sync finished.

Étape 6 — Vérifiez .gitignore

Capgo Constructeur compile à partir de votre dépôt Git, donc ios/ et android/ doit être validéUn erreur courante est d'ignorer les fichiers à la racine du dépôt.

Confirmé :

• Racine .gitignore ignorés node_modules et dist (le cloud se reconstruit dist pendant les builds web)
• ios/ et android/ ceux-ci sont pas ignorés

✅ Succès : git status montre ios/ et android/ prêt à s'engager (pas ignoré).

Étape 7 — S'engager et Pousser

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

✅ Réussite : Votre GitHub repo montre les ios/ et android/ dossiers.

Étape 8 — Construire des binaires prêts à l'emploi avec le Capgo Builder

Vous n'avez pas besoin d'un Mac ou d'un pipeline local Xcode/Android Studio pour expédier. Capgo Constructeur 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

Enregistrez vos clés de signature une fois. Utilisez nos outils gratuits si vous avez besoin d'aide pour les générer.

• Générateur de certificat iOS
• Générateur de clé de stockage Android
• Rechercheur d'ID de UDID iOS — inscrivez votre iPhone pour les builds de développement

Voir Gestion des informations de signature et Construire iOS à partir de 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 journaux de build s'affichent dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent être envoyés automatiquement vers TestFlight.

Installez sur un appareil réel :

• iOS : TestFlight (recommandé) ou une mise en production avec l'UDID de votre appareil enregistré
• Android : Google Play internal testing track ou une APK/AAB signée

✅ Réussite : Une mise en production signée est terminée et vous pouvez l'installer sur un appareil réel.

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

Si vous avez un Mac ou souhaitez tester un émulateur avant les builds cloud :

Pour iOS

Méthode 1 : Utilisation de Cursor AI (Recommandé)

Open the iOS project in Xcode

Méthode 2 : Commande manuelle

npx cap open ios

Première configuration de Xcode :

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

Pour Android

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Open the Android project in Android Studio

Méthode 2 : Commande manuelle

npx cap open android

Première configuration de l'Android Studio :

1. Install missing SDK packages if prompted
2. Créez un émulateur dans Gestionnaire de périphériques (par exemple, Pixel 6, API 33+)
3. Cliquez sur le bouton de lancement vert ▶️ — la première construction prend 5–15 minutes

Utilisez les IDE locaux pour le débogage quotidien. Utilisez Capgo Constructeur when you need signed release binaries.

✅ Success: L'application s'ouvre dans le simulateur ou l'émulateur montrant votre contenu Lovable.

Étape 10 — Activez le rechargement en direct (Développement)

Accélérez l'itération en pointant le shell natif vers votre serveur de développement local.

Méthode 1 : Utilisation de 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;

Utilisez le port 8080 ou 3000 Si c'est ce que vous souhaitez npm run dev Affiché.

3. Appliquer les modifications :

npx cap copy

✅ Succès : Édits à votre web code se rechargent automatiquement sur le dispositif ou l'émulateur.

É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 : Utilisation de 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 — ajoutez à ios/App/App/Info.plist Dans le niveau supérieur <dict>:

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

Android — ajoutez à l'intérieur <manifest> en 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;
}

Pour ajouter un plugin, il faut un une nouvelle construction native à travers Capgo Builder avant qu'il fonctionne sur les appareils.

✅ Réussite : La caméra code compile et npx cap sync se termine sans erreur.

Étape 12 — Ajoutez Capgo Mises à jour en direct

Tout changement natif passe normalement en revue par les éditeurs d'applications. Capgo Live Updates mettre à jour vos couches web d'application (HTML, CSS, JS, images) en quelques minutes.

Installez l'actualiseur dans votre première version. n'attendez jamais que la revue se termine lorsque vous devez envoyer une correction.

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;

Initialize in your app entry (e.g. src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commitez, envoyez et exécutez un nouveau Capgo Builder pour que l'SDK mette à jour soit dans le shell natif.

Télécharger les bundles web après le lancement :

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

Voir docs de mise à jour Capgo en direct.

To automate this upload every time someone clicks Publier suivez dans Lovable Automatiser les mises à jour Capgo en direct à partir de Lovable avec GitHub Actions.

✅ Réussi : L'extension de mise à jour est installée et notifyAppReady() exécuté à l'ouverture.

Étape 13 — Corrigez l'espace de la barre de statut avec un Live Update

Sur un iPhone réel, votre en-tête peut se trouver sous la barre d'état (heure et batterie). Le Capacitor moderne s'étend jusqu'aux bords, votre application doit donc respecter les insets de zone de sécurité: env(safe-area-inset-top), -bottom, -left, -right.

Beaucoup d'applications Lovable gèrent déjà l'inset inférieur mais utilisent une marge de haut fixe (comme pt-6sans l'inset de haut.

1. Confirmez viewport-fit=cover en index.html:

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

2. Fixez les en-têtes de haut — utilisez max() to keep web padding and grow on notched devices:

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

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

In Cursor ou Lovable, demandez :

“Le contenu de l'application s'exécute sous la barre d'état en haut sur mobile. Ajoutez env(safe-area-inset-top) à l'espacement de la tête de page en haut en utilisant max(), en gardant l'espacement existant comme minimum.”

3. Envoyez la correction par mise à jour sur air — c'est du CSS pur, pas de 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

Forcer la fermeture de l'application sur votre appareil, rouvrez-la, attendez ~15–30 secondes, et rouvrez-l’à nouveau. La tête de page devrait se trouver en dessous de la barre d'état — corrigée sans examen de la boutique.

✅ Réussite : Le contenu supérieur efface la barre d'état après l'application du bundle OTA.

Pour des travaux de mise en page plus profonds, consultez @capgo/tailwind-capacitor et Capacitor écran de bord à bord.

Étape 14 — Préparez votre liste de magasin

Votre application est construite, installable et vous pouvez envoyer des mises à jour instantanées. La mise en ligne des magasins publics est principalement du papier :

• App icon — 1024 × 1024 px pour iOS (sans transparence), 512 × 512 px pour Google Play
• Captures d'écran — Apple exige des captures d'écran iPhone 6.9” (1320 × 2868 px)
• Nom, sous-titre, description, mots-clés de l'application
• URL de la politique de confidentialité — exigé par les deux magasins, même pour les applications gratuites
• Évaluation d'âge — questionnaire dans chaque console
• Disclosures de collecte de données — Étiquettes de confidentialité Apple Nutrition et sécurité des données Google

Méthode 1 : Utilisation de 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 qui reste avant « en direct » :

1. Test fermé de Google Play (comptes personnels créés après le 13 novembre 2023) : au moins 12 testeurs pendant 14 jours consécutifs avant l'accès à la production. L'iOS n'a pas d'équivalent.
2. Soumettre à la revue — Apple ~3–5 jours, Google ~3–7 jours après que les exigences de test soient remplies.

Voir notre guide de revue d'application pour débutants pour la liste complète des étapes.

Erreurs courantes (et comment les corriger)

• Could not find the web assets directory: ./dist — Exécutez npm run build avant npx cap add or npx cap syncou webDir in capacitor.config.ts correspond à votre sortie de framework (dist pour Vite, out pour Next.js (export statique).
• “Cette ID d'application … n'est pas disponible” — Bundle IDs are globally unique. Pick a reverse-domain ID you control.
• La construction iOS fail après avoir changé l'ID de bundle — L'ID dans votre projet natif doit correspondre à Apple App Store Connect. Remplacez et recherchez à travers ios/ et android/, commit, rebuild.
• Écran blanc au lancement — Définissez base: './' dans la configuration Vite, rebuild, et exécutez npx cap sync.
• Contenu sous la barre de statut — Ajoutez viewport-fit=cover et env(safe-area-inset-top) marge (Étape 13).
• APK signé en mode debug — Google Play refuse les builds de débogage. Utilisez un build de production signé avec votre clé de stockage.
• Déploiement refusé — version déjà existante — Incrémentez la version/nombre de build dans les projets natifs et rebuild.

Pour les problèmes de Capgo Builder, voir Résolution des problèmes de build natif et Mises à jour en direct de débogage.

Conclusion

You took a Lovable web app to native iOS and Android — built in the cloud without a Mac, with a real camera feature and a layout fix shipped over the air. That’s the hard part done.

Étapes suivantes

• Capgo Mises à jour en direct — Ship UI and copy fixes without waiting on store review
• Capgo Constructeur — Automatiser les builds de version en CI
• Capgo Répertoire des plugins — Biométrie, notifications push, géolocalisation et plus
• Guides connexes : Base44 vers mobile · Bolt.new vers mobile

Inscrivez-vous à un compte Capgo gratuit to enable Live Updates and cloud native builds.

Ressources

• Documentation de Lovable
• Documentation de Capacitor
• Capgo Builds natifs
• Capgo — Live Updates for Capacitor Apps
• Construire iOS à partir de Windows
• Export statique Next.js pour mobile

Continuez de Convertir votre application Lovable en iOS et Android avec Capacitor

Si vous utilisez Convertir votre application Lovable en iOS et Android avec Capacitor pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin Capacitor Plugins by Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs, et Construire iOS à partir de Windows pour les builds iOS cloud sans Mac.