Base44 vers Applications Mobiles Natives avec Capacitor

Introduction

Base44 est un constructeur d'applications mobiles basé sur l'IA qui génère des applications React complètes à partir de prompts. Vous pouvez livrer un produit fonctionnel dans le navigateur rapidement — mais qu'en est-il si vous voulez le mettre sur iOS et Android ? Dans ce tutoriel, nous montrons comment exporter votre projet Base44 et le transformer en applications mobiles natives avec Capacitor, puis expédiez des binaires de magasin signés Capgo Constructeur — pas de Mac nécessaire pour iOS.

À la fin de ce guide, votre application Base44 fonctionne nativement sur iOS et Android avec accès aux fonctionnalités de l'appareil comme la caméra, le stockage et les notifications push.

Prérequis & Estimation de temps

Temps requis: 2-4 heures pour la première installation

Exigences du système:

Pour les builds cloud iOS: N'importe quel OS (Windows, Mac ou Linux) avec Capgo Constructeur
Pour les builds cloud Android: N'importe quel OS
Stockage: 10 Go de stockage gratuit pour les dépendances et les artefacts de construction
RAM: 8 Go minimum

Coûts:

Export Base44: Plan Builder ou supérieur (pour l'export GitHub et le téléchargement ZIP)
App Store iOS: 99 $ par an (Compte développeur Apple)
Google Play Store Android: 25 $ une fois (Compte développeur Google Play)
Cursor Pro: 20$/mois (facultatif mais recommandé)

Logiciels requis:

Node.js 18+
Un éditeur tel que code Cursor

Pourquoi transformer votre Base44 App en application mobile ?

Une portée accrue: Rencontre les utilisateurs où ils attendent un icône d'application native, pas une fenêtre de navigateur
Fonctionnalités natives: Caméra, GPS, biométrie et stockage hors ligne grâce aux plugins Capacitor
Distribution sur l'App Store: Publiez sur Google Play et sur l'App Store d'Apple
Mise en œuvre accélérée: Associez les mises à jour en temps réel Capgo avec Capgo Builder pour les corrections de la couche web sans devoir reconstruire les binaires natifs à chaque fois

Étape 1 : Exportez votre projet Base44

Base44 vous permet d'exporter code dès que vous êtes sur le plan Builder ou un plan supérieur Vous avez deux options principalesOption A : Exporter vers __CAPGO_KEEP_0__ (Recommandé)

Option A: Export to GitHub (Recommended)

Cliquez sur l'icône __CAPGO_KEEP_0__ dans la barre de titre
Autorisez GitHub __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ Éditeur Base44 et créez ou connectez un dépôt
Base44 synchronise automatiquement votre application code avec GitHub (synchronisation bidirectionnelle sur les plans pris en charge)

Voir Documentation d'intégration Base44 GitHub pour plus de détails.

Option B : Télécharger sous forme de ZIP

Cliquez Code dans la barre de navigation supérieure pour ouvrir le navigateur de fichiers
Cliquez Exporter le projet sous forme de ZIP en haut à droite de la vue code
Extraire l'archive sur votre ordinateur

Ouvrir le Projet dans Cursor

Visitez cursor.sh et installez Cursor
Cloner votre GitHub repo (Git: Clone à partir de la palette de commandes) ou ouvrir le dossier ZIP extrait avec Dossier > Ouvrir dossier

Démarrer Cursor

Pour le meilleur flux de travail assisté par l'IA, activez votre modèle préféré et autorisez l'exécution de commandes dans les paramètres de Cursor — le même paramétrage décrit dans notre guide de passage de Lovable à mobile.

Étape 2 : Configurez votre environnement de développement

Base44 exporte un projet React standard. Installez les dépendances et confirmez que le serveur de développement fonctionne.

Utiliser Cursor AI (Recommandé)

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

Install Node.js if needed, install project dependencies, and start the dev server

Configuration manuelle

cd your-base44-project
npm install
npm run dev

L'application Base44 fonctionne localement

Votre application Base44 doit s'ouvrir à http://localhost:5173 (Vite) ou le port affiché dans la console.

Étape 3 : Préparez la mise en production

Capacitor nécessite des actifs web statiques. Les applications React Base44 utilisent généralement Vite et génèrent des fichiers dans dist/.

Configure Vite pour Mobile

Demander à Cursor :

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

Ou mettre à jour vite.config.ts manuellement :

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

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

Tester la Build de Production

npm run build

Vérifier un dist/ dossier existe avec index.html et des actifs embarqués.

Sortie de build Base44

Étape 4 : Ajouter Capacitor à votre projet Base44

En utilisant Cursor AI (Recommandé)

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

Installation manuelle

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Initialisation de Capacitor pour une application Base44

Commitez ios/ et android/ dossiers à git. Capgo Builder compile ce qui se trouve dans ces dossiers.

Étape 5 : Configurez Capacitor

Mise à jour capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

Pensez à ajouter @capgo/capacitor-updater tôt afin de pouvoir envoyer des mises à jour OTA après le lancement. Consultez Capgo Live Updates docs.

Étape 6 : Construisez et Synchronez

Chaque fois que vous modifiez l'application web :

npm run build
npx cap sync

Capacitor synchronisation complète pour une application Base44

Étape 7 : Construire des fichiers binaires prêts pour le magasin avec Capgo Builder (Recommandé)

Le test du simulateur est facultatif. Pour TestFlight, le test interne et la soumission au magasin, utilisez Capgo Builder pour compiler et signer des binaires natifs dans le cloud.

Pourquoi Capgo Builder pour les applications Base44 ?

Pas de Mac nécessaire pour iOS — construire à partir de Windows ou Linux
Même CLI que votre agent AI peut exécuter — convient aux workflows de codage vibe de Base44 → GitHub → Cursor
Compatibilité avec les mises à jour en temps réel — corriger l'interface utilisateur et copier à distance ; reconstruire natif uniquement lorsque les plugins ou les autorisations changent

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

Enregistrer les informations de signature une fois. Consultez 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.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Les journaux de construction s'affichent dans votre terminal. Avec App Store Connect configuré, les constructions iOS peuvent envoyer automatiquement vers TestFlight.

Télécharger votre bundle web pour les mises à jour OTA :

npx @capgo/cli@latest bundle upload --channel production

Étape 8 : Facultatif — Tester localement dans Xcode ou Android Studio

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode ouvrant un projet Base44 Capacitor

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

Étape 9 : Ajouter des fonctionnalités natives

Améliorez votre application Base44 avec les capacités du dispositif :

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Demandez à Cursor de brancher Partager, Caméra ou Push dans vos composants React. Après avoir ajouté des plugins, exécutez un nouveau Capgo Constructeur Construction avant soumission au magasin.

Fonctionnalités natives ajoutées à une application Base44 Capacitor

Étape 10 : Optimiser pour la production

Icônes d'application et écrans de splash

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

Considérations de l'arrière-plan Base44

Les applications Base44 exportées peuvent appeler l'arrière-plan hébergé de Base44 et SDK. Cela fonctionne généralement dans Capacitor à condition que :

API appelle HTTPS
Les redirections d'authentification fonctionnent à l'intérieur de la vue WebView (test de connexion sur un appareil réel)
Les liens profonds sont configurés si vous utilisez des flux de lien magique ou OAuth

Si vous migrez ultérieurement vers un backend autre que celui de Base44, prévoyez de remplacer base44.entities.* et les appels SDK liés avec vos propres API — la couche de l'interface utilisateur React est généralement conservée.

Résolution des problèmes courants

Écran blanc au lancement

Confirmer base: './' est défini dans la configuration Vite
Exécuter npm run build et vérifiez que dist/index.html charge les assets avec des chemins relatifs
Exécuter npx cap sync After chaque build web

Les erreurs de build dans Capgo Builder

Commiter ios/ et android/ avant de demander un build cloud, verser dans git
Exécuter npx cap sync localement afin que les actifs web soient copiés dans les projets natifs
Les nouveaux plugins Capacitor nécessitent un build natif frais

L'export n'est pas disponible dans Base44

GitHub export et téléchargement ZIP nécessitent le plan Builder ou un niveau supérieurAugmenter dans Base44 ou copier les fichiers manuellement depuis la vue Code sur les niveaux inférieurs.

Conclusion

Vous avez exporté une application React générée par l'IA Base44, l'avez enveloppée avec Capacitor, et avez un chemin clair vers des fichiers binaires iOS et Android signés sans avoir à maintenir une ferme locale Xcode. Capgo Builder — sans maintenir une ferme locale Xcode.

Étapes suivantes

Capgo Live Updates: Envoyez des correctifs de UI et de copie sans attendre la revue de la boutique
Capgo Builder: Automatisez les builds de version dans CI
Notifications Push: Ajoutez @capacitor/push-notifications et rebuild avec Capgo Builder
Guides connexes: Amour pour le mobile · Bolt.new pour le mobile

Inscrivez-vous pour un compte gratuit Capgo pour activer les mises à jour en temps réel et les builds natifs du cloud.

Ressources

Continuez de Base44 aux applications mobiles natives avec Capacitor

Si vous utilisez Base44 pour Applications Mobiles Natives avec Capacitor pour planifier le travail de plugin natif, connectez-le avec Capgo Répertoire de Plugin pour le flux de travail du produit dans Capgo Répertoire de Plugin, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Capgo Constructions Natives pour le flux de travail du produit dans Capgo Constructions Natives, et Construire iOS à partir de Windows pour les builds iOS cloud sans Mac.

Base44 à Applications Mobiles Natives avec Capacitor