Von Base44 zu nativen Mobile Apps mit Capacitor

Einführung

Base44 ist ein KI-gestützter App-Builder, der aus Prompts komplette React-Anwendungen generiert. Du kannst ein funktionierendes Produkt schnell im Browser live stellen – aber was, wenn du es auf iOS und Android willst? In diesem Tutorial zeigen wir dir, wie du dein Base44-Projekt exportierst und mit Capacitor, und dann signierte Store-Binaries mit Capgo Builder — kein Mac für iOS nötig.

Kurzfassung: Die Base44 zu iOS und Android mit Capacitor fasst den gesamten Weg auf einem Screen zusammen: Export, Capacitor, Cloud Builds ohne Mac und Live Updates.

Am Ende dieses Guides läuft deine Base44-App nativ auf iOS und Android und hat Zugriff auf Gerätefunktionen wie Kamera, Speicher und Push-Benachrichtigungen.

Voraussetzungen & Zeitaufwand

Benötigte Zeit: 2-4 Stunden für die Ersteinrichtung

Systemanforderungen:

Für iOS-Cloud-Builds: Jedes OS (Windows, Mac oder Linux) mit Capgo Builder
Für Android-Cloud-Builds: Jedes OS
Speicher: 10 GB freier Speicherplatz für Dependencies und Build-Artefakte
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 Developer Account)
Android Play Store: 25 $ einmalig (Google Play Developer)
Cursor Pro: 20 $/Monat (optional, aber empfohlen)

Erforderliche Software:

Node.js 18+
Ein code-Editor wie zum Beispiel Cursor

Warum Ihre Base44-App mobil machen?

Größere Reichweite: Erreichen Sie Nutzer dort, wo sie ein natives App-Icon erwarten, statt eines Browser-Tabs
Native Funktionen: Kamera, GPS, Biometrie und Offline-Speicher via Capacitor Plugins
App-Store-Distribution: Veröffentlichung bei Google Play und im Apple App Store
Schnellere Iterationen: Kombiniere Capgo Live Updates mit dem Capgo Builder für Web-Layer-Fixes, ohne jedes Mal native Binaries neu zu bauen

Schritt 1: Base44-Projekt exportieren

Mit Base44 kannst du code exportieren, sobald du den Builder-Plan oder höher hast. Du hast zwei Hauptoptionen.

Option A: Export zu GitHub (empfohlen)

Öffne deine App im Base44-Editor
Klicke auf das GitHub Icon in der oberen Leiste
Autorisieren Base44 Builder und ein Repository erstellen oder verbinden
Base44 synchronisiert deine App code automatisch mit GitHub (Zwei-Wege-Sync bei unterstützten Plänen)

Siehe Base44 GitHub Integrations-Doku für Details.

Option B: Als ZIP herunterladen

Klicken Code in der oberen Leiste, um den Dateibrowser zu öffnen
Klicken Projekt als ZIP exportieren oben rechts in der code-Ansicht
Das Archiv auf Ihrem Computer entpacken

Projekt in Cursor öffnen

Besuchen cursor.sh und Cursor installieren
Ihr GitHub-Repo klonen (Git: Clone aus der Befehlspalette) oder den entpackten ZIP-Ordner öffnen mit Datei > Ordner öffnen

Cursor starten

Für den besten KI-gestützten Workflow aktiviere dein bevorzugtes Modell und erlaube die Befehlsausführung in den Cursor-Einstellungen – genau wie in unserem Lovable-zu-Mobile-Guide.

Schritt 2: Entwicklungsumgebung einrichten

Base44 exportiert ein Standard-React-Projekt. Installiere die Abhängigkeiten und prüfe, ob der Dev-Server läuft.

Mit Cursor AI (Empfohlen)

Drücken Command+K (Mac) oder Ctrl+K (Windows) und frage:

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

Manuelle Einrichtung

cd your-base44-project
npm install
npm run dev

Base44-App läuft lokal

Ihre Base44-App sollte unter http://localhost:5173 (Vite) oder dem im Terminal angezeigten Port geladen werden.

Schritt 3: Production Build vorbereiten

Capacitor benötigt statische Web-Assets. Base44-React-Apps nutzen typischerweise Vite und schreiben die Ausgabe nach dist/.

Vite für Mobile konfigurieren

Cursor fragen:

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

Oder aktualisiere vite.config.ts manuell:

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

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

Production Build testen

npm run build

Prüfe, ob ein dist/ Ordner existiert mit index.html und gebündelten Assets existiert.

Base44 Build-Output

Schritt 4: Capacitor zum Base44-Projekt hinzufügen

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

Capacitor-Initialisierung für eine Base44-App

Committe die ios/ und android/ Ordner in Git. Der Capgo Builder kompiliert, was in diesen Verzeichnissen liegt.

