Base44 zu native mobile Apps 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 im Browser schnell bereitstellen — aber was, wenn Sie es auf iOS und Android haben möchten? In diesem Tutorial zeigen wir Ihnen, wie Sie Ihr Base44-Projekt exportieren und es in native mobile Apps umwandeln mit Capacitor, dann laden Sie dann signierte Store-Dateien mit Capgo-Bauer — kein Mac erforderlich für iOS.

Durch das Ende dieses Leitfadens läuft Ihr Base44-App nativ auf iOS und Android mit Zugriff auf Gerätefeatures wie Kamera, Speicher und Push-Benachrichtigungen.

Voraussetzungen und Zeitabschätzung

Zeitbedarf: 2-4 Stunden für die erste Einrichtung

Systemanforderungen:

Für iOS-Cloud-Builds: Jeder Betriebssystem (Windows, Mac oder Linux) mit Capgo Builder
Für Android-Cloud-Builds: Jede Plattform
Speicherplatz10 GB kostenlose Speicherplatz für Abhängigkeiten und Build-Artikel
RAM: 8 GB mindestens

Costs:

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

Benötigte Software:

Node.js 18+
Eine code-Editor wie Cursor

Warum Ihre Base44-App auf Mobilgeräte umwandeln?

Erweiterter Zugriff: Treffen Sie Benutzer dort, wo sie eine native App-Icon erwarten, nicht einen Browser-Fenster
Native-Funktionen: Kamera, GPS, Biometrie und Offline-Speicher durch Capacitor-Plugins
Vertrieb im App Store: Veröffentlichen Sie auf Google Play und dem Apple App Store
Schrittweiserer Iterationsprozess: Paaren Sie Capgo Live-Updates mit Capgo Builder für Web-Schichten ohne jedes Mal native Binärdateien neu zu bauen

Schritt 1: Exportieren Sie Ihr Base44-Projekt

Base44 ermöglicht Ihnen das Exportieren von code sobald Sie auf dem Builder-Plan oder höher sind. Sie haben zwei Hauptoptionen.

Option A: Exportieren Sie in GitHub (Empfohlen)

Öffnen Sie Ihre App im Base44-Editor
Klicken Sie auf GitHub Symbol in der oberen Leiste
Zustimmen Base44 Builder und erstellen oder verbinden Sie einen Repository
Base44 synchronisiert Ihre App code mit GitHub automatisch (Zwei-Wege-Synchronisierung bei unterstützten Tarifen)

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

Option B: Als ZIP herunterladen

Klicken Code im Topmenü öffnen Sie das Dateibrowser
Klicken Projekt als ZIP exportieren in the top right of the code view
Entpacken Sie das Archiv auf Ihrem Computer

Öffnen Sie das Projekt in Cursor

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

Cursor starten

Für den besten Workflow mit AI-Unterstützung aktivieren Sie Ihre bevorzugte Model und erlauben die Ausführung von Befehlen in den Cursor-Einstellungen – dieselbe Konfiguration wie in unserem Guide zur Mobilisierung von Lovable.

Schritt 2: Einrichten Ihrer Entwicklungsumgebung

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

Mithilfe von 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 Einrichtung

cd your-base44-project
npm install
npm run dev

Base44-Anwendung läuft lokal

Die 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. Bas44-React-Anwendungen verwenden typischerweise Vite und exportieren zu dist/.

Konfigurieren Sie Vite für Mobilgeräte

Fragen Cursor:

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

Aktualisieren vite.config.ts Ask Cursor:

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

Bestätigen dist/ Ordner existiert index.html und verknüpften Assets.

Base44-Ausgabe

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

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

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

Mit Cursor AI (Empfohlen)

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

Veröffentliche ios/ and android/ Ordner in Git. Capgo Builder kompiliert, was sich in diesen Verzeichnissen befindet.

Ordner zu Git. Capacitor-Builder kompiliert, was in diesen Verzeichnissen ist.

aktualisieren 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, ob Sie @capgo/capacitor-updater frühzeitig, um OTA-Updates nach dem Launch verschicken zu können. Siehe Capgo Live-Updates-Dokumentation.

Schritt 6: Erstellen und Synchronisieren

Jedes Mal, wenn Sie die Web-App ändern:

npm run build
npx cap sync

Capacitor Synchronisierung abgeschlossen für eine Base44-App

Schritt 7: Binärdateien für den Laden bereitstellen mit Capgo Builder (Empfohlen)

Simulator-Tests sind optional. Für TestFlight, interne Tests und den Ladenversand verwenden Sie Capgo Builder um in der Cloud zu kompilieren und native Binärdateien zu signieren.

Warum Capgo Builder für Base44-Apps?

No Mac erforderlich für iOS — aus Windows oder Linux erstellen
Das gleiche CLI kann Ihre AI-Agentin ausführen — passt sich Vibe-Coding-Workflows von Base44 → GitHub → Cursor an
Passt sich Live-Updates an — UI reparieren und über das Internet kopieren; native nur neu erstellen, wenn Plugins oder Berechtigungen geändert werden

Konfigurieren Sie 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

Speichere Signaturzertifikate einmal. Verwalten Sie Anmeldeinformationen und — aus Windows iOS erstellen.

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

Buildprotokolle streamen in Ihrem Terminal. Mit App Store Connect konfiguriert, können iOS-Builds automatisch auf TestFlight hochgeladen werden.

Uploaden 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

If you have a Mac or want emulator testing before cloud builds:

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

Xcode öffnet ein Base44 Capacitor-Projekt

Use local IDEs for day-to-day debugging. Use Capgo-Builder Wenn Sie signierte Release-Dateien benötigen.

Schritt 9: Fügen Sie native Funktionen hinzu

Erweitern Sie Ihre Base44-App mit Gerätefunktionen:

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

Beachten Sie Cursor, um Share, Camera oder Push in Ihre React-Komponenten einzubinden. Nachdem Sie Plugins hinzugefügt haben, führen Sie einen neuen Capgo-Builder vor der Speicherung abzubilden.

Native Funktionen werden einer Base44 Capacitor-Anwendung hinzugefügt.

Schritt 10: Optimierung für die Produktion

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

App-Ikone und Splash-Screens

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 des WebView (Test-Login auf einem realen Gerät).
Tiefenlinks sind konfiguriert, wenn Sie Magic-Link- oder OAuth-Flüsse verwenden

Deep-Links sind konfiguriert, wenn Sie Magic-Link- oder OAuth-Flüsse verwenden base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

Fehlerbehebung häufiger Probleme

Weißer Bildschirm beim Starten

Bestätigen base: './' wird in der Vite-Konfiguration festgelegt
Ausführen npm run build und überprüfen Sie das dist/index.html lädt Assets mit relativen Pfaden
Ausführen npx cap sync Fehler beim Build in __CAPGO_KEEP_0__ Builder

Fehler beim Aufbauen von Capgo Builder

und ios/ and android/ zum Git vor der Anforderung eines Cloud-Builds
Ausführen npx cap sync lokale Web-Ressourcen werden in native Projekte kopiert
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öher. Upgrade in Base44 oder kopiere Dateien manuell aus der Code-Ansicht auf niedrigeren Ebenen.

Fazit

Sie haben ein Base44-erzeugtes React-App exportiert, es mit Capacitor umhüllt und haben einen klaren Weg zu signierten iOS- und Android-Binären durch Capgo-Builder — ohne einen lokalen Xcode-Server zu unterhalten.

Nächste Schritte

Capgo Live Updates: Liefer UI- und Kopiervorlagen ohne auf die Store-Bewertung zu warten
Capgo-BauerAutomatisiere die Veröffentlichung von Builds im CI
: Appflow-Kredite: Add @capacitor/push-notifications und mit Capgo Builder neu erstellen
: Hinzufügen: und mit __CAPGO_KEEP_0__ Builder neu erstellen · : Verwandte Anleitungen

Ressourcen

Mit Capacitor weitermachen von Base44 zu nativen Mobilanwendungen

Wenn Sie Base44 verwenden Base44 zu nativen Mobilanwendungen mit Capacitor um das native Plugin-Work zu planen, verbinden Sie es mit Capgo-Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins durch Capgo zur Implementierungsdetail in Capacitor Plugins durch Capgo Capgo native Builds zur Produktworkflow in Capgo Native Builds, und iOS von Windows erstellen zum Cloud iOS-Build ohne Mac.

Base44 to Native Mobile Apps with Capacitor