Base44 zu native mobile Apps mit Capacitor

Einleitung

Base44 ist ein AI-gestütztes App-Bauwerkzeug, das 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 Builder — 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ätefunktionen wie Kamera, Speicher und Push-Benachrichtigungen.

Voraussetzungen und Zeitabschätzung

Zeit erforderlich: 2-4 Stunden für die erste Einrichtung

Systemanforderungen:

For iOS Cloud Builds: Jeder Betriebssystem (Windows, Mac oder Linux) mit Capgo Builder
For Android Cloud Builds: Jeder Betriebssystem
Speicher: 10 GB kostenlose Speicherplatz für Abhängigkeiten und Build-Artikel
RAM: 8 GB Mindestspeicher

Kosten:

Base44-Export: Builder-Plan 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)

Erforderliche Software:

Node.js 18+
Ein code-Editor wie Cursor

Warum Ihre Base44-App auf Mobilgeräte umwandeln?

Erweiterte Reichweite: Treffen Sie Nutzer dort, wo sie eine native App erwarten, nicht einen Browser-Fenster
Native Funktionen: Kamera, GPS, Biometrie und Offline-Speicher durch Capacitor-Plugins
Vertrieb im App Store: Veröffentlichen auf Google Play und dem Apple App Store
Rapide Iteration: Pair 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 sich auf den Builder-Plan oder höher befinden. Sie haben zwei Hauptoptionen.

Option A: Exportieren Sie zu GitHub (Empfohlen)

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

Siehe Base44 GitHub-Integration-Dokumentation für weitere Informationen.

Option B: Als ZIP herunterladen

Klicken Code In der oberen Leiste klicken, um das Dateibrowser zu öffnen
Klicken Projekt als ZIP exportieren In der oberen rechten Ecke der code Ansicht
Das Archiv auf Ihrem Computer entpacken

Projekt in Cursor öffnen

Besuchen Sie cursor.sh und Cursor installieren
Ihre GitHub-Repo klonen (aus dem Kommando-Palette) oder die extrahierte ZIP-Folder öffnen mitGit: Clone oder Datei > Ordner öffnen

Startzeiger

Für den besten Workflow mit AI-Unterstützung, aktivieren Sie Ihre bevorzugte Model und erlauben Sie die Ausführung von Befehlen in den Einstellungen von Cursor — die gleiche Konfiguration, die in unserem Lieblingsleitfaden zum Mobilgerät.

Schritt 2: Konfigurieren Sie Ihre Entwicklungsumgebung

Base44 exportiert ein Standardprojekt mit React. Installieren Sie die 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

Base44-Anwendung läuft lokal

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

Schritt 3: Vorbereiten 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

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

Bestätigen Sie, dass ein dist/ Ordner mit index.html und gebundener Assets existiert.

Base44 Ausgabedatei

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

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

Commit die ios/ und android/ Ordner in Git. Capgo-Builder kompiliert, was in diesen Verzeichnissen ist.

Schritt 5: Konfigurieren Sie Capacitor

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, __CAPGO_KEEP_0__ @capgo/capacitor-updater frühzeitig hinzuzufügen, damit Sie nach dem Launch OTA-Updates versenden können. Siehe Capgo Live Updates docs.

Schritt 6: Erstellen und Synchronisieren

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

npm run build
npx cap sync

Capacitor Synchronisierung abgeschlossen für eine Base44-Anwendung

Schritt 7: Erstellen von Laden-geeigneten Binärdateien mit Capgo Builder (Empfohlen)

Simulator-Tests sind optional. Für TestFlight, interne Tests und den Einreichungsprozess verwenden Sie Capgo Builder Jedes Mal, wenn Sie die Web-Anwendung ändern, synchronisiert sich die Anwendung automatisch.

Warum Capgo Builder für Base44-Anwendungen?

Kein Mac erforderlich für iOS — von Windows oder Linux aus bauen
Selbst CLI kann Ihre AI-Agentin ausführen — passt sich an die Vibe-Coding-Workflows von Base44 an → GitHub → Cursor
Passt mit Live-Updates zusammen — fixt UI und kopiert die Inhalte im Flug; Rebuild native nur, wenn Plugins oder Berechtigungen geändert werden

Einrichten des Capgo-Builders

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 die Signaturanmeldeinformationen einmal. Siehe Verwaltung von Anmeldeinformationen und iOS von Windows aus 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

Die Build-Protokolle fließen in Ihrem Terminal ein. 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

Wenn Sie ein Mac haben oder vorher Emulatortests durchführen möchten, bevor Sie Cloud-Builds erstellen:

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

Xcode öffnet einen Base44 Capacitor-Projekt

Verwenden Sie lokale IDEs für den alltäglichen Debugging. Verwenden Sie 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

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, bevor Sie die App in den Store einreichen.

Native Funktionen, die einer Base44 Capacitor-App hinzugefügt wurden

Schritt 10: Optimieren 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

Rücksichtnahmen für den Backend 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 des WebView (Testen Sie die Anmeldung 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 und damit verbundene __CAPGO_KEEP_1__-Aufrufe durch eigene __CAPGO_KEEP_1__-Aufrufe zu ersetzen – die React-UI-Schicht bleibt in der Regel erhalten. base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

Leerbildschirm bei der Startphase

Bestätigen

ist in der Vite-Konfiguration eingestellt base: './' Base44 Backend Considerations
Starten npm run build und überprüfen Sie, dass dist/index.html Bildmaterial mit relativen Pfaden lädt
Starten npx cap sync nach jeder Web-Build

Fehler beim Bauen in Capgo Builder

Commit ios/ und android/ zum Git vor der Anforderung eines Cloud-Builds
Starten npx cap sync lokale, damit Web-Bildmaterial in native Projekte kopiert wird
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 exportiert, die mit Capacitor umhüllt wurde, und haben einen klaren Weg zu signierten iOS- und Android-Binärdateien durch Capacitor Builder Capgo Builder Nächste Schritte

__CAPGO_KEEP_0__ Live-Updates

Capgo Live Updates__CAPGO_KEEP_0__ Builder
Capgo ermöglicht Ihnen, Ihre App ohne die Pflege eines lokalen Xcode-Farms zu bauen und zu veröffentlichen.: Automatisieren Sie die Veröffentlichung von Builds in CI
Push-Benachrichtigungen: Hinzufügen @capacitor/push-notifications und mit Capgo Builder neu erstellen
Zugehörige Anleitungen: Lovable zu mobilen Geräten · Bolt.new zu mobilen Geräten

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

Ressourcen

Mit Capacitor weitermachen von Base44 zu Native Mobile Apps

Wenn Sie Base44 verwenden Base44 zu Native Mobile Apps mit Capacitor um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Capgo Native Builds zum Produktworkflow in Capgo Native Builds, und iOS von Windows erstellen zum Cloud-IOS-Build ohne einen Mac

Base44 to Native Mobile Apps with Capacitor