Schritt 5: Capacitor konfigurieren

Update 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

Erwäge die Integration @capgo/capacitor-updater frühzeitig, damit du nach dem Launch OTA-Updates ausliefern kannst. Siehe Capgo Live Updates Docs.

Schritt 6: Build und Sync

Jedes Mal, wenn du die Web-App änderst:

npm run build
npx cap sync

Capacitor Sync abgeschlossen für eine Base44-App

Schritt 7: Store-ready Binaries mit Capgo Builder erstellen (Empfohlen)

Simulator-Tests sind optional. Für TestFlight, internes Testing und die Store-Einreichung nutze Capgo Builder um native Binaries in der Cloud zu kompilieren und zu signieren.

Warum Capgo Builder für Base44-Apps?

Kein Mac für iOS nötig — Build von Windows oder Linux aus
Derselbe CLI, den dein AI-Agent ausführen kann — passt zu Vibe-Coding-Workflows von Base44 → GitHub → Cursor
Kombinierbar mit Live Updates — UI und Texte per Live Update anpassen; Native Build nur bei Änderungen an Plugins oder Berechtigungen

Capgo Builder einrichten

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

Signier-Zertifikate einmal speichern. Siehe Credentials verwalten und iOS von Windows aus bauen.

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

Build-Logs werden in dein Terminal gestreamt. Mit konfiguriertem App Store Connect werden iOS-Builds automatisch zu TestFlight hochgeladen.

Web-Bundle für OTA-Updates hochladen:

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

Schritt 8: Optional — Lokal in Xcode oder Android Studio testen

Wenn du einen Mac hast oder vor Cloud-Builds mit Emulatoren testen willst:

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

Xcode öffnet ein Base44-Capacitor-Projekt

Nutze lokale IDEs für das tägliche Debugging. Nutze Capgo Builder wenn du signierte Release-Binaries brauchst.

Schritt 9: Native Features hinzufügen

Erweitere deine Base44-App um Gerätefunktionen:

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

Lass Cursor Share, Camera oder Push in deine React-Komponenten einbinden. Nach dem Hinzufügen der Plugins führe einen neuen Capgo Builder Build vor der Store-Einreichung aus.

Native Features in einer Base44-Capacitor-App

Schritt 10: Für die Produktion optimieren

App-Icons 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 zum Base44-Backend

Exportierte Base44-Apps können das gehostete Backend von Base44 und SDK aufrufen. Das funktioniert in Capacitor meistens, solange:

API-Aufrufe HTTPS nutzen
Auth-Redirects im WebView funktionieren (Login auf einem echten Gerät testen)
Deep Links konfiguriert sind, falls du Magic-Link- oder OAuth-Flows nutzt

Falls du später vom Base44-Backend wegmigrierst, plane den Austausch von base44.entities.* und den zugehörigen SDK-Aufrufen durch dein eigenes API — die React-UI-Schicht lässt sich meist übernehmen.

Häufige Probleme beheben

White Screen beim Start

Bestätigen base: './' ist in der Vite-Config eingestellt
Ausführen npm run build und prüfen, ob dist/index.html Assets mit relativen Pfaden lädt
Ausführen npx cap sync nach jedem Web-Build

Build-Fehler im Capgo Builder

Commit ios/ und android/ an Git, bevor du einen Cloud Build anforderst
Ausführen npx cap sync lokal, damit die Web-Assets in die nativen Projekte kopiert werden
Neue Capacitor-Plugins erfordern einen frischen Native Build

Export in Base44 nicht verfügbar

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

Fazit

Du hast eine von Base44 KI-generierte React-App exportiert, mit Capacitor verpackt und hast einen klaren Weg zu signierten iOS- und Android-Binaries über Capgo Builder — ohne eine lokale Xcode-Farm pflegen zu müssen.

Nächste Schritte

Capgo Live Updates: Liefere UI- und Textkorrekturen aus, ohne auf die Store-Prüfung zu warten
Capgo Builder: Release-Builds in der CI automatisieren
Push-Benachrichtigungen: Hinzufügen @capacitor/push-notifications und mit dem Capgo Builder neu bauen
Verwandte Guides: Lovable auf Mobile · Bolt.new auf Mobile

Erstelle ein kostenloses Capgo-Konto um Live Updates und Cloud-native Builds zu aktivieren.

Ressourcen

Weiter geht's: von Base44 zu Native Mobile Apps mit Capacitor

Wenn du es nutzt Von Base44 zu nativen Mobile Apps mit Capacitor Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Capgo Native Builds optimieren für den Produkt-Workflow in Capgo Native Builds, und iOS von Windows aus bauen für Cloud-iOS-Builds ohne Mac.