Convert Your Lovable App to iOS and Android with Capacitor

API

SDK CLI

npm','bun','texts',['Tutorial','Juin 26, 2026','Convertissez votre application chérie en iOS et Android avec __CAPGO_KEEP_0__','Étape par étape pour exporter votre projet Lovable, enveloppez-le avec __CAPGO_KEEP_0__, construisez des applications iOS et Android signées dans le cloud avec __CAPGO_KEEP_1__ Builder, et expédiez des correctifs par voie aérienne.','Martin Donadieu','Martin Donadieu','Spécialiste du contenu marketing','Convertissez votre application chérie en iOS et Android avec __CAPGO_KEEP_0__','Introduction','Lovable','est un éditeur d'applications AI qui transforme les prompts en applications React fonctionnelles en quelques minutes. Vous pouvez livrer dans le navigateur rapidement — mais qu'est-ce que vous feriez si vous voulez votre application sur l'App Store et Google Play, assise sur les écrans d'accueil comme chaque autre application native ?','Cette guide vous accompagne tout au long du chemin : exportation depuis Lovable, enveloppement de l'application web avec __CAPGO_KEEP_0__'] Capacitorconstruire des binaires iOS et Android signés dans le cloud avec Capgo Builder (aucun Mac n'est nécessaire), ajoutez une fonctionnalité native réelle et corrigez un problème de mise en page en temps réel avec Capgo Mises à jour en temps réel.

Nous utilisons Cursor à travers tout — son IA peut exécuter la plupart des commandes de 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 dans le cloud.

Au final, vous obtiendrez :

• Une application native iOS et Android construite à partir du cloud — sans Xcode ou Android Studio sur la voie principale
• L'application exécutée sur un appareil réel (TestFlight, installation directe ou Play internal testing)
• Une fonctionnalité de caméra fonctionnelle qui ne peut être offerte que par une application native
• Mises à jour en temps réel configurées pour que les correctifs de l'interface utilisateur et du CSS soient envoyés sans passer par la revue de l'App Store

Prérequis

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 eux.

Une Note Rapide sur les Frameworks et les Projets Chers

Avant de toucher code, sachez que le type d'application web que Lovable génère affecte l'enveloppement mobile.

Depuis longtemps, la valeur par défaut de Lovable était une application web unique (SPA) React + ViteÀ partir de mai 2026, les nouvelles applications Lovable utilisent par défaut TanStack avec le rendu côté serveur (SSR) le SSR est excellent pour le web, mais Capacitor enveloppe une construction statique — un dossier de fichiers HTML, CSS et JavaScript avec un index.html à sa racine — qui est embarquée dans l'application sur le dispositif.

Une application SSR attend un serveur pour rendre 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 sortie statique, rendue par le client.

Que faire :

• Démarrer frais : Demandez à Lovable un application unique-page (SPA) ou pour sauter SSR afin d'obtenir une sortie statique dist/ dossier.
• Déjà sur TanStack Start (SSR) : Configurez-le pour pré-render ou pour obtenir une sortie statique SPA. La seule exigence difficile est un dossier de build statique contenant index.html.
• Projets Lovable Next.js Legacy : Utilisez exportation statique — la sortie va à 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 application chérie 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 Mettez à jour (en haut à droite) si nécessaire, puis ouvrez Git dans le menu de gauche
3. Choisissez GitHubAutoriser Lovable et lier votre compte
4. Lovable crée un dépôt et pousse automatiquement votre application

✅ Succès: Visite réussie github.com/YOUR-USERNAME/your-app affichez l'application code.

Étape 2 — Configurez le curseur et clonez votre projet

Avant de pouvoir travailler avec votre code localement, vous aurez besoin d'un code éditeur. Nous recommandons Cursor, un éditeur alimenté par l'intelligence artificielle qui peut exécuter des commandes de terminal pour vous.

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

Configureur de curseur pour le développement AI

Pour la meilleure expérience, configurez le curseur avant de commencer :

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

3. Activer les modèles AI — Assurez-vous que les fonctionnalités AI soient activées :

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

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 (Mac) ou Shift+Ctrl+P (Windows) pour ouvrir le palette de commandes
2. Tapez « clone » et sélectionnez Git : Cloner“
3. Collez votre GitHub URL de dépôt : https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Choisissez un dossier où vous souhaitez sauvegarder le projet

5. Cursor clonera et ouvrira votre projet

Étape 3 — Installer les dépendances et exécuter localement

Méthode 1 : Utiliser l'interface de Cursor AI (Recommandé)

1. Ouvrez la boîte à outils AI de Cursor 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

Le logiciel AI détectera automatiquement votre système d'exploitation, installera Node.js et exécutera npm install, et démarrez le serveur de développement 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 l'installateur 24 LTS de Node.js depuis nodejs.org
2. Run the installer
3. Ouvrez un terminal et exécutez :

cd your-lovable-app
npm install
npm run dev

Les applications Lovable fonctionnent généralement sur http://localhost:8080 ou http://localhost:5173 — utilisez l'adresse que votre terminal imprime.

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

✅ Réussi : Votre application s'ouvre dans le navigateur avec son interface utilisateur fonctionnelle.

Étape 4 — Préparez la production statique

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

React + Vite (les applications les plus aimées)

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

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 Convertir votre application Next.js en mobile pour la configuration complète, puis utilisez next.config dans __CAPGO_KEEP_0__ au lieu de webDir: 'out' in Capacitor instead of dist.

✅ Un dossier de build statique existe ( oudist/ ) out/Un dossier de build statique existe (ou) index.html.

Étape 5 — Ajoutez Capacitor et les plateformes natives

Capacitor enveloppe votre application web dans des coquilles iOS et Android réelles — aucune reécriture n'est nécessaire.

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

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 d'application et ID de bundle (par exemple, com.yourcompany.myapp).

Méthode 2 : Installation manuelle

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

Lorsque vous êtes invité(e) :

Sélectionnez un ID de package que vous possédez réellement. Les IDs de bundle sont uniques à l'échelle mondiale. Utilisez un ID inversé basé sur un domaine que vous contrôlez dès le début — changer cela plus tard signifie trouver et remplacer partout et reconstruire. ios/ et android/ et

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

Configurez Capacitor

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

Demandez à Cursor :

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

Pour l'exportation 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;

Build et Sync

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 maintenant à :

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

Aucune CocoaPods nécessaire. Capacitor utilise 8 le gestionnaire de packages Swift pour les dépendances iOS automatiquement.

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

Étape 6 — Vérifiez votre .gitignore

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

Confirmer :

• Racine .gitignore ignorés node_modules et dist (le cloud rebranche dist durant les builds web)
• ios/ And android/ se sont elles-mêmes non ignorés

✅ Réussite : git status montre ios/ et android/ prêt à commiter (pas ignoré).

Étape 7 — Commiter 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 fichiers binaires prêts à l'expédition avec le Capgo Builder

Vous n'avez pas besoin d'un Mac ou d'un pipeline local Xcode/Android Studio pour expédier. Capgo Builder le __CAPGO_KEEP_0__ Builder compile, signe et peut soumettre des builds iOS et Android depuis le cloud.

Configurer le 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

Enregistrer les informations 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 — inscrire votre iPhone pour les builds de développement

Voir Gestion des identifiants et Construire iOS à partir de Windows.

Demander une 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 se téléverser automatiquement vers TestFlight.

Installer sur un appareil réel :

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

✅ Réussi : Une build 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 une mise en œuvre d'é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 Manuel

npx cap open ios

Configuration Xcode pour la première fois :

1. Sélectionnez un simulateur à partir du menu déroulant des appareils (par exemple iPhone 15)
2. Pour les appareils réels : activez Gérez automatiquement la signature et sélectionnez votre équipe de développeur Apple
3. Cliquez sur le bouton ▶️ Play — la première build 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 Android Studio :

1. Installez les packages manquants SDK si demandé
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 — première construction prend 5-15 minutes

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

✅ Succès : L'application s'ouvre dans le simulateur ou l'émulateur montrant votre contenu aimé.

Étape 10 — Activez Live Reload (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. Mettre à 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 If cela est ce que vous voulez npm run dev imprime.

3. Appliquer les modifications :

npx cap copy

✅ Réussi : Les modifications de votre web code se rechargent automatiquement sur le dispositif ou l'émulateur.

Étape 11 — Ajouter une fonctionnalité native : La Caméra

Un Capacitor plugin permet à JavaScript d'appeler des fonctionnalités de dispositif réelles. Nous allons ajouter le plugin Caméra afin que les utilisateurs puissent prendre une photo — quelque chose qu'une fenêtre de navigateur ne peut pas faire de manière fiable.

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 à l'intérieur du 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;
}

L'ajout d'un plugin nécessite un nouveau build natif à travers Capgo Builder avant qu'il fonctionne sur les appareils.

✅ Succès : La caméra code compile et npx cap sync se termine sans erreur.

Étape 12 — Ajoutez les mises à jour en temps réel Capgo

Tout changement natif passe normalement par la revue de l'App Store. Capgo Mises à jour en temps réel Les mises à jour en temps réel __CAPGO_KEEP_0__ transmettent des modifications à votre couche web de l'application (HTML, CSS, JS, images) en quelques minutes.

Installez le correcteur dans votre première version Ainsi, vous ne serez jamais bloqué en attente de la revue 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;

Initialisez dans votre entrée d'application (par exemple, src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commitez, envoyez et exécutez une nouvelle build du constructeur Capgo Builder afin que le correcteur SDK soit dans le shell natif.

Téléchargez les ensembles web après le lancement :

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

Voir Capgo Mises à jour en temps réel docs.

✅ Réussi: Le plugin de mise à jour est installé et notifyAppReady() s'exécute au démarrage.

Étape 13 — Fixer l'espace de la barre d'état avec une mise à jour en temps réel.

Sur un iPhone réel, votre en-tête peut se trouver sous la barre d'état (heure et batterie). Modern Capacitor dessine jusqu'à la marge égale, donc votre application doit respecter les espaces de sécurité des insets: env(safe-area-inset-top), -bottom, -left, -right.

Beaucoup d'applications Lovable gèrent déjà l'inset inférieur mais utilisent un padding supérieur fixe (comme pt-6) sans l'inset supérieur.

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

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

2. Corrigez les en-têtes supérieurs — utilisez max() pour conserver l'espacement web et faire grandir sur les appareils notchés :

/* 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'application s'exécute sous la barre d'état en haut sur mobile. Ajoutez env(safe-area-inset-top) à l'espacement supérieur de chaque en-tête de page en utilisant max(), en gardant l'espacement existant comme minimum.”

3. Faites passer la correction par OTA — 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-la à nouveau. L'en-tête devrait se trouver en dessous de la barre d'état — corrigé sans examen de l'App Store.

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

Pour des travaux de mise en page plus approfondis, voir @capgo/tailwind-capacitor et Capacitor affichage 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 sur les magasins publics est principalement du papier :

• Icône d'application — 1024×1024px pour iOS (sans transparence), 512×512px pour Google Play
• Captures d'écran — Apple exige des captures d'écran iPhone 6.9“ (1320×2868px)
• Nom, sous-titre, description, mots-clés de l'application
• URL de la politique de confidentialité — requis pour les deux magasins, même pour les applications gratuites
• Classement d'âge — questionnaire dans chaque console
• Désignation de la collecte de données — étiquettes de nutrition de la vie privée d'Apple et de la sécurité des données de Google

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

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

Qu'est-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 les débutants pour la liste complète.

Erreurs courantes (et comment les corriger)

• Could not find the web assets directory: ./dist — Exécutez npm run build avant npx cap add ou npx cap syncAssurez-vous que webDir correspond à votre sortie de framework ( capacitor.config.ts pour Vite,dist __CAPGO_KEEP_0__ out pour l'export statique de Next.js).
• — L'ID de l'application … n'est pas disponible. — Les identifiants de bundle sont uniques à l'échelle mondiale. Choisissez un ID inversé dans un domaine que vous contrôlez.
• La construction iOS échoue après avoir changé l'ID de bundle. — L'ID dans votre projet natif doit correspondre à Apple App Store Connect. Effectuez une recherche et remplacez partout. ios/ et android/, commitez, reconstruisez.
• Écran blanc au lancement. — Définissez base: './' dans la configuration Vite, reconstruisez et exécutez. npx cap sync.
• Le contenu sous la barre de statut. — Ajoutez viewport-fit=cover et env(safe-area-inset-top) la mise en page (Étape 13).
• APK signée en mode debug — Google Play rejette les builds de débogage. Utilisez un build de production signé avec votre clé de stockage.
• La mise en production a été rejetée — la version existe déjà. — Incrémentez la version/nombre de build dans les projets natifs et rebuild.

Pour les problèmes de Capgo Builder, voir Le dépannage de la construction native et La débogage des mises à jour en direct.

Conclusion

Vous avez transformé une application web aimable en native iOS et Android — construite dans le cloud sans Mac, avec une fonctionnalité de caméra réelle et une correction de mise en page déployée en ligne.

Étapes suivantes

• Capgo Mises à jour en direct — Envoyez des mises à jour de l'interface utilisateur et des correctifs de copie sans attendre la revue de l'application
• Capgo Constructeur — Automatisez les builds de version de sortie dans CI
• Capgo Répertoire de plugins — Biométrie, notifications push, géolocalisation et plus
• Guides connexes : Base44 vers mobile · Bolt.new vers mobile

Inscrivez-vous à un compte Capgo gratuit pour activer les Mises à jour en direct et les builds cloud natifs.

Ressources

• Documentation aimable
• Capacitor Documentation
• Capgo Bâtisse Native
• Capgo — Mises à jour en temps réel pour les applications Capacitor
• Construire iOS à partir de Windows
• Export statique Next.js pour mobile

Continuez à partir de Convertir votre application aimable en iOS et Android avec Capacitor

Si vous utilisez Convertir votre application aimable en iOS et Android avec Capacitor pour planifier le travail de plugin natif, connectez-le avec Capgo Répertoire de plugin pour le flux de produit dans le répertoire de plugin Capgo les plugins Capacitor par Capgo pour les détails d'implémentation dans les plugins Capacitor par Capgo, les builds natifs Capgo pour le flux de produit dans les builds natifs Capgo, et Construire iOS à partir de Windows pour les builds iOS cloud sans Mac.