Base44 zu Native Mobile Apps mit Capacitor

Einführung

Base44 ist ein KI-gestützter App-Builder, der aus Prompts komplette React-Apps generiert. Du kannst schnell ein funktionierendes Produkt im Browser launchen – aber was, wenn du es auf iOS und Android brauchst? 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 kostenloser Speicher 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)

1. Öffne deine App im Base44-Editor
2. Klicke auf das GitHub Icon in der oberen Leiste
3. Autorisiere Base44 Builder und erstelle oder verbinde ein Repository
4. Base44 synchronisiert deine App code automatisch mit GitHub (Zwei-Wege-Sync in unterstützten Plänen)

Siehe Base44 GitHub Integrations-Docs für Details.

Option B: Als ZIP herunterladen

1. Klicke Code in der oberen Leiste, um den Dateibrowser zu öffnen
2. Klicke auf Projekt als ZIP exportieren oben rechts in der code Ansicht
3. Entpacke das Archiv auf deinem Computer

Projekt in Cursor öffnen

1. Besuche cursor.sh und installiere Cursor
2. Klone dein GitHub Repo (Git: Clone über die Command Palette) oder öffne den entpackten ZIP-Ordner mit Datei > Ordner öffnen

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

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

Schritt 3: Production Build vorbereiten

Capacitor benötigt statische Web-Assets. Base44 React-Apps nutzen meist Vite und geben aus in dist/.

Vite für Mobile konfigurieren

Cursor fragen:

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

Oder manuell vite.config.ts aktualisieren:

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

Überprüfe eine dist/ Ordner existiert mit index.html und gebündelten Assets.

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

Commiten Sie die ios/ und android/ Ordner in Git. Der Capgo Builder kompiliert den Inhalt dieser Verzeichnisse.

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ägen Sie das Hinzufügen @capgo/capacitor-updater frühzeitig, um nach dem Launch OTA-Updates zu versenden. Siehe Capgo Live Updates Docs.

Schritt 6: Build und Sync

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

npm run build
npx cap sync

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

Simulator-Tests sind optional. Für TestFlight, internes Testing und den Store-Submit 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
• Dasselbe CLI, das dein AI-Agent ausführen kann — passt perfekt zu Vibe-Coding-Workflows von Base44 → GitHub → Cursor
• Kombinierbar mit Live Updates — UI und Texte via OTA fixen; Native Build nur bei Plugin- oder Permission-Änderungen

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

Signing-Credentials einmalig speichern. Siehe Credentials verwalten und iOS von Windows aus builden.

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 streamen direkt ins Terminal. Bei 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

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.

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

Base44 Backend-Überlegungen

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

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

Falls du später von Base44s Backend wegmigrierst, plane den Austausch von base44.entities.* und zugehörigen SDK Aufrufen durch dein eigenes API ein — 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 gesetzt
• 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/ vor einem Cloud-Build an git senden
• Ausführen npx cap sync lokal, damit Web-Assets in native Projekte kopiert werden
• Neue Capacitor Plugins erfordern einen neuen Native Build

Export in Base44 nicht verfügbar

Der GitHub Export und ZIP-Download erfordern den Builder-Plan oder höher hast. Upgrade in Base44 oder manuelles Kopieren der Dateien aus der Code View in niedrigeren Tiers.

Fazit

Du hast eine von Base44 generierte React-App exportiert, sie mit Capacitor wrapped und hast einen klaren Weg zu signierten iOS- und Android-Binaries via Capgo Builder — ganz ohne eigene Xcode-Farm.

Nächste Schritte

• Capgo Live Updates: UI- und Copy-Fixes deployen, ohne auf den Store-Review 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

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

Der Weg von Base44 zu Native Mobile Apps mit Capacitor

Wenn du gerade Base44 zu Native Mobile Apps mit Capacitor um native Plugin-Arbeiten zu planen, verbinde es mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin Directory, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Capgo Native Builds für den Produkt-Workflow in Capgo Native Builds, und iOS von Windows aus bauen für Cloud-iOS-Builds ohne Mac.