Base44 en 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'en est-il de l'envoi sur iOS et Android ? Dans ce guide, nous montrons comment exporter votre projet Base44 et le transformer en applications mobiles natives avec Capgo CapacitorEnsuite, expédiez les binaires de magasin signés avec Capgo Constructeur Note sur les informations d'identification d'Appflow

Construction native

Étiquette de badge Hero de la construction native V2

Flux de partage de construction de la construction native V2— 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: Any OS (Windows, Mac, or Linux) with Capgo Builder
: 2-4 heures pour la première configurationExigences du système : Pour les builds cloud iOS : : Toute plate-forme (Windows, Mac ou Linux) avec __CAPGO_KEEP_0__ Constructeur : Pour les builds cloud Android : : Toute plate-forme
Stockage: 10 Go de stockage gratuit pour les dépendances et les artefacts de construction
RAM: 8 Go minimum

Coûts:

Exportation Base44: Un plan de constructeur ou supérieur (pour l'exportation et le téléchargement ZIP de GitHub)
App Store iOS: 99 $ par an (Compte développeur Apple)
Magasin Play Android: 25 $ une fois (Compte développeur Google Play)
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 ?

Une portée plus large: 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 sur l'App Store: Publiez sur Google Play et l'App Store d'Apple
Faites des itérations plus rapides: Associez les mises à jour en temps réel à Capgo avec le 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 __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)

Cliquez sur le bouton
__CAPGO_KEEP_0__ GitHub Autorisez
Étape 2 : __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 documents d'intégration de 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 repo GitHub (Git: Clone à partir de la palette de commandes) ou ouvrir le dossier ZIP extrait avec Fichier > 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ètre décrit dans notre guide "De l'adorable à mobile" Visitez.

É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

L'application Base44 en cours d'exécution localement

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

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 Build de Production

npm run build

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

Sortie de build Base44

Étape 4 : Ajoutez 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

Capacitor initialisation pour une application Base44

Commitez les ios/ et android/ 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 Capgo Live Updates docs.

Étape 6 : Construire et Syncroniser

Chaque fois que vous modifiez l'application web :

npm run build
npx cap sync

Capacitor syncronisation complète pour une application Base44

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

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

Pourquoi Capgo Builder pour les applications Base44 ?

Aucun Mac n'est requis pour iOS — construire à partir de Windows ou Linux
Le 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

Configurez 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. Voir Gestion des informations de signature et Construire iOS à partir de Windows.

Demandez un build 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 build s'affichent dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent être envoyés 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 — Testez localement dans Xcode ou Android Studio

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

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

Xcode ouvre un projet Base44 Capacitor

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.

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 en Capacitor tant 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 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 UI 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, enregistrez sur 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 une build native fraîche

L'export n'est pas disponible dans Base44

L'export 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. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

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 binaires iOS et Android signés à travers Capacitor Builder Capgo Builder __CAPGO_KEEP_0__ Live Updates

: Envoyez des correctifs de l'interface utilisateur et des copies sans attendre la revue de la boutique

Capgo Live UpdatesNotifications Push
Capgo Builderet reconstruisez avec __CAPGO_KEEP_0__ Builder
Next Steps__CAPGO_KEEP_0__ Builder @capacitor/push-notifications Capgo Builder
Guides connexes: De l'amour à mobile · Bolt.new vers mobile

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

Ressources

Continuez de Base44 à des applications mobiles natives avec Capacitor

Si vous utilisez Base44 to Native Mobile Apps with Capacitor pour planifier le travail du plugin natif, le connecter avec Capgo Plugin Directory 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 Capacitor Plugins par Capgo. Capgo Native Builds pour le flux de travail du produit dans les Capgo Builds natifs, et Construire l'application iOS à partir de Windows pour les builds iOS dans le cloud sans Mac.