Base44 vers Applications Mobiles Natives avec Capacitor

Introduction

Base44 est un constructeur d'applications basé sur l'intelligence artificielle qui génère des applications React complètes à partir de prompts. Vous pouvez déployer un produit fonctionnel dans le navigateur rapidement — mais qu'en est-il si vous souhaitez le rendre disponible sur iOS et Android ? Dans ce tutoriel, nous montrons comment exporter votre projet Base44 et le convertir en applications mobiles natives avec Capacitor, puis déployer des binaires de magasin signés avec Capgo Builder — pas besoin d'un Mac pour iOS.

À la fin de ce guide, votre application Base44 fonctionne de manière native 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 du 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 Builder
Pour les builds cloud Android: N'importe quel OS
Stockage: 10 Go de place libre pour les dépendances et les artefacts de build
Mémoire: 8 Go minimum

Coûts:

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

Logiciels requis:

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

Pourquoi transformer votre application Base44 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
Une itération plus rapide: Associez les mises à jour en direct Capgo avec l'éditeur Capgo pour les corrections de la couche web sans recompiler les binaires natifs à chaque fois

Étape 1 : Exportez votre projet Base44

Base44 vous permet d'exporter code dès que vous êtes sur la Plan de constructeur ou supérieur. Vous avez deux options principales.

Option A : Exporter vers GitHub (Recommandé)

Ouvrez votre application dans l'éditeur Base44
Cliquez sur le GitHub icône dans la barre de haut
Autoriser É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 Base44 GitHub documentation intégration pour plus de détails.

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

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

Ouvrez le projet dans Cursor

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

Démarrer Cursor

Pour un flux de travail assisté par l'IA optimal, activez votre modèle préféré et autorisez l'exécution de commandes dans les paramètres de Cursor — la même configuration décrite 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 charger à 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 à dist/.

Configurez Vite pour les appareils mobiles

Demandez à Cursor :

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

Ou mettez à jour vite.config.ts manuellement :

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

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

Testez la construction de production

npm run build

Vérifiez que dist/ un dossier existe avec index.html et des assets embarqués.

Sortie de construction Base44

Étape 4 : Ajoutez Capacitor à votre projet Base44

Utilisation de 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 les ios/ et android/ dossiers à git. Le constructeur Capgo compile ce qui se trouve dans ces dossiers.

Étape 5 : Configurez Capacitor

Mettre à 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

Considérez d'ajouter @capgo/capacitor-updater tôt pour pouvoir envoyer des mises à jour OTA après le lancement. Voir Capgo Mises à jour en direct docs.

Étape 6 : Construire et Synchroniser

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 à être mis en magasin avec Capgo Builder (Recommandé)

La testification du simulateur est facultative. Pour TestFlight, les tests internes et la soumission de magasin, utilisez Capgo Builder pour compiler et signer les binaires natifs dans le cloud.

Pourquoi Capgo Constructeur pour les applications Base44 ?

Pas de Mac nécessaire pour iOS — construire à partir de Windows ou Linux
Même CLI que votre agent IA 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 Constructeur

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 builds iOS peuvent télécharger automatiquement vers TestFlight.

Télécharger votre paquet 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 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

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

É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

Demander à Cursor de brancher Partager, Caméra ou Push dans vos composants React. Après avoir ajouté des plugins, exécutez une nouvelle Capgo Constructeur Effectuer la construction avant la soumission du magasin.

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

Étape 10 : Optimiser pour la production

Icons 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 relatives au serveur arrière Base44

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

Les appels API utilisent HTTPS
Les redirections d'authentification fonctionnent à l'intérieur de la vue WebView (tester la 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 du serveur arrière de Base44, prévoyez de remplacer base44.entities.* et les appels SDK liés avec votre propre API — la couche de l'interface utilisateur React se déplace généralement.

Résolution des problèmes courants

Écran blanc lors du lancement

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

Erreurs de build dans le Capgo Builder

Commiter ios/ et android/ To git avant de demander une mise en ligne sur Cloudflare
Exécuter npx cap sync Localement afin que les actifs web soient copiés dans les projets natifs
Nouveaux plugins Capacitor nécessitent une nouvelle mise à jour native

La mise en export n'est pas disponible dans Base44

GitHub export et téléchargement ZIP nécessitent le Plan Builder ou un niveau supérieurAugmentez votre plan en Base44 ou copiez 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 de Base44, l'avez enveloppée avec Capacitor, et avez un chemin clair vers des binaires iOS et Android signés à travers Capgo Builder — sans maintenir une ferme Xcode locale.

Étapes suivantes

Capgo Mises à jour en temps réel: Envoyez des correctifs de UI et de copie sans attendre la revue de l'application
Capgo Éditeur: Automatisez les builds de mise en production dans CI
Notifications Push: Ajoutez @capacitor/push-notifications et rebuild avec Capgo Éditeur
Guides connexes: Aimeriez-vous migrer vers mobile · Bolt.new vers mobile

Inscrivez-vous pour un compte gratuit de Capgo pour activer les mises à jour en temps réel et les builds natives dans le cloud.

Ressources

Continuez à partir de Base44 vers les applications mobiles natives avec Capacitor

Si vous utilisez Applications mobiles natives avec Capacitor pour planifier le travail de plugin natif, connectez-le avec Répertoire de plugin Capgo pour le flux de travail du 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 travail du produit dans les builds natifs Capgo, et Construire iOS à partir de Windows pour les builds iOS cloud sans Mac.

Base44 à Applications Mobiles Natives avec Capacitor