Einführung
Lovable ist ein AI-App-Builder, der Prompte in Minuten in funktionierende React-Anwendungen verwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, wo sie auf dem Homescreen sitzt wie jede andere native App?
Dieses Leitfaden führt durch den gesamten Weg: Export aus Lovable, das Web-App mit __CAPGO_KEEP_0__ umhüllen Capacitor, mit der Erstellung von signierten iOS- und Android-Binären im Cloud mit Capgo Builder (kein Mac erforderlich), eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit Capgo Live Updates.
Wir verwenden Cursor durchgehend — seine KI kann die meisten Terminal-Befehle für Sie ausführen, wenn Sie sie manuell eingeben möchten.
Zeitbedarf: ca. 1–2 Stunden zum ersten Mal, hauptsächlich Einrichtung des Kontos und Warten auf Cloud-Builds.
Am Ende werdet Sie haben:
- Ein native iOS- und Android-App, die aus der Cloud erstellt wird — kein Xcode oder Android Studio auf dem Hauptpfad.
- Die App läuft auf einem echten Gerät (TestFlight, direkte Installation oder Play-Interner Test)
- Eine funktionierende Kamerafunktion, die nur eine native App bieten kann
- Live-Updates konfiguriert, damit UI- und CSS-Fixes ohne Store-Überprüfung verschickt werden
Voraussetzungen
| Anforderung | Details |
|---|---|
| Ein Computer | Mac, Windows oder Linux – Cloud-Builds funktionieren von jedem Betriebssystem aus |
| Ein code-Editor | Cursor (empfohlen) oder VS Code |
| Node.js | 24 LTS (neueste — herunterladen von nodejs.org) |
| Git | Um Ihren Lovable-Repo von GitHub zu klonen |
| Capgo-Konto | Kostenloser Registrierungsprozess — Cloud-Builds und Live-Updates |
Kosten (nur zum öffentlichen Veröffentlichen):
| Artikel | Kosten |
|---|---|
| Apple-Entwicklerprogramm | $99/Jahr |
| Google Play Console | $25 einmalig |
| Cursor Pro | $20/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen) |
| Capgo | Frei verfügbar; Bezahlpläne für die Produktionsgröße |
Optional (nur lokaler Simulator):
| Werkzeug | Wozu |
|---|---|
| Xcode (~15 GB, macOS nur) | iOS-Simulator auf Ihrem Mac |
| Android Studio (~1 GB + SDKs) | Android-Emulator |
Sie können beide überspringen. Der Hauptweg in dieser Anleitung baut im Cloud und installiert auf echten Geräten ohne sie.
Eine kurze Anmerkung zu Lovable und Frameworks
Bevor Sie mit code beginnen, sollten Sie wissen, dass die Art der Webanwendung, die Lovable generiert, die mobile Verpackung beeinflusst.
Für eine lange Zeit war Lovable's Standard eine React + Vite-Einseitige Anwendung (SPA). Ab Mai 2026 können brandneue Lovable-Anwendungen standardmäßig TanStack Start mit serverseitiger Rendering (SSR) verwenden SSR ist großartig für die Webanwendung, aber Capacitor umhüllt eine statistische Konstruktion – ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seinem Kern — das innerhalb der App auf dem Gerät läuft.
Eine SSR-App erwartet, dass eine Server-Seiten auf jeden Anfrage rendern. Es gibt keinen Server in einem Telefon, also willst du für Capacitor statistische, client-seitig gerenderte Ausgabe.
Was tun:
- Von vorneherein: Bitte Lovable für eine eine Single-Page-App (SPA) oder um die SSR zu umgehen, damit du eine statische
dist/Ordner. - Bereits auf TanStack Start (SSR): Konfigurieren Sie es, um vorher zu rendern oder eine statische SPA auszugeben. Die einzige schwierige Anforderung ist ein statischer Build-Ordner, der enthält
index.html. - Legacy Next.js Lovable Projekte: Verwenden Sie static export — der Ausgang geht zu
out/anstattdist/.
Unabhängig vom Framework, das Sie verwenden, zeigen Sie Capacitor auf das entsprechende Verzeichnis. Für eine Vite-SPA ist das Verzeichnis webDir Schritt 1 — Exportieren Sie Ihre liebenswerte App zu __CAPGO_KEEP_0__ dist.
Lovable hält Ihre GitHub in seinem Editor, bis Sie __CAPGO_KEEP_1__ verbinden.
Lovable keeps your code in its editor until you connect GitHub.
- Klicken Sie
- Upgrade (oben rechts), wenn erforderlich, und öffnen Sie dann (oben rechts) Git in der linken Menüzeile
- Wählen Sie GitHub, Lovable autorisieren und Ihren Account verbinden
- Lovable erstellt ein Repository und drückt Ihre App automatisch




✅ Erfolg: Besuchen github.com/YOUR-USERNAME/your-app zeigt Ihnen die code Ihres Apps.
Schritt 2 — Setzen Sie den Cursor und klonen Sie Ihr Projekt
Bevor wir mit Ihrer code lokal arbeiten können, benötigen Sie einen code Editor. Wir empfehlen Cursor, einen künstlich-intelligenzbetriebenen Editor, der Befehle für Sie im Terminal ausführen kann.
Cursor herunterladen und installieren
- Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
- Installieren Sie Cursor, indem Sie die Anweisungen im Installationstool befolgen
- Öffnen Sie Cursor, sobald er installiert ist

Cursor für die AI-Entwicklung konfigurieren
Für die beste Erfahrung konfigurieren Sie Cursor, bevor Sie beginnen:
- Ein Cursor-Plan kaufen — Während Cursor eine kostenlose Ebene bietet, bietet ein Pro-Plan (20 $/Monat) Ihnen unbeschränkte AI-Vervollständigungen, Zugriff auf Claude und GPT-4 sowie die Ausführung von Befehlen
- Cursor-Einstellungen öffnen durch Drücken von
Command+,Mac:Ctrl+,Windows:

- AI-Modelle aktivieren — Stellen Sie sicher, dass die AI-Funktionen aktiviert sind:

- Wählen Sie Ihre bevorzugte Modelle — Wählen Sie Claude oder GPT-4 für beste Ergebnisse:

- Erlauben Sie die Ausführung von Befehlen — Aktivieren Sie Cursor, um Befehle für Sie auszuführen:

Klonen Sie Ihr Repository in Cursor
- In Cursor drücken Sie
Shift+Command+P(Mac) oderShift+Ctrl+P(Windows) um das Befehlsfenster zu öffnen - Tippen Sie „clone“ und wählen Sie Git: Clone“
- Fügen Sie Ihre GitHub-Repository-URL ein:
https://github.com/YOUR-USERNAME/your-lovable-app.git - Wählen Sie einen Ordner, in dem Sie das Projekt speichern möchten

- Cursor wird Ihr Projekt klonen und öffnen

Schritt 3 — Installieren Sie Abhängigkeiten und lokal ausführen
Methode 1: Mit Cursor AI (Empfohlen)
- Öffnen Sie die AI-Taste von Cursor, indem Sie die Taste drücken:
Command+K(Mac) oderCtrl+K(Windows) - Tippen Sie die folgende Anweisung ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server
Die AI wird automatisch Ihren Betriebssystem, Node.js installieren, ausführen npm install, und starten Sie den Entwicklungs-Server mit npm run dev.

Methode 2: Manuelle Installation
Öffnen Sie das Terminal in Cursor, indem Sie die Tastenkombination Shift+Command+T (Mac) oder Shift+Ctrl+T (Windows), dann:
Für macOS:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev
Für Windows:
- Laden Sie das 24 LTS Installer von nodejs.org
- Installationsprogramm ausführen
- Terminal öffnen und ausführen:
cd your-lovable-app
npm install
npm run dev

Anwendungen laufen typischerweise auf http://localhost:8080 oder http://localhost:5173 oder
oder Ctrl + C oder
✅ oder Stoppt die Entwicklungsserver, wenn Sie bereit sind, fortzufahren.
Erfolg:
Capacitor needs a production build before you add native platforms.
React + Vite (die meisten liebenswerten Apps)
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Sie Command+K Mac) oder Ctrl+K Windows) und fragen Sie:
Configure vite.config for Capacitor mobile deployment with base './' and production build to dist
Methode 2: Manuelle Konfiguration
Bestätigen vite.config.ts verwendet eine relative Basis, so dass Assets innerhalb des nativen WebView geladen werden:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: './',
build: {
outDir: 'dist',
},
})
Erstellen und überprüfen Sie:
npm run build
Sie sollten ein Verzeichnis mit dist/ in seinem Wurzel sehen. index.html Press

Legacy Next.js Lovable-Projekte
Wenn Ihr Repository Next.js verwendet, fragen Sie Cursor:
Add a static export script to package.json and configure next.config.js for mobile export with Capacitor
Oder folgen Sie Konvertieren Sie Ihre Next.js-Anwendung in eine mobile Anwendung für die vollständige next.config Einrichtung, dann verwenden Sie webDir: 'out' in Capacitor instead of dist.
✅ Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/mit index.html.
Schritt 5 — Fügen Sie Capacitor und Native Plattformen hinzu
Capacitor umhüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien — keine Umstellung erforderlich.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:
Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms
Die AI wird nach Ihrem Anwendungsname und Bundle-ID (z.B. com.yourcompany.myapp).

Methode 2: Manuelle Installation
npm install @capacitor/core @capacitor/cli
npx cap init
Wenn gefragt wird:
| Aufforderung | Beispiel | Hinweise |
|---|---|---|
| App-Name | Mein Lieblings-App | Unter der App-Icon angezeigt |
| App-Paket-ID | com.yourcompany.myapp | Umgekehrter Domänen-Stil — kann nicht nach Veröffentlichung im App-Store geändert werden |
| Web-Asset-Verzeichnis | dist |
Verwenden Sie out für die statische Exportierung von Next.js |
Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Bündel-IDs sind weltweit einzigartig. Verwenden Sie eine rückwärtsgeordnete Domänen-ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an – Ändern Sie sie später bedeutet, dass Sie überall nachfinden und ersetzen müssen ios/ und android/ und
npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor Plattformen hinzugefügt
Konfigurieren Sie __CAPGO_KEEP_0__
Methode 1: Verwendung von Cursor AI (Empfohlen)
Update capacitor.config.ts to use dist as webDir and set up for HTTPS
Fragen Sie Cursor:« out anstatt.
Method 2: Manuelle Konfiguration
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
server: {
androidScheme: 'https',
},
};
export default config;
Build und Synchronisieren
Method 1: Mit Cursor AI (Empfohlen)
Erzähle Cursor:
Build the production web app and sync it with Capacitor platforms
Method 2: Manuelle Befehle
npm run build
npx cap sync

Dein Projekt sieht jetzt so aus:
your-lovable-app/
├── android/ ← native Android project
├── ios/ ← native iOS project
├── dist/ ← built web app (or out/ for Next.js)
├── src/ ← your Lovable app code
├── capacitor.config.ts
└── package.json
Keine CocoaPods erforderlich. Capacitor 8 verwendet automatisch Swift Package Manager für iOS-Abhängigkeiten.
✅ Erfolg: ios/ und android/ Fachordner erscheinen und der Terminal zeigt Sync finished.
Schritt 6 — Überprüfen Sie Ihr .gitignore
Capgo Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ muss eingereicht werden. Ein häufiger Fehler besteht darin, sie im Repository-Root zu ignorieren.
Bestätigen:
- Wurzel
.gitignoreignoriertnode_modulesunddist(die Cloud rekonstruiertdist(während Web-Builds) ios/undandroid/sie selbst sind nicht ignoriert
✅ Erfolg: git status zeigt ios/ und android/ bereit, zu committieren (nicht ignoriert).
Schritt 7 — Commit und Push
git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push
✅ Erfolg: Ihr GitHub-Repo zeigt die ios/ und android/ Ordner.
Schritt 8 — Erstellen Sie mit dem Capgo-Builder binäre Dateien, die für den Laden bereit sind.
Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu liefern. Capgo-Builder Der __CAPGO_KEEP_0__-Builder erstellt, signiert und kann iOS- und Android-Builds aus dem Cloud bereitstellen.
Konfigurieren Sie den 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
Speichern Sie die Signierungsanmeldeinformationen einmal. Wenn Sie Hilfe bei der Erstellung benötigen, nutzen Sie unsere kostenlosen Tools:
- iOS-Zertifikatsgenerator
- Android-Keystore-Generator
- iOS-UDID-Finder — Registrieren Sie Ihr iPhone für Entwicklungsbau.
Siehe Benennen Sie Anmeldedaten und iOS von Windows erstellen.
Eine Cloud-Build anfordern
npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release
Build-Protokolle streamen Sie in Ihrem Terminal. Mit App Store Connect konfiguriert, können iOS-Builds automatisch auf TestFlight hochgeladen werden.
Installieren Sie auf einem echten Gerät:
- iOS: TestFlight (empfohlen) oder eine Entwicklungsversion mit Ihrem Geräte-UDID registriert
- Android: Google Play-Intern-Test-Track oder eine signierte Release-APK/AAB
✅ Erfolg: Ein signierter Build ist abgeschlossen und Sie können es auf einem echten Gerät installieren.
Schritt 9 — Optional: Lokal in Xcode oder Android Studio testen
Wenn Sie ein Mac haben oder vor der Cloud-Bereitstellung Emulatortests durchführen möchten:
Für iOS
Methode 1: Mit Cursor AI (Empfohlen)
Open the iOS project in Xcode
Methode 2: Manuelle Befehlszeile
npx cap open ios

Erstmalige Xcode-Einrichtung:
- Wählen Sie ein Simulator aus dem Geräte-Auswahlfeld (z. B. iPhone 15)
- Für echte Geräte: Aktivieren Sie Automatische Signierung verwalten und wählen Sie Ihr Apple-Entwickler-Team
- Klicken Sie auf die ▶️ Play-Taste — die erste Build dauert 5–10 Minuten

Für Android
Methode 1: Verwendung von Cursor AI (Empfohlen)
Open the Android project in Android Studio
Methode 2: Manuelle Befehlsausführung
npx cap open android

Erstmalige Android Studio-Einrichtung:
- Installieren Sie fehlende SDK-Pakete, wenn angefordert
- Erstellen Sie einen Emulator im Gerätemanager (z. B. Pixel 6, API 33+)
- Klicken Sie auf den grünen ▶️-Startknopf — erste Build dauert 5–15 Minuten

Verwenden Sie lokale IDEs für den täglichen Debugging. Verwenden Sie Capgo-Builder Wenn Sie signierte Release-Dateien benötigen.
✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt Ihr Lovable-Inhalt.
Schritt 10 — Live Reload aktivieren (Entwicklung)
Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihren lokalen Entwicklungs-Server zeigen.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Erzählen Sie Cursor:
Set up live reload for Capacitor development with my local IP address
Methode 2: Manuelle Einrichtung
- Finden Sie Ihre lokale IP-Adresse:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig
- Aktualisieren Sie
capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
server: {
url: 'http://YOUR_IP_ADDRESS:5173',
cleartext: true,
},
};
export default config;
Verwenden Sie den Port 8080 oder 3000 Wenn das so ist npm run dev druckt.
- Änderungen anwenden:
npx cap copy

✅ Erfolg: Änderungen an Ihrem Web code werden auf dem Gerät oder Simulator live neu geladen.
Schritt 11 — Hinzufügen einer nativen Funktion: Die Kamera
Ein Capacitor-Plugin ermöglicht es JavaScript, auf echte Gerätefunktionen zuzugreifen. Wir fügen das Kamera-Plugin hinzu, damit Benutzer ein Foto machen können — etwas, das ein Browserfenster nicht zuverlässig tun kann.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Erzählen Sie Cursor:
Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo
Methode 2: Manuelle Installation
npm install @capacitor/camera
npx cap sync
iOS — zum Hinzufügen ios/App/App/Info.plist innerhalb der obersten Ebene <dict>:
<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>
Android — fügen Sie innerhalb <manifest> in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
import { Camera, CameraResultType } from '@capacitor/camera';
async function takePhoto() {
const photo = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri,
});
return photo.webPath;
}

Die Installation eines Plugins erfordert ein frisches natives Build durch Capgo Builder, bevor es auf Geräten funktioniert.
✅ Erfolg: Kamera code kompiliert und npx cap sync endet ohne Fehler.
Schritt 12 — Fügen Sie Capgo Live Updates hinzu
Jede native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates
Pushen Sie Änderungen an Ihrem App-Web-Schicht (HTML, CSS, JS, Bilder) über die Luft in Minuten. Installieren Sie den Updater in Ihrer ersten Veröffentlichung
npm install @capgo/capacitor-updater
npx cap sync
Damit Sie nie auf die Überprüfung warten müssen, wenn Sie eine Reparatur ausliefern müssen. capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
plugins: {
CapacitorUpdater: {
autoUpdate: true,
},
},
};
export default config;
Hinzufügen src/main.tsx):
import { CapacitorUpdater } from '@capgo/capacitor-updater';
void CapacitorUpdater.notifyAppReady();
Commit, push, and run a new Capgo Builder build so the updater SDK is in the native shell.
Commit, pushen und führen Sie einen neuen __CAPGO_KEEP_0__ Builder-Build aus, damit der Updater __CAPGO_KEEP_1__ im nativen Shell ist.
npm run build
npx @capgo/cli@latest bundle upload --channel production
Hochladen Sie Web-Bundles nach der Veröffentlichung: Capgo Live Updates docs.
Um diese Uploads automatisch durchzuführen, sobald jemand klickt Veröffentlichen Folge diesen Schritten Automatisiere Capgo Live-Updates von Lovable mit GitHub Aktionen.
✅ Erfolg: Updater-Plugin ist installiert und läuft bei Start. notifyAppReady() Schritt 13 — Statusleistenabstand mit einer Live-Update korrigieren
Auf einem echten iPhone sitzt Ihr Header möglicherweise unter
der Statusleiste (Uhr und Batterie). Moderne __CAPGO_KEEP_0__ zeichnet sich bis an die Ränder, daher muss Ihre App die sicheren Bereiche einhalten safe area insets the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect safe: env(safe-area-inset-top), -bottom, -left, -right.
Viele Lovable-Apps behandeln bereits die untere Einstellung, verwenden aber eine feste oberste Abstandspufferung (wie pt-6) ohne die oberste Einstellung.
1. Bestätigen viewport-fit=cover auf index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
2. Fix oberer Kopfzeilen — verwenden max() um Web-Abstand zu behalten und auf nichtierten Geräten zu wachsen:
/* Before */
padding-top: 1.5rem;
/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));
In Cursor oder Lovable, fragen Sie:
„Die App-Inhalte laufen unter der Statusleiste oben auf dem Mobilgerät. Fügen Sie
env(safe-area-inset-top)zur oberen Abstandspufferung jeder Seitekopfzeile hinzu, wobei der bestehende Abstand als Minimalwert bleibt.”max()3. Verschicken Sie die Reparatur über die Luft
3. Verschicken Sie die Reparatur über die Luft --- dies ist reinen CSS, keine native Rebuild erforderlich:
git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production
Schließen Sie die App auf Ihrem Gerät, öffnen Sie sie erneut, warten Sie ~15–30 Sekunden und öffnen Sie sie erneut. Der Header sollte sich unter dem Statusbar befinden — ohne App-Store-Bewertung geändert.
✅ Erfolg: Der Top-Inhalt löscht den Statusbar nach dem OTA-Bundle-Anwenden.
Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge display.
__CAPGO_KEEP_0__ edge-to-edge-Bildschirm
Schritt 14 — Vorbereitung Ihres Store-Listings
- Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Die Veröffentlichung in den öffentlichen Stores ist hauptsächlich Papierkram: App-Icon-Datei (App Icon File) — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
- Screenshots — Apple verlangt iPhone 6.9“ (1320×2868px) Screenshots
- Appname, Untertitel, Beschreibung, Schlüsselwörter
- Datenschutzrichtlinien-URL — erforderlich für beide Stores, auch für kostenlose Apps
- Altersfreigabe — Fragebogen in jedem Konsole
- Datenverarbeitungsmitteilungen — Apple-Privacy-Nährwertetiketten und Google-Datensicherheit
Methode 1: Verwendung von Cursor AI (Empfohlen)
Set up app icons and splash screens for my Capacitor app
Methode 2: Manuelle Einrichtung
npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Was bleibt vor 'live':
- Google Play geschlossene Testphase (Kontoerstellungen nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion. iOS hat kein Äquivalent.
- Für die Überprüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Testanforderungen erfüllt sind.
Siehe unser Leitfaden für die erste App-Überprüfung für die vollständige Liste.
Häufige Fehler (und wie man sie behebt)
Could not find the web assets directory: ./dist— Ausführennpm run buildvorhernpx cap addodernpx cap sync. Stellen Sie sicherwebDirincapacitor.config.tsentspricht Ihrem Framework-Ausgabe (distfür Vite,outfür Next.js statische Export).- “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen umgekehrten Domänen-Id, den Sie kontrollieren.
- iOS-Build fehlschlägt nach Änderung der Bundle-ID — Die ID in Ihrem native Projekt muss mit Apple App Store Connect übereinstimmen. Finden und ersetzen Sie über
ios/undandroid/, commit, rebuild. - Weißer Bildschirm bei der Startanzeige — Set
base: './'im Vite-Konfiguration, neu erstellen und ausführennpx cap sync. - Inhalt unter der Statusleiste — Fügen Sie
viewport-fit=coverundenv(safe-area-inset-top)Pufferhöhe (Schritt 13). - APK im Debug-Modus signieren — Google Play lehnt Debug-Builds ab. Verwenden Sie einen Release-Build, der mit Ihrem Keystore signiert ist.
- Die Bereitstellung wurde abgelehnt — Version existiert bereits — Versionsnummer oder Buildnummer in native Projekten erhöhen und neu erstellen.
Für Capgo Builder-Probleme, siehe Nativbau-Überprüfung und Live-Updates-Fehlertesten.
Zusammenfassung
Sie haben eine liebenswerte Web-Anwendung in eine native iOS- und Android-Anwendung umgewandelt – in der Cloud erstellt, ohne einen Mac, mit einer echten Kamerafunktion und einer Layoutkorrektur, die über die Luft verschickt wurde. Das ist die schwierige Arbeit erledigt.
Nächste Schritte
- Capgo Live Updates — Schiffe UI- und Kopie-Korrekturen ohne auf die Store-Überprüfung zu warten
- Capgo Builder — Automatisieren Sie die Veröffentlichung von Builds in CI
- Capgo Plugin-Verzeichnis — Biometrie, Push-Benachrichtigungen, Standort und mehr
- Verwandte Anleitungen: Base44 auf Mobilgeräte · Bolt.new auf Mobilgeräte
Registrieren Sie sich für ein kostenloses Capgo Konto um Live-Updates und cloudbasierte Builds zu aktivieren.
Ressourcen
- Lieblingsdokumentation
- Capacitor-Dokumentation
- Capgo-Native Builds
- Capgo — Live-Updates für Capacitor-Apps
- iOS von Windows aus erstellen
- Next.js-Statikexport für Mobilgeräte
Fortsetzen Sie von Convert Your Lovable App zu iOS und Android mit Capacitor
Wenn Sie __CAPGO_KEEP_0__ verwenden Konvertieren Sie Ihre liebliche App in iOS und Android mit Capacitor um native Plugin-Arbeit zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ Plugin-Verzeichnis Capgo Plugin-Verzeichnis für den Produktworkflow Capgo Plugins von __CAPGO_KEEP_1__ Capacitor Plugins von Capgo für die Implementierungsdetails for the implementation detail in Capacitor Plugins by Capgo, Capgo Native Builds für den Produktworkflow und for the product workflow in Capgo Native Builds, and __CAPGO_KEEP_0__ für Cloud-IOS-Builds ohne Mac Von __CAPGO_KEEP_2__