Base44 zu nativen Mobilanwendungen mit Capacitor

Einführung

Base44 ist eine AI-gestützte App-Bauanlage, die vollständige React-Anwendungen aus Anfragen generiert. Sie können ein funktionierendes Produkt schnell im Browser bereitstellen — aber was, wenn Sie es auf iOS und Android haben möchten? In dieser Anleitung zeigen wir Ihnen, wie Sie Ihr Base44-Projekt exportieren und in nativen Mobilanwendungen mit __CAPGO_KEEP_0__ umwandeln können. Capacitor, dann schicken Sie dann signierte Store-Binärdateien mit Capgo-Bauer Cloudflare

Capacitor

GitHub

CapgoAPI

SDK:

• CLI: Any OS (Windows, Mac, or Linux) with Capgo Builder
• bunKeine Mac-Installation erforderlich für iOS.
• Speicherplatz: 10 GB kostenlose Speicherplatz für Abhängigkeiten und Build-Artikel
• RAM: mindestens 8 GB

Kosten:

• Base44-Export: Builder-Plan oder höher (für GitHub-Export und ZIP-Download)
• iOS-App-Store: 99 $/Jahr (Apple-Entwicklerkonto)
• Android-Spiel-Store: 25 $ einmalig (Google-Play-Entwicklerkonto)
• Cursor Pro: 20 €/Monat (optional, aber empfohlen)

Benötigte Software:

• Node.js 18+
• Eine code-Editor wie Cursor

Wozu Ihre Base44-App auf Mobilgeräte transformieren?

• Erweiterter Zugriff: Treffen Sie Nutzer dort an, wo sie eine native App ikone erwarten, nicht eine Browser-Taste
• Nativfunktionen: Kamera, GPS, Biometrie und Offline-Speicherung durch Capacitor-Plugins
• Vertrieb im App Store: Veröffentlichen Sie auf Google Play und dem Apple App Store
• Faster Iteration: Paare Capgo Live Updates mit Capgo Builder für web-schichtbehebungen ohne native Binärdateien neu zu bauen, jede Zeit

Schritt 1: Exportieren Sie Ihr Base44-Projekt

Base44 ermöglicht Ihnen, code zu exportieren, sobald Sie sich auf dem Builder-Plan oder höher befinden. Sie haben zwei Hauptoptionen.

Option A: Exportieren Sie zu GitHub (Empfohlen)

1. Öffnen Sie Ihre App im Base44-Editor
2. Klicken Sie auf das GitHub -Symbol in der oberen Leiste
3. Zustimmen Base44 Builder und erstelle oder verbinde einen Repository
4. Base44 synchronisiert deine App code automatisch mit GitHub (Zwei-Wege-Synchronisierung bei unterstützten Tarifen)

Siehe Base44 GitHub-Integration-Dokumentation für Details.

Option B: Als ZIP herunterladen

1. Klicken Code in der oberen Leiste, um den Dateibrowser zu öffnen
2. Klicken __CAPGO_KEEP_0__ in der oberen rechten Ecke der code Ansicht
3. Entpacken Sie das Archiv auf Ihrem Computer

Öffnen Sie das Projekt in Cursor

1. Besuchen Sie cursor.sh und installieren Sie Cursor
2. Klonen Sie Ihr GitHub-Repository (Git: Clone aus dem Befehlsfenster) oder öffnen Sie das extrahierte ZIP-Ordner mit Datei > Ordner öffnen

Für den besten Workflow mit AI-gestützter Unterstützung aktivieren Sie Ihre bevorzugte Modell und erlauben Sie die Ausführung von Befehlen in den Cursor-Einstellungen — die gleiche Konfiguration wie in unserem Lovable zu mobilen Geräten Guide.

Schritt 2: Konfiguration Ihres Entwicklungsumgebungen

Base44 exportiert ein Standard-React-Projekt. Installieren Sie Abhängigkeiten und bestätigen Sie, dass der Entwicklungs-Server funktioniert.

Mit Cursor AI (Empfohlen)

Drücken Sie Command+K Mac: oder Ctrl+K Windows: und fragen Sie:

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

Manuelle Konfiguration

cd your-base44-project
npm install
npm run dev

Ihre Base44-Anwendung sollte bei http://localhost:5173 Vite) oder dem im Terminal angezeigten Port aufladen.

Schritt 3: Vorbereitung der Produktionsversion

Capacitor benötigt statische Web-Assets. Base44-React-Anwendungen verwenden typischerweise Vite und geben Ausgaben an dist/.

Konfigurieren Sie Vite für Mobilgeräte

Frage Cursor:

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

Oder aktualisieren Sie vite.config.ts manuell:

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

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

Testen Sie die Produktionsversion

npm run build

Überprüfen Sie ein dist/ Ordner, der mit index.html und gebündelten Assets existiert.

Schritt 4: Fügen Sie Capacitor Ihrem Base44-Projekt hinzu

Mit Cursor AI (Empfohlen)

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

Manuelle Installation

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 die ios/ und android/ Ordner zu Git. Capgo-Builder kompiliert, was sich in diesen Verzeichnissen befindet.

Schritt 5: Konfiguration von Capacitor

Aktualisierung 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

Überlegen Sie, __CAPGO_KEEP_0__ frühzeitig zu integrieren, damit Sie nach dem Launch OTA-Updates bereitstellen können. Siehe __CAPGO_KEEP_0__ Live-Updates-Dokumentation @capgo/capacitor-updater Schritt 6: Erstellen und Synchronisieren Capgo Live Updates docs.

