Convert Your Lovable App to iOS and Android with Capacitor

Introduction

Lovable est un éditeur d'applications basé sur l'IA 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, sur les écrans d'accueil comme toutes les autres applications natives ? Cet article guide à travers le chemin complet : exporter depuis Lovable, entourer l'application web de Capacitor

Lovable Capacitorconstruire des binaires iOS et Android signés dans le cloud avec Capgo Builder (pas de Mac nécessaire), ajoutez une véritable fonctionnalité native et envoyez une mise à jour de la disposition par voie aérienne avec Capgo Mises à jour en direct.

On utilise 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 exécutée sur un appareil réel (TestFlight, installation directe, ou Play internal testing)
• Une fonctionnalité de caméra fonctionnelle qui n'est 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 expédiés sans passer par la revue de l'App Store

Prérequis

— builds cloud et Mises à jour en direct

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 les Applications Amicales et les Cadres

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

Depuis longtemps, la valeur par défaut de Lovable était une application web unique (SPA) React + Vite. Depuis mai 2026, les nouvelles applications Lovable utilisent par défaut TanStack avec une mise en page côté serveur (SSR) par défaut. Le SSR est excellent pour le web, mais Capacitor enveloppe une construction statique — un dossier de HTML, CSS et JavaScript avec un index.html à son noyau — qui est embarqué 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 une 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 un dossier statique. dist/ Déjà sur TanStack Start (SSR) :
• Configurez-le pour pré-render ou pour obtenir une SPA statique. La seule exigence difficile est un dossier de build statique contenant Les anciens projets Lovable Next.js : index.html.
• Legacy Next.js Lovable projects: Utilisez l'exportation statique — la sortie va à out/ au lieu de dist/.

Quel que soit le framework que vous utilisez, pointez Capacitor sur ce dossier. Pour une SPA Vite, ce dossier est webDir Étape 1 — Exportez votre application aimable vers __CAPGO_KEEP_0__ dist.

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

Lovable keeps your code in its editor until you connect GitHub.

1. Cliquez
2. Mettre à jour (en haut à droite) si nécessaire, puis ouvrez Step 1 — Exportez votre application aimable vers __CAPGO_KEEP_0__ L'application 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 montre votre application code.

Étape 2 — Configurez le curseur 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é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 une expérience optimale, 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 $ par 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 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 les 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 la 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 Cursor AI (Recommandé)

1. Ouvrez la rubrique AI 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 et exécutera npm install, et démarrez ensuite 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 de 24 LTS à partir de nodejs.org
2. Exécutez l'installateur
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 ou http://localhost:5173 ou 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éussi : Votre application s'ouvre dans le navigateur avec son interface utilisateur fonctionnelle.

Étape 4 — Préparez la mise en production statique

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

React + Vite (les applications les plus aimables)

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

Confirmez 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

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 à la place de webDir: 'out' in Capacitor instead of dist.

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

Étape 5 — Ajoutez Capacitor et les plateformes natives

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

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

Appuyez Command+K ou Ctrl+K 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 identifiant de bundle (par exemple com.yourcompany.myapp).

Méthode 2 : Installation manuelle

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

Lorsqu'il vous est demandé :

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 remplacer à la recherche dans tous les 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

Configurer Capacitor

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

Demander à Cursor :

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

Pour l'exportation statique de Next.js, demandez-lui de l'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 maintenant à 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

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

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

Étape 6 — Vérifiez votre .gitignore

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

Confirmer :

• Racine .gitignore ignores node_modules et dist (le cloud rebranche dist dans les builds web)
• ios/ Et android/ se font pas ignorés Succès :

✅ montre git status Et ios/ prêts à s'engager (pas ignorés). android/ Étape 7 — S'engager et Pousser

Succès :

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

✅ Votre __CAPGO_KEEP_0__ repo montre les Your GitHub repo shows the ios/ context android/ répertoires.

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

Vous n'avez pas besoin d'un Mac ou d'une ligne de conduite locale 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

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
• Rechercheur d'ID de UDID iOS — inscrivez votre iPhone pour les builds de développement

Voir Authentification des identifiants 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 être envoyées automatiquement vers TestFlight.

Installer sur un appareil réel :

• iOS : TestFlight (recommandé) ou une construction de développement avec l’UDID de votre appareil enregistré
• Android : La piste d'essai interne de Google Play ou un APK/AAB signé

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

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

Si vous disposez d'un Mac ou souhaitez tester avec un émulateur avant les builds cloud :

Pour iOS

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

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 dans le menu déroulant des appareils (par exemple iPhone 15)
2. Pour les appareils réels : activez Gérer 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 Studio Android :

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 construction prend 5 à 15 minutes

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

✅ Réussite : L'application s'ouvre dans le simulateur ou l'émulateur en affichant votre contenu Lovable.

Étape 10 — Activer Live Reload (Développement)

Accélérer 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 (context : texte fragment HTML d'une chaîne de dialogue Capgo plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Voir dans : page alternatives.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Voir dans : page ionic-appflow.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Voir dans : page capwesome.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de conseil. Rôle : Sous-titre ou tagline de section. Voir dans : page consulting.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de conseil). | Page/zone : page de comparaison/migration d'Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Voir dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins ou). 3000 si c'est cela que npm run dev imprime.

3. Appliquer les modifications :

npx cap copy

✅ Succès : Les modifications apportées à votre application web code sont rechargées automatiquement sur le dispositif ou l'émulateur.

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

Un Capacitor plugin permet au JavaScript d'appeler des fonctionnalités de dispositif réel. 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 à 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 une nouvelle construction native à travers Capgo Builder avant qu'il fonctionne sur les appareils.

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

Étape 12 — Ajoutez les mises à jour en direct Capgo

Tout changement natif passe normalement par la revue des magasins d'applications. Capgo Mises à jour en direct context : Page/zone : Page de produit de mises à jour en direct. Rôle : Étiquette de navigation ou élément UI court. Vu dans : page live-update.astro. Préservez les termes de produit/marque et les termes de développeur exactement. Clé de message `live_update_hero_badge` (Badge de héros de mise à jour en direct).

envoyer des modifications à la couche web de votre application (HTML, CSS, JS, images) par voie aérienne en quelques minutes. Installez l'actualiseur dans votre première version

npm install @capgo/capacitor-updater
npx cap sync

de sorte que vous ne soyez jamais bloqué en attente de la revue lorsque vous devez envoyer une correction. 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;

Ajoutez à src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commit, push, and run a new Capgo Builder build so the updater SDK is in the native shell.

Commitez, envoyez et exécutez une nouvelle construction __CAPGO_KEEP_0__ Builder afin que l'actualiseur __CAPGO_KEEP_1__ soit dans le shell natif.

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

Téléchargez les ensembles de fichiers web après le lancement : Voir également : « Capgo Mises à jour en direct ».

Pour automatiser cet envoi à chaque fois que quelqu'un clique Publier suivre Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ Réussite : Le plugin de mise à jour est installé et notifyAppReady() exécute à l'ouverture.

Étape 13 — Corriger 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'aux bords, donc votre application doit respecter les espaces de sécurité d'encadrure Automate __CAPGO_KEEP_0__ Live Updates from Lovable with __CAPGO_KEEP_1__ Actions: env(safe-area-inset-top), -bottom, -left, -right.

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

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

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

2. Corriger les en-têtes supérieurs — utilisez max() pour conserver le padding 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-vous :

« Le contenu de l'application se trouve sous la barre d'état 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 gardant le padding existant comme minimum. »

3. Envoyez la correction par le biais de l'air — c'est du CSS pur, aucune reconstruction native n'est 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'application sur votre appareil, rouvrez-la, attendez ~15–30 secondes, et ouvrez-l’à nouveau. Le header devrait se trouver en dessous de la barre de statut — corrigé sans examen de la boutique.

✅ Réussite : 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, consultez @capgo/tailwind-capacitor et Capacitor edge-to-edge display.

une affichage écran écran à l'égard

Étape 14 — Préparez votre liste de la boutique

• Votre application est construite, installable, et vous pouvez envoyer des mises à jour instantanées. La mise en ligne dans les magasins publics est principalement du papier : icône d'application : 1024 x 1024 px pour iOS (sans transparence), 512 x 512 px pour Google Play
• Captures d'écran — Apple exige des captures d'écran iPhone 6.9“ (1320×2868px)
• Nom de l'application, sous-titre, description, mots-clés
• Lien URL de la politique de confidentialité — exigé par les deux magasins, même pour les applications gratuites
• Classement d'âge context : Page/zone : Page de solution exemple d'application. Rôle : Petit élément d'interface utilisateur ou élément de navigation. Vu dans : composant solutions/SolutionAppExample.astro. Clé de message `solution_app_examples_rating` (Classement des exemples d'applications).
• — questionnaire dans chaque console Disclosures de collecte de données

— étiquettes de nutrition de confidentialité Apple et Google de sécurité des données

Set up app icons and splash screens for my Capacitor app

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

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

What’s left avant « live » :

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. 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'applications pour les débutants pour la liste complète des vérifications.

Erreurs courantes (et comment les corriger)

• Could not find the web assets directory: ./dist — Exécuter npm run build avant npx cap add context : fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `create_an_issue_and_discuss_before_working_on_a_new_feature`). Page/zone : site Web de marketing Capgo. Rôle : Paragraphe de marketing ou juridique long. Vu dans : page contributing.astro. Clé de message `create_an_issue_and_discuss_before_working_on_a_new_feature` (Créer un problème et discuter avant de travailler sur un nouveau fonctionnement). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `mention_issue_before_working`). Page/zone : site Web de marketing Capgo. Rôle : Phrase de site Web. Vu dans : page contributing.astro. Clé de message `mention_issue_before_working` (Mentionner le problème avant de travailler). npx cap sync. Assurez-vous que webDir en capacitor.config.ts correspond à votre sortie de framework (dist pour Vite, out pour Next.js static export).
• “Cette ID d'application … n'est pas disponible” — Les IDs de bundle sont uniques à l'échelle mondiale. Choisissez un ID de domaine inversé que vous contrôlez.
• L'erreur de construction iOS se produit après avoir modifié 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/, commit, rebuild.
• Écran blanc lors du lancement — Définir base: './' dans la configuration Vite, reconstruire, et exécuter npx cap sync.
• Contenu sous la barre d'état — Ajouter viewport-fit=cover et env(safe-area-inset-top) marge (Étape 13).
• APK signé en mode debug — Google Play rejette les builds de débogage. Utilisez une build de production signée avec votre clé de stockage.
• Déploiement refusé — version déjà existante — Incrémentez la version/le numéro de build dans les projets natifs et reconstruirez.

Pour les problèmes de Capgo Builder, voir Résolution des problèmes de construction native et Mise à jour en temps réel pour la débogage.

Conclusion

Vous avez pris une application web Lovable vers iOS et Android natifs — construite dans le cloud sans Mac, avec une fonctionnalité de caméra réelle et une correction de mise en page envoyée par Wi-Fi. C'est la partie difficile faite.

Étapes suivantes

• Capgo Mise à jour en temps réel — Envoyez des correctifs de UI et de copie sans attendre la revue de la boutique
• Capgo Éditeur — Automatiser les builds de version dans CI
• Capgo Répertoire des plugins — Les biométriques, les notifications push, la géolocalisation et plus encore
• 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 Lovable
• Capacitor Documentation
• Capgo Builds Natives
• Capgo — Mises à jour en temps réel pour les applications Capacitor
• 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 Convertissez votre application chérie en iOS et Android avec Capacitor planifier le travail de plugin natif, le connecter avec Répertoire de plugins Capgo pour le flux de travail du produit dans le répertoire de plugin Capgo Capacitor Plugins by 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 constructions natives Capgo. Construire l'application iOS à partir de Windows pour les builds iOS dans le cloud sans Mac.