Convertez votre application chérie en iOS et Android avec Capacitor

Introduction

Lovable est un éditeur d'applications AI qui transforme les suggestions en applications React fonctionnelles en quelques minutes. Vous pouvez déployer rapidement dans le navigateur — mais qu'est-ce que vous faites si vous voulez votre application sur l'App Store et Google Play, installée sur les écrans d'accueil comme toutes les autres applications natives ?

Cette guide vous guide tout au long du chemin : exporter de Lovable, entourer l'application web de Capacitor, construire des binaires iOS et Android signés dans le cloud avec __CAPGO_KEEP_1__ Builder et les envoyer sur les stores. Capgo Constructeur (pas de Mac nécessaire), ajoutez une vraie fonction native, et envoyez une correction de mise en page par voie aérienne avec Capgo Mises à jour en temps réel.

Nous utilisons Cursor à travers — 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 cloud.

À la fin, vous obtiendrez :

• Une application iOS et Android native 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)
• 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'application

Prérequis

Coûts (seulement pour publier publiquement):

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 Aimables

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 peuvent utiliser TanStack avec le rendu côté serveur (SSR) par défaut Le SSR est excellent pour le web, mais Capacitor enveloppe une construction statique — un dossier contenant HTML, CSS et JavaScript avec un index.html à sa racine — qui est envoyé à l'intérieur de l'application sur le dispositif.

Une application SSR s'attend à ce qu'un 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 sortie statique, rendu client.

Qu'est-ce à faire :

• Démarrer depuis zéro : Demandez à Lovable un application unique-page (SPA) ou pour sauter la 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 export statique — les résultats sont envoyés à 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 Mettre à jour (en haut à droite) si nécessaire, puis ouvrez Git dans le menu de gauche
3. Sélectionnez GitHub, autorisez 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 affiche votre application code.

Étape 2 — Configurez Cursor et clonez votre projet

Avant de pouvoir travailler avec votre code localement, vous aurez besoin d'un éditeur code. Nous recommandons Cursor, un éditeur alimenté par l'intelligence artificielle qui peut 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. Installer Cursor en suivant le guide d'installation
3. Une fois installé, ouvrez Cursor

Configurer Cursor pour le développement AI

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

1. Achetez un Plan de Cursor — Même si Cursor offre un niveau gratuit, un plan Pro (20 $/mois) vous donne accès à des compléments AI illimités, à Claude et GPT-4, ainsi qu'à 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 AI — Assurez-vous que les fonctionnalités AI soient activées :

4. Choisissez votre Modèle Préféré — Choisissez Claude ou GPT-4 pour les meilleurs résultats :

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

Cloner votre référentiel 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. Typisez « clone » et sélectionnez Git : Cloner
3. Collez votre URL de référentiel GitHub : https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Sélectionnez un dossier où vous souhaitez sauvegarder le projet

5. Le curseur clonera et ouvrira votre projet

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

Méthode 1 : Utiliser le curseur AI (Recommandé)

1. Ouvrir la rubrique AI du curseur en appuyant sur Command+K (Mac) ou Ctrl+K (Windows)
2. Taper 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 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. Exécutez l'installateur
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 production avant d'ajouter des plateformes natives.

React + Vite (la plupart des applications Lovable)

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

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 WebView 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 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/ ) avec out/Étape 5 — Ajoutez __CAPGO_KEEP_0__ et les plateformes natives index.html.

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

Capacitor

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

Appuyez 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, __CAPGO_KEEP_0__ initialisation com.yourcompany.myapp).

Lorsque vous êtes invité :

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

When prompted :

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

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'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 : Utiliser 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

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

✅ Réussi : ios/ et android/ dossiers apparaissent et la console montre Sync finished.

Étape 6 — Vérifiez votre projet .gitignore

Capgo Le constructeur compile à partir de votre référentiel Git, donc ios/ et android/ doivent être commités. Une erreur fréquente est d'ignorer ces fichiers à la racine du référentiel.

Confirmer :

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

✅ 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 Binaires Prêts à la Boutique avec Capgo Builder

Vous n'avez pas besoin d'un Mac ou d'un pipeline local Xcode/Android Studio pour déployer. Capgo Builder compiles, signs, and can submit iOS and Android builds from the 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 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
• Trouvez l'ID de votre iPhone pour les builds de développement — inscrivez votre iPhone pour les builds de développement

Voir Gestion des informations de signature et Construire iOS à partir de Windows.

Demander une construction 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 construction s'affichent dans votre terminal. Avec App Store Connect configuré, les constructions iOS peuvent télécharger automatiquement sur TestFlight.

Installer sur un appareil réel :

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

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

Étape 9 — Optionnel : Tester Localement dans Xcode ou Android Studio

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

Pour iOS

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

Open the iOS project in Xcode

Méthode 2 : Commande manuelle

npx cap open ios

Configuration de Xcode pour la première fois :

1. Sélectionnez un simulateur dans le 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 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 Android Studio :

1. Installez les packages manquants SDK si vous êtes invité
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 compilation prend 5-15 minutes

Utilisez les IDE locaux pour le débogage quotidien. Utilisez Capgo Builder lorsque vous avez besoin de fichiers de version de sortie signés.

✅ Succès : L'application s'ouvre dans le simulateur ou l'emulateur 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 si c'est ce qui npm run dev imprime.

3. Apply changes:

npx cap copy

✅ Success: 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 réelles du dispositif. Nous allons ajouter le plugin de la Caméra afin que les utilisateurs puissent prendre une photo — 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-le à 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 Capgo Mises à jour en direct

Tout changement natif passe normalement par la revue de l'application. Capgo Live Updates Mettez à jour vos modifications dans la couche web de votre application (HTML, CSS, JS, images) en quelques minutes.

Installez le metteur à jour 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 construction de Capgo Builder afin que le metteur à jour SDK soit dans le shell natif.

Chargement de bundles web après lancement :

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

Voir Documentation des mises à jour en direct de Capgo.

✅ Réussi : Le plugin de metteur à jour est installé et notifyAppReady() s'exécute à l'arrêt.

Étape 13 — Fixer l'espace de la barre de statut avec une mise à jour en direct

Sur un iPhone réel, votre en-tête peut se trouver sous la barre de statut (heure et batterie). Les applications modernes Capacitor dessinent jusqu'à la marge, donc votre application doit 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 un padding supérieur fixe (comme pt-6) sans l'inset supérieur.

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

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

2. Fixer les en-têtes supérieurs — utiliser max() pour conserver l'espacement web et faire grandir sur les appareils à notches :

/* 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 de statut en haut sur les appareils mobiles. Ajoutez env(safe-area-inset-top) à l'espacement en haut de chaque en-tête de page en utilisant max(), en gardant l'espacement existant comme minimum.”

3. Envoyez la correction par le biais de l'air — c'est pure CSS, 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 de statut — corrigé sans examen de l'application.

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

Pour des travaux de mise en page plus approfondis, voir @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. Mettre en ligne 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é — requise par les deux magasins, même pour les applications gratuites
• Notation d'âge — questionnaire dans chaque console
• Disclosures sur la 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 de Google Play fermé (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 pour examen — Apple ~3–5 jours, Google ~3–7 jours après que les exigences de test sont remplies.

Voir notre guide de revue d'applications pour 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 sync. Assurez-vous que webDir dans capacitor.config.ts correspond à votre sortie de framework (dist pour Vite, out pour l'exportation statique de Next.js).
• “Cette ID d'application … n'est pas disponible” — Les identifiants de bundle sont uniques dans le monde. Choisissez un ID de domaine inversé que vous contrôlez.
• L'erreur de construction iOS se produit après avoir changé l'ID de bundle — L'ID dans votre projet natif doit correspondre à Apple App Store Connect. Remplacez à la recherche dans tout ios/ et android/, commit, rebuild.
• Écran blanc au lancement — Définir base: './' dans la configuration Vite, rebuild, et exécuter npx cap sync.
• Contenu sous la barre de statut — Ajouter viewport-fit=cover et env(safe-area-inset-top) décalage (É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 Dépannage de la construction native et 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 disposition déployée en ligne aérienne. C'est la partie difficile qui est faite.

Étapes suivantes

• Capgo Mises à jour en direct — Corrigez les UI et les copies sans attendre la revue de l'application
• Capgo Constructeur — Automatisez les builds de version en 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 pour un compte gratuit Capgo pour activer les mises à jour en temps réel et les builds natives dans le cloud.

Ressources

• Documentation aimable
• Capacitor Documentation
• Capgo Builds natifs
• 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 chérie en iOS et Android avec Capacitor

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