__CAPGO_KEEP_0__-Synchronisierung abgeschlossen für eine Base44-Anwendung

__CAPGO_KEEP_0__

npm run build
npx cap sync

Schritt 7: Erstellen Sie mit Capgo Builder (Empfohlen) Store-Ready Binaries

Simulator-Tests sind optional. Für TestFlight, interne Tests und den Store-Submission verwenden Sie Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

• __CAPGO_KEEP_0__ Builder Kein Mac erforderlich für iOS
• Same CLI your AI agent can run Das gleiche GitHub wie Ihr AI-Agent kann ausführen
• — passt sich an die Vibe-Coding-Workflows von Base44 → __CAPGO_KEEP_0__ → Cursor an Passt sich mit Live-Updates

Set up 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

Signierzertifikate einmal speichern. Siehe Zugriff auf Anmeldedaten und Erstellen Sie iOS von Windows.

Eine Cloud-Build anfordern

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

Die Build-Protokolle streamen in Ihrem Terminal. Mit der Konfiguration von App Store Connect können iOS-Builds automatisch auf TestFlight hochladen.

Hochladen Sie Ihr Web-Bundle für OTA-Updates:

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

Schritt 8: Optional — Testen Sie lokal in Xcode oder Android Studio

Wenn Sie ein Mac haben oder vor der Cloud-Build-Testung Emulatortests durchführen möchten:

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

Verwenden Sie lokale IDEs für den täglichen Debugging. Verwenden Sie Capgo-Builder Wenn Sie signierte Release-Dateien benötigen.

Schritt 9: Hinzufügen von Native-Funktionen

Erweitern Sie Ihre Base44-Anwendung mit Gerätefunktionen:

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

Bitten Sie Cursor, Share, Camera oder Push in Ihre React-Komponenten einzubinden. Nachdem Sie Plugins hinzugefügt haben, führen Sie einen neuen Capgo-Builder Erstellen Sie die Anwendung vor der Veröffentlichung im App-Store.

Schritt 10: Optimieren für die Produktion

App-Ikonen und Splash-Screens

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

Hinweise zur Backend-Implementierung von Base44

Exportierte Base44-Anwendungen können Base44s gehosteten Backend und SDK aufrufen. Das funktioniert in der Regel in Capacitor solange:

• API-Aufrufe verwenden HTTPS
• Auth-Redirects funktionieren innerhalb der WebView (Test-Login auf einem echten Gerät)
• Tiefglink-Konfigurationen sind vorhanden, wenn Sie Magic-Link- oder OAuth-Flüsse verwenden

Wenn Sie später von Base44s Backend migrieren, planen Sie, __CAPGO_KEEP_0__-Aufrufe durch Ihre eigenen __CAPGO_KEEP_1__-Aufrufe zu ersetzen – die React-UI-Schicht wird normalerweise übernommen base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

Weißer Bildschirm beim Start

Bestätigen

• wird in der Vite-Konfiguration gesetzt base: './' Ausführen
• und überprüfen Sie, dass npm run build Lädt Assets mit relativen Pfaden dist/index.html Ausführen
• protectedTokens npx cap sync nach jeder Web-Build

Fehler bei der Capgo-Erstellung

• Commit ios/ und android/ vor dem Anfordern eines Cloud-Builds auf Git
• Ausführen npx cap sync lokal, damit Web-Assets in native Projekte kopiert werden
• Neue Capacitor-Plugins erfordern einen frischen native Build

Export nicht verfügbar in Base44

GitHub-Export und ZIP-Download erfordern den Builder-Plan oder höherUpgrade in Base44 oder kopiere Dateien manuell aus der Code-Ansicht auf niedrigeren Ebenen.

Zusammenfassung

Sie haben ein Base44-App erstellt, die von einer AI generiert wurde, und es mit Capacitor umschlossen. Sie haben jetzt einen klaren Weg, um signierte iOS- und Android-Binärdateien zu erhalten, ohne dass Sie eine lokale Xcode-Farm unterhalten müssen. Capgo-Bauer __CAPGO_KEEP_0__ Live Updates

: Schiffe UI- und Copy-Fixes ohne auf die Store-Überprüfung zu warten

• Capgo-Bauer: Automatisieren Sie die Release-Builds in CI
• Capgo Builder: Hinzufügen
• und mit __CAPGO_KEEP_0__-Bauer neu erstellenSchritte @capacitor/push-notifications Capgo Live Updates
• Zugehörige Anleitungen: Base44 in eine mobile App umwandeln · Bolt.new in eine mobile App umwandeln

Registrieren Sie sich für ein kostenloses Capgo Konto um Live-Updates und cloudbasierte Builds zu aktivieren.

Ressourcen

• Base44-Dokumentation
• Base44 GitHub-Integration
• Capacitor-Dokumentation
• Capgo-Native Builds
• Capgo — Live-Updates für Capacitor-Apps

Fortsetzen von Base44 zu Native Mobile Apps mit Capacitor

Wenn Sie Capgo verwenden Base44 to Native Mobile Apps with Capacitor um native Plugin-Arbeit zu planen, mit ihm zu verbinden Capgo Plugin Directory für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Capgo nativee Native Builds für das Produktworkflow in Capgo Native Builds, und Aus iOS auf Windows erstellen für Cloud- iOS-Builds ohne einen Mac.