Base44 to Native Mobile Apps with 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 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 envoyer des binaires de magasin signés avec Capgo Builder — sans besoin de Mac 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 & Durée Estimée

Durée requise2-4 heures pour la configuration initiale

Exigences du système:

• Pour les builds cloud iOS2. N'importe quel système d'exploitation (Windows, Mac ou Linux) avec Capgo Builder
• Pour les builds cloud Android2. N'importe quel système d'exploitation
• Stockage2. 10 Go de stockage gratuit pour les dépendances et les artefacts de build
• RAM2. 8 Go minimum

Coûts:

• Export de Base44: Plan de constructeur ou supérieur (pour l'export GitHub et le téléchargement ZIP)
• App Store iOS: 99 €/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+
• Un éditeur code tel que Cursor

Pourquoi transformer votre application Base44 en mobile ?

• Portée élargie: Rencontre les utilisateurs où ils attendent un icône d'application native, pas une fenêtre de navigateur
• Caractéristiques natives: Caméra, GPS, biométrie et stockage hors ligne grâce aux Capacitor plugins
• context : Fragment de texte HTML d'une chaîne de Capgo plus longue (clé parente `capwesome_diff_plugins_capgo`). Page/zone : Page de comparaison Capawesome. Rôle : Paragraphe de marketing ou juridique long. Voir dans : page capwesome.astro. Conservez les termes de produit/marque et les termes de développeur exactement. Clé de message `capwesome_diff_plugins_capgo` (Capwesome Diff Plugins Capgo).Distribution de l'application Store
• : Publiez sur Google Play et sur l'Apple App Store: Pair Capgo Live Updates with Capgo Builder for web-layer fixes without rebuilding native binaries every time

: Associez les mises à jour __CAPGO_KEEP_0__ avec le __CAPGO_KEEP_1__ Builder pour des correctifs de la couche web sans recompiler les binaires natifs à chaque fois

Base44 lets you export code once you are on the Base44 vous permet d'exporter __CAPGO_KEEP_0__ dès que vous êtes sur leplan de l'éditeur ou un plan supérieur : Vous avez deux options principales.

Option A : Exporter vers GitHub (Recommandé)

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

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

1. Cliquez Code Cliquez sur l'icône en haut pour ouvrir le navigateur de fichiers
2. Cliquez Exporter le projet sous forme de ZIP Dans l'angle supérieur droit de la vue code
3. Décompressez l'archive sur votre ordinateur

Ouvrez 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 — le même paramétrage décrit dans notre Guide de passage de Lovable à mobile.

É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 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

Votre application Base44 doit s'afficher à l'adresse 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 à 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 mise en production

npm run build

Vérifiez un dist/ le dossier existe avec index.html et les ressources bundlées.

É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

Commitez le ios/ et android/ folders to git. Capgo Builder compiles what is in those directories.

les dossiers au git. Le compilateur de Capacitor compile ce qui se trouve dans ces répertoires.

Étape 5 : Configurez __CAPGO_KEEP_0__ 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.

É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 pour la boutique avec Capgo Builder (Recommandé)

La testification du simulateur est facultative. Pour TestFlight, les tests internes et la soumission de la boutique, 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 AI 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 copiez les données en ligne ; reconstruirez nativement uniquement lorsque les plugins ou les autorisations changent

Configurez 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. Consultez Gestion des informations d'identification 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.

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 souhaitez tester un émulateur avant les builds 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 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

Demandez à Cursor de brancher la partage, la caméra ou la push dans vos composants React. Après avoir ajouté des plugins, exécutez un nouveau Capgo Builder pour construire avant la soumission de l'application dans le magasin.

Étape 10 : Optimiser pour la production

Icônes et écrans de splash de l'application

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

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

• API utilise HTTPS
• Les redirections d'authentification fonctionnent à l'intérieur de la vue WebView (testez 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 backend 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 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

Les erreurs de build dans Capgo Builder

• Commitez ios/ et android/ envoyez les modifications vers le git avant de demander un build cloud
• Exécuter npx cap sync Les actifs web sont copiés localement dans les projets natifs.
• Les nouveaux plugins Capacitor nécessitent une nouvelle construction native.

La fonction d'export n'est pas disponible dans Base44.

GitHub export et téléchargement ZIP nécessitent le plan Builder ou un plan supérieur. Augmentez votre niveau dans Base44 ou copiez les fichiers manuellement à partir de la vue __CAPGO_KEEP_0__ sur les niveaux inférieurs.. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

Vous avez exporté une application React générée par l'IA Base44, l'avez enveloppée avec __CAPGO_KEEP_0__, et avez un chemin clair vers les binaires iOS et Android signés à travers __CAPGO_KEEP_0__ Builder.

Capacitor Builder Capgo __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

• Capgo Live Updates: Envoyez les correctifs de l'interface utilisateur et du contenu sans attendre la revue de la boutique.
• Capgo ÉditeurÉditeur de construction native
• Construction nativeGuides connexes @capacitor/push-notifications and rebuild with Capgo Builder
• Bolt.new pour mobile: Inscrivez-vous pour un compte gratuit __CAPGO_KEEP_0__ · pour activer les mises à jour en temps réel et les constructions natives dans le cloud.

Sign up for a free Capgo account : Automatisez les builds de version de production dans CI

: Notifications Push

• Documentation de Base44
• Intégration de Base44 à GitHub
• Capacitor Documentation
• Capgo Bâtisse Native
• 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 pour passer aux applications mobiles natives avec Capacitor pour planifier le travail de plugin natif, connectez-l’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 Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs, et Construire iOS à partir de Windows pour les builds iOS cloud sans Mac.