Base44 vers Applications Mobiles Natives avec Capacitor

Introduction

Base44 est un constructeur d'applications 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'est-ce que vous faites 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 CapacitorEnsuite, expédiez les fichiers binaires signés avec Capgo Constructeur aucune machine Mac n'est 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 du Temps

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

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 de Base44: Un plan de constructeur ou supérieur (pour l'export et le téléchargement ZIP GitHub)
• App Store iOS: 99 $ par an (Compte développeur Apple)
• Magasin Play Android: 25 $ une fois (Google Play Developer)
• Cursor Pro: 20€/mois (facultatif mais recommandé)

Logiciels requis:

• Node.js 18+
• A code editor such as Cursor

Pourquoi transformer votre application Base44 en application mobile ?

• Portée élargie: Rencontre les utilisateurs où ils attendent un icône d'application native, pas une fenêtre de navigateur
• Fonctionnalités natives: Camera, GPS, biometrics, and offline storage through Capacitor plugins
• Répartition de l'application 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 temps réel à Capgo avec Capgo 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 __CAPGO_KEEP_1__ ou un plan supérieur . Vous avez deux options principalesOption A : Exporter vers __CAPGO_KEEP_0__ (Recommandé)

Option A: Export to GitHub (Recommended)

1. Cliquez sur le
2. __CAPGO_KEEP_0__ GitHub Autorisez
3. Étape 2 : Exportez votre projet Base44 Éditeur Base44 et créez ou connectez un dépôt
4. 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

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

Ouvrir le Projet dans Cursor

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

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 — la même configuration décrite dans notre guide "De l'adorable à mobile" et installez Cursor.

Étape 2 : Configurer votre environnement de développement

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

En utilisant Cursor AI (Recommandé)

Appuyez sur Command+K ou Ctrl+K 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

Votre application Base44 devrait s'afficher à l'adresse http://localhost:5173 ou le port affiché dans la console.

Étape 3 : Préparer la mise en production

Capacitor nécessite des actifs web statiques. Les applications React de 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 qu'un dist/ dossier existe avec index.html et des actifs embarqués.

É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

Commit les ios/ et android/ les dossiers vers git. Capgo Builder compile ce qui se trouve dans ces répertoires.

É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

Considérez d'ajouter @capgo/capacitor-updater tôt afin de pouvoir envoyer des mises à jour OTA après le lancement. Voir les docs de mise à jour en temps réel de Capgo.

Étape 6 : Construire et Synchroniser

Chaque fois que vous modifiez l'application web :

npm run build
npx cap sync

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

Le test de simulateur est facultatif. Pour TestFlight, le test interne et la soumission dans l'App Store, utilisez le Capgo Builder pour compiler et signer des fichiers binaires natifs dans le cloud.

Pourquoi utiliser le Capgo Builder pour les applications Base44 ?

• Aucun Mac n'est requis 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
• S'associe aux Mises à jour en temps réel — corrigez l'interface utilisateur et la copie en ligne ; reconstruirez natif uniquement lorsque les plugins ou les autorisations changent

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 seule fois. 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.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 télécharger automatiquement vers TestFlight.

Téléchargez 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 souhaitez tester un émulateur avant les constructions cloud :

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

Utilisez les IDE locaux pour le débogage quotidien. Utilisez Capgo Builder lorsque 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 Constructeur Capgo construire avant la soumission de l'application.

É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 du backend Base44

Les applications Base44 exportées peuvent appeler le backend hébergé de Base44 et SDK. Cela fonctionne généralement en Capacitor à condition que :

• API utilise 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 la magie-lien ou les flux OAuth

Si vous migrez ultérieurement hors du backend de Base44, prévoyez de remplacer base44.entities.* et les appels liés SDK par 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 après chaque build web

Erreurs de build dans le Capgo Builder

• Commit ios/ et android/ avant de demander une build cloud
• Exécuter npx cap sync localement afin que les actifs web soient copiés dans les projets natifs
• Les nouveaux plugins Capacitor nécessitent une build native fraîche

L'exportation n'est pas disponible dans Base44

L'exportation GitHub et le téléchargement ZIP nécessitent le plan Builder ou un niveau supérieur Mettez à niveau dans Base44 ou copiez les fichiers manuellement depuis la vue __CAPGO_KEEP_0__ sur les niveaux inférieurs.Build errors in Code Builder

Conclusion

You exported a Base44 AI-generated React app, wrapped it with Capacitor, and have a clear path to signed iOS and Android binaries through Capgo Builder — sans maintenir une ferme locale Xcode.

Étapes suivantes

• Capgo Live Updates: Envoyez des correctifs de l'interface utilisateur et des copies sans attendre la revue de la boutique
• Capgo Builder: Automatisez les builds de version de sortie dans CI
• Notifications Push: Ajoutez @capacitor/push-notifications and rebuild with Capgo Builder
• Guides connexes: De l'adorable à mobile · Bolt.new pour 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 Base44
• Intégration Base44 GitHub
• Documentation Capacitor
• Constructions natives Capgo
• Capgo — Mises à jour en temps réel pour les applications Capacitor

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

Si vous utilisez Base44 to Native Mobile Apps with Capacitor planifier le travail du plugin natif, le connecter avec Répertoire de plugins Capgo pour le flux de travail du produit dans le répertoire de plugins 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 Capgo Builds natifs, et Construire une application iOS à partir de Windows Pour les builds iOS dans le cloud sans Mac.