Einführung
Lovable Lovable ist ein AI-gestützter App-Baukasten, der Prompte in Minuten in funktionierende React-Apps verwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, auf dem Bildschirm sitzen wie jede andere native App?
Dieses Leitfaden führt durch den gesamten Weg: Export aus Lovable, Umhüllung der Web-App mit 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 Hauptweg.
- 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 | To clone your Lovable repo from GitHub |
| Capgo | __CAPGO_KEEP_0__-Konto Kostenlose Registrierung |
— Cloud-Builds und Live-Updates
| Kosten (nur zum öffentlichen Veröffentlichen): | Artikel |
|---|---|
| Kosten | Apple-Entwickler-Programm |
| 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 server-seitiger 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 innerhalb eines Telefons, also möchten Sie für Capacitor statistische, client-seitig gerenderte Ausgabe.
Was tun:
- Von vorne beginnen: Bitte Lovable für eine eine Single-Page-App (SPA) oder um die SSR zu umgehen, damit Sie 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 auf das Verzeichnis Capacitor. webDir Für eine Vite-SPA ist das Verzeichnis dist.
Schritt 1 — Exportieren Sie Ihre liebenswerte App in GitHub
Lovable hält Ihre code in seinem Editor, bis Sie GitHub verbinden.
- Öffnen Sie Ihr Lovable-Projekt im Browser
- Klicken Sie Upgrade (oben rechts) falls erforderlich, dann öffnen Git in der linken Menü
- Wählen Sie GitHub, Lovable autorisieren und Ihren Account verbinden
- Lovable erstellt einen Repository und pusht 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-intelligenzbasierten 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

Konfigurieren Sie den Cursor für die AI-Entwicklung
Für die beste Erfahrung konfigurieren Sie den 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 indem Sie
Command+,(Mac) oderCtrl+,(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) zum Öffnen des Befehlsfensters - Tippen Sie „clone“ und wählen Sie Git: Klonen“
- 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 — Abhängigkeiten installieren und lokal ausführen
Methode 1: Mit Cursor AI (Empfohlen)
- Öffnen Sie die AI-Taste von Cursor, indem Sie
Command+K(Mac) oderCtrl+K(Windows) drücken - Geben Sie die folgende Befehl 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 und 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:
- Herunterladen Sie die 24 LTS Installationsdatei von nodejs.org
- Installationsprogramm ausführen
- Terminal öffnen und ausführen:
cd your-lovable-app
npm install
npm run dev

Lovable-Anwendungen laufen typischerweise auf http://localhost:8080 oder http://localhost:5173 oder
App-Fluss Ctrl + C — verwenden Sie die Adresse, die Ihr Terminal ausgibt.
✅ Drücken Sie um die Entwicklungs-Server zu beenden, 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 laden:
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/ sehen, das index.html an seiner Wurzel enthält.

Erfolgreiche Next.js Lovable-Projekte
Wenn Ihr Repository Next.js verwendet, fragt Cursor:
Add a static export script to package.json and configure next.config.js for mobile export with Capacitor
Oder folge Konvertieren Sie Ihre Next.js-Anwendung in eine mobile App zum vollständigen next.config Setup, dann verwenden Sie webDir: 'out' in Capacitor instead of dist.
✅ Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/Eine statische Build-Ordner-Existenz ( index.html.
Schritt 5 — Fügen Sie Capacitor und Native Plattformen hinzu
Capacitor hüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien ein — 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
Der AI wird nach Ihrem Anwendungsname und context":"Seite/Bereich: Capgo-Marketing-Website. Rolle: Kurzbeschriftung oder Navigationspunkt. Anzeige in: Seite trust.astro. Nachrichtsschlüssel `und` (Und)." Bündel-ID com.yourcompany.myapp).

Methode 2: Manuelle Installation
npm install @capacitor/core @capacitor/cli
npx cap init
Wenn gefragt:
| Aufforderung | Beispiel | Hinweise |
|---|---|---|
| Anwendungsname | Mein Liebes App | Unter der App-Symbolleiste angezeigt |
| Anwendungs-ID | com.yourcompany.meineapp | Umkehr-domänen-Style — kann nicht nach Veröffentlichung im App-Store geändert werden |
| Verzeichnis für Web-Ressourcen | dist |
Verwenden Sie out zur statischen Exportierung von Next.js |
Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Paket-IDs sind global eindeutig. 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

Configure Capacitor
Methode 1: Verwendung von Cursor AI (Empfohlen)
Fragen Sie Cursor:
Update capacitor.config.ts to use dist as webDir and set up for HTTPS
Zur statischen Exportierung von Next.js, fragen Sie es, out __CAPGO_KEEP_0__
Methode 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;
Bauen und Synchronisieren
Methode 1: Mit Cursor AI (Empfohlen)
Erzähle Cursor:
Build the production web app and sync it with Capacitor platforms
Methode 2: Manuelle Befehle
npm run build
npx cap sync

Ihr 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/ Ordner erscheinen und der Terminal zeigt Sync finished.
Schritt 6 — Überprüfen Sie Ihren .gitignore
Capgo Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ muss eingereicht werden. Eine häufige Fehlhandlung ist das Ignorieren von ihnen am Repo-Root.
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 das ios/ und android/ Ordner.
Schritt 8 — Erstellen Sie mit dem Capgo-Builder binäre Dateien, die in den App-Stores bereitgestellt werden können.
Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu liefern. Capgo-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 kostenlose Tools:
- iOS-Zertifikatsgenerator
- Android-Keystore-Generator
- iOS-UDID-Finder — Registrieren Sie Ihr iPhone für die Entwicklung von Builds
Siehe Konten verwalten 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
Die Build-Protokolle fließen 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 testen in Xcode oder Android Studio
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 — Lebendes Reload (Entwicklung) aktivieren
Die Iteration beschleunigen, indem Sie die native Shell auf Ihre lokale Entwicklungs-Server zeigen.
Methode 1: Mit Cursor AI (Empfohlen)
Sagen 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 dem 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 die 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 — zu den 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;
}

Hinzufügen eines Plugins erfordert ein eine frische native 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-Bewertung. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates
Pushen Sie Änderungen an der Web-Schicht Ihres Apps (HTML, CSS, JS, Bilder) in Minuten über die Luft. Installieren Sie den Updater in Ihrer ersten Veröffentlichung
npm install @capgo/capacitor-updater
npx cap sync
Damit Sie nie auf die Bewertung 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 ausführen Sie einen neuen __CAPGO_KEEP_0__ Builder-Build, 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 korrigieren mit einer Live-Update
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 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 obere Padding-Einstellung (wie pt-6) ohne die obere 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. Fixierung der oberen Kopfzeilen — verwenden max() um das Web-Padding beizubehalten 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 Padding-Einstellung jeder Seitekopfzeile hinzu, wobei die bestehende Padding-Einstellung als Minimalwert bleibt.”max()3. Verschicken Sie die Reparatur über die Luft
3. Verschicken Sie die Reparatur über die Luft --- dies ist rein 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 etwa 15-30 Sekunden und öffnen Sie sie erneut. Der Header sollte sich unter der Statusleiste befinden — ohne App-Store-Bewertung repariert.
✅ Erfolg: Der Top-Inhalt klärt die Statusleiste nach dem Anwenden des OTA-Bundles.
Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge display.
__CAPGO_KEEP_0__ edge-to-edge-Bildschirm
Schritt 14 — Vorbereitung Ihrer Store-Liste
- Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Der Start in den öffentlichen Stores ist hauptsächlich Papierkram: App-Icon-Datei (App-Icon-Datei):
- Screenshots — Apple erfordert 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 (persönliche Konten, die nach dem 13. November 2023 erstellt wurden): 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. Stelle sicherwebDirincapacitor.config.tsentspricht Ihrem Framework-Ausgabe (distfür Vite,outfür Next.js statische Export).- “This App ID … is not available” — Bundle-IDs sind global eindeutig. Wähle einen rückwärts-domänen-Id, den du kontrollierst.
- iOS-Build fehlt nach dem Ändern der Bundle-ID — Die ID in Ihrem native Projekt muss mit Apple App Store Connect übereinstimmen. Find-and-replace über
ios/undandroid/, commit, rebuild. - Weißer Bildschirm bei der Start — Set
base: './'in der Vite-Konfiguration, neu erstellen und ausführennpx cap sync. - Inhalt unter der Statusleiste — Add
viewport-fit=coverundenv(safe-area-inset-top)Pufferhöhe (Schritt 13) - APK im Debug-Modus signiert — 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 Native Build-Troubleshooting und Live Updates debugging.
Schlussfolgerung
Sie haben eine liebenswerte Web-Anwendung in eine native iOS- und Android-Anwendung umgewandelt – in der Cloud gebaut, ohne einen Mac, mit einer echten Kamera-Funktion und einer Layout-Korrektur, die über die Luft verschickt wurde. Das ist die schwierige Arbeit erledigt.
Zukünftige Schritte
- Capgo Live Updates — Schiffe UI- und Copy-Fixes 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
- Zugehörige 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 erstellen
- Next.js-Statikexport für Mobilgeräte
Fortsetzen Sie von Convert Your Lovable App zu iOS und Android mit Capacitor
Wenn Sie bereits ein liebenswertes Entwickler-App haben Convert Your Lovable App to iOS and Android with Capacitor um native Plugin-Arbeit zu planen, mit ihr zu verbinden Capgo Plugin Directory für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor-Plugins durch Capgo Capgo nativee Native Builds für den Produktworkflow in Capgo Native Builds, und Aus iOS auf Windows erstellen für Cloud- iOS-Builds ohne einen Mac.