Zum Hauptinhalt springen
Tutorials

Konvertiere deine Lovable-App mit Capacitor in iOS- und Android-Apps

Schritt-für-Schritt-Anleitung: Exportieren Sie Ihr Lovable-Projekt, wickeln Sie es mit Capacitor ein, erstellen Sie signierte iOS- und Android-Apps in der Cloud mit Capgo Builder und veröffentlichen Sie Fixes Over-the-Air.

Wandle deine Lovable-App mit Capacitor Capgo in eine iOS- und Android-App um – Blog-Illustration

Einführung

Lovable ist ein KI-App-Builder, der Prompts in wenigen Minuten in funktionierende React-Apps verwandelt. Du kannst schnell im Browser veröffentlichen – aber was, wenn du deine App im App Store und bei Google Play haben möchtest, damit sie wie jede andere native App auf dem Homescreen sitzt?

Kurzfassung: Die Von Lovable zu iOS und Android fasst den gesamten Weg auf einem Screen zusammen: Export, Capacitor, Cloud Builds ohne Mac und Live Updates.

Dieser Guide zeigt den kompletten Weg: Export aus Lovable, Wrapping der Web-App mit Capacitor, Erstellung signierter iOS- und Android-Binaries in der Cloud mit Capgo Builder (kein Mac nötig), das Hinzufügen eines echten nativen Features und das Pushen eines Layout-Fixes over the air via Capgo Live Updates.

Wir nutzen Cursor durchgängig – die KI kann die meisten Terminal-Commands für dich ausführen, wenn du sie nicht manuell tippen möchtest.

Zeitaufwand: beim ersten Mal ca. 1–2 Stunden, vor allem für die Kontoeinrichtung und das Warten auf Cloud-Builds.

By the end, you’ll have:

  • Eine native iOS- und Android-App, die aus der Cloud gebaut wird – ohne Xcode oder Android Studio im Hauptpfad
  • Die App läuft auf einem echten Gerät (TestFlight, direkte Installation oder Play-Interner Test)
  • Eine funktionierende Kamera-Funktion, die nur eine native App bieten kann
  • Live Updates sind so konfiguriert, dass UI- und CSS-Fixes ohne Store-Review ausgeliefert werden

Voraussetzungen

Voraussetzung Details
Ein Computer Mac, Windows oder Linux – Cloud-Builds funktionieren auf jedem Betriebssystem
Ein code-Editor Cursor (empfohlen) oder VS Code
Node.js 24 LTS (aktuell – herunterladen von nodejs.org)
Git Um dein Lovable-Repo von GitHub zu klonen
Capgo Account Free signup — Cloud-Builds und Live Updates

Kosten (nur fürs öffentliche Veröffentlichen):

Punkt Kosten
Apple Developer Program $99/Jahr
die Google Play Console $25 einmalig
Cursor Pro 20 $/Monat (optional, aber für die Ausführung von AI-Befehlen empfohlen)
Capgo Kostenloses Tier verfügbar; Bezahlpläne für Produktionsskala

Optional (nur lokaler Simulator):

Tool Warum
Xcode (~15 GB, nur macOS) iOS Simulator auf deinem Mac
Android Studio (~1 GB + SDKs) Android-Emulator

Du kannst beides überspringen. Der Hauptweg in diesem Guide baut in der Cloud und installiert auf echten Geräten, ohne sie.

Kurzer Hinweis zu Lovable und Frameworks

Bevor du code anfasst, beachte: die Art der Web-App, die Lovable generiert, beeinflusst das Mobile-Wrapping.

Lange Zeit war der Standard von Lovable eine React + Vite Single-Page-App (SPA). Seit Mai 2026 können brandneue Lovable-Apps auch TanStack Start mit Server-Side Rendering (SSR) standardmäßig. SSR ist super fürs Web, aber Capacitor verpackt einen statischen Build — einen Ordner aus HTML, CSS und JavaScript mit einer index.html im Root-Verzeichnis — der mit der App auf dem Gerät ausgeliefert wird.

Eine SSR-App braucht einen Server, der Seiten bei jeder Anfrage rendert. In einem Smartphone steckt kein Server, also willst du für Capacitor statischen, clientseitig gerenderten Output.

So gehst du vor:

  • Neu anfangen: Frag Lovable nach einer Single-Page-App (SPA) oder überspringe SSR und erhalte einen statischen dist/ Ordner.
  • Bereits auf TanStack Start (SSR): Konfiguriere es für Pre-Rendering oder als statische SPA. Die einzige harte Voraussetzung ist ein statischer Build-Ordner, der enthält index.html.
  • Legacy-Next.js-Lovable-Projekte: Nutzt statischer Export — die Ausgabe erfolgt in out/ anstatt dist/.

Welches Framework du auch nutzt, weise Capacitor auf webDir diesen Ordner. Bei einer Vite-SPA ist das der Ordner dist.

Schritt 1 — Exportiere deine Lovable-App nach GitHub

Lovable speichert deinen code in seinem Editor, bis du GitHub verbindest.

  1. Öffne dein Lovable-Projekt im Browser
  2. Klicken Upgrade (oben rechts) bei Bedarf, dann öffne Git im linken Menü
  3. Wähle GitHub, Lovable autorisieren und Ihr Konto verknüpfen
  4. Lovable erstellt ein Repository und pusht Ihre App automatisch

Lovable.dev GitHub-Verbindung

Lovable.dev GitHub-Autorisierung

Lovable.dev-Repository-Einrichtung

Lovable.dev-Projekt exportiert

✅ Erfolg: Aufruf von github.com/YOUR-USERNAME/your-app zeigt die code Ihrer App an.

Schritt 2 — Cursor einrichten und dein Projekt klonen

Bevor wir Ihre code lokal bearbeiten können, benötigen Sie einen code-Editor. Wir empfehlen Cursor, ein KI-gestützter Editor, der Terminal-Befehle für dich ausführen kann.

Cursor herunterladen und installieren

  1. Besuchen cursor.sh und lade die Version für dein Betriebssystem herunter
  2. Installiere Cursor über den Installationsassistenten
  3. Öffne Cursor nach der Installation

Cursor starten

Cursor für die KI-Entwicklung konfigurieren

Für das beste Erlebnis: Konfiguriere Cursor vor dem Start:

  1. Cursor-Plan kaufen — Cursor bietet einen kostenlosen Tarif an, während der Pro-Plan (20 $/Monat) unbegrenzte AI-Completions, Zugriff auf Claude und GPT-4 sowie die Befehlsausführung ermöglicht
  2. Cursor-Einstellungen öffnen durch Drücken von Command+, (Mac) oder Ctrl+, (Windows)

Cursor-Einstellungen

  1. AI-Modelle aktivieren — Stelle sicher, dass die AI-Features aktiviert sind:

Modelle zulassen

  1. Bevorzugtes Modell auswählen — Wähle Claude oder GPT-4 für die besten Ergebnisse:

Cursor-Modell auswählen

  1. Befehlsausführung erlauben — Ermöglichen Sie es Cursor, Befehle für Sie auszuführen:

Befehle ausführen erlauben

Dein Repository in Cursor klonen

  1. Drücken Sie in Cursor Shift+Command+P (Mac) oder Shift+Ctrl+P (Windows), um die Befehlspalette zu öffnen
  2. Geben Sie „clone“ ein und wählen Sie Git: Clone“
  3. Fügen Sie Ihre GitHub-Repository-URL ein: https://github.com/YOUR-USERNAME/your-lovable-app.git
  4. Ordner auswählen, in dem das Projekt gespeichert werden soll

In Cursor klonen

  1. Cursor kloniert und öffnet Ihr Projekt

In Cursor öffnen

Schritt 3 — Dependencies installieren und lokal starten

  1. Öffnen Sie den KI-Tab von Cursor, indem Sie drücken Command+K (Mac) oder Ctrl+K (Windows)
  2. Gib folgenden Befehl ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

Die KI erkennt automatisch dein OS, installiert Node.js, führt npm installaus und startet den Dev-Server mit npm run dev.

Homebrew installieren

Methode 2: Manuelle Installation

Öffne das Terminal in Cursor durch Drücken von 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:

  1. Laden Sie 24 LTS Installation von nodejs.org
  2. Starte den Installer
  3. Öffne das Terminal und führe aus:
cd your-lovable-app
npm install
npm run dev

Lovable.dev-App läuft lokal

Lovable-Apps laufen normalerweise auf http://localhost:8080 oder http://localhost:5173 — nutze einfach die Adresse aus deinem Terminal.

Drücken Ctrl + C um den Dev-Server zu stoppen, wenn du weitermachen willst.

✅ Erfolg: Deine App öffnet sich im Browser, und die UI funktioniert.

Schritt 4 — Den statischen Production-Build vorbereiten

Capacitor benötigt einen Production Build, bevor du native Plattformen hinzufügst.

React + Vite (die meisten Lovable-Apps)

Drücken Command+K (Mac) oder Ctrl+K (Windows) und frage:

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, damit Assets in der nativen WebView geladen werden:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Build und Verifizierung:

npm run build

Du solltest einen dist/ Ordner mit index.html im Root-Verzeichnis.

Lovable.dev: statischer Export erfolgreich

Legacy-Lovable-Projekte mit Next.js

Wenn dein Repo Next.js nutzt, frage Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

Oder folge Konvertiere deine Next.js App in eine Mobile App für die vollständige next.config Setup, dann nutze webDir: 'out' in Capacitor statt dist.

✅ Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/) mit index.html.

Schritt 5 — Capacitor und Native Plattformen hinzufügen

Capacitor kapselt deine Web-App in echte iOS- und Android-Shell — ohne Rewrite.

Drücken Command+K (Mac) oder Ctrl+K (Windows) und frage:

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

Die KI fragt nach deinem App-Namen und Bundle-ID (z. B. com.yourcompany.myapp).

Capacitor-Initialisierung

Methode 2: Manuelle Installation

npm install @capacitor/core @capacitor/cli
npx cap init

Bei der Eingabeaufforderung:

Prompt Beispiel Notizen
App-Name Meine Lovable App Wird unter dem App-Symbol angezeigt
App-Paket-ID com.yourcompany.myapp Reverse-Domain-Stil — cannot change after store publish
Verzeichnis für Web-Assets dist Nutzt out für Next.js-Static-Export

Wähle eine Package ID, die dir tatsächlich gehört. Bundle IDs sind global eindeutig. Verwende von Anfang an eine Reverse-Domain-ID basierend auf einer Domain, die du kontrollierst – ein späterer Wechsel bedeutet Suchen und Ersetzen in ios/ und android/ und neu bauen.

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor Plattformen hinzugefügt

Capacitor konfigurieren

Cursor fragen:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Für Next.js Static Export, bitte darum, es zu verwenden out stattdessen.

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;

Build und Sync

Sag Cursor:

Build the production web app and sync it with Capacitor platforms

Methode 2: Manuelle Befehle

npm run build
npx cap sync

Capacitor Sync abgeschlossen

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 nötig. Capacitor 8 verwendet automatisch Swift Package Manager für iOS-Abhängigkeiten.

✅ Erfolg: ios/ und android/ Ordner erscheinen und das Terminal zeigt Sync finished.

Schritt 6 — Prüfe dein .gitignore

Capgo Builder kompiliert aus deinem Git-Repository, daher ios/ und android/ muss committet werden. Ein häufiger Fehler ist, sie im Repo-Root zu ignorieren.

Bestätigen:

  • Root .gitignore ignoriert node_modules und dist (die Cloud baut dist bei Web-Builds neu)
  • ios/ und android/ sind selbst es nicht ignoriert

✅ Erfolg: git status zeigt ios/ und android/ bereit zum Commit (nicht ignoriert).

Schritt 7 — Commit und Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Erfolg: Dein GitHub-Repo zeigt die ios/ und android/ Ordner.

Schritt 8 — Store-fertige Binaries mit Capgo Builder erstellen

Du brauchst keinen Mac oder lokale Xcode/Android Studio-Pipeline, um zu veröffentlichen. Capgo Builder kompiliert, signiert und kann iOS- und Android-Builds aus der Cloud einreichen.

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

Speichere deine Signing-Credentials einmalig. Nutze unsere kostenlosen Tools, falls du Hilfe bei der Generierung brauchst:

Siehe Credentials verwalten und iOS von Windows aus bauen.

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-Logs werden in dein Terminal gestreamt. Mit konfiguriertem App Store Connect werden iOS-Builds automatisch zu TestFlight hochgeladen.

Installation auf einem echten Gerät:

  • iOS: TestFlight (empfohlen) oder ein Development Build mit registrierter Device-UDID
  • Android: Google Play Internal Testing Track oder ein signiertes Release-APK/AAB

✅ Erfolg: Ein signierter Build ist fertig und kann auf einem echten Gerät installiert werden.

Schritt 9 — Optional: Lokal in Xcode oder Android Studio testen

Wenn du einen Mac hast oder vor Cloud-Builds mit Emulatoren testen willst:

Für iOS

Open the iOS project in Xcode

Methode 2: Manueller Befehl

npx cap open ios

Xcode öffnet Lovable-Projekt

Erstmalige Xcode-Einrichtung:

  1. Simulator aus dem Geräte-Dropdown auswählen (z. B. iPhone 15)
  2. Für echte Geräte: aktivieren Signierung automatisch verwalten und Apple-Developer-Team auswählen
  3. ▶️ Play-Button klicken — der erste Build dauert 5–10 Minuten

Lovable-App läuft auf iOS

Für Android

Open the Android project in Android Studio

Methode 2: Manueller Befehl

npx cap open android

Android Studio öffnet das Lovable-Projekt

Erstmalige Einrichtung von Android Studio:

  1. Fehlende SDK-Pakete installieren, falls dazu aufgefordert.
  2. Emulator im Device Manager erstellen (z. B. Pixel 6, API 33+)
  3. Klicke auf den grünen ▶️ Run-Button — der erste Build dauert 5–15 Minuten

Lovable App läuft auf Android

Nutze lokale IDEs für das tägliche Debugging. Nutze Capgo Builder wenn du signierte Release-Binaries brauchst.

✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt deinen Lovable-Content.

Schritt 10 — Live Reload aktivieren (Development)

Beschleunige die Iteration, indem du den Native Shell auf deinen lokalen Dev-Server richtest.

Sag Cursor:

Set up live reload for Capacitor development with my local IP address

Methode 2: Manuelles Setup

  1. Ermitteln Sie Ihre lokale IP-Adresse:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. Update 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;

Port verwenden 8080 oder 3000 falls das so ist npm run dev ausgibt.

  1. Änderungen anwenden:
npx cap copy

Live Reload aktiviert

✅ Erfolg: Edits to your web code hot-reload on the device or simulator.

Schritt 11 — Ein natives Feature hinzufügen: Die Kamera

Ein Capacitor-Plugin ermöglicht JavaScript, echte Gerätefunktionen aufzurufen. Wir fügen das Camera-Plugin hinzu, damit Nutzer ein Foto machen können – etwas, das ein Browser-Tab nicht zuverlässig kann.

Sag 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 — hinzufügen zu ios/App/App/Info.plist innerhalb der obersten Ebene <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — hinzufügen innerhalb <manifest> in einem 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;
}

Native Features hinzugefügt

Das Hinzufügen eines Plugins erfordert einen frischen Native Build über Capgo Builder, bevor er auf Geräten funktioniert.

✅ Erfolg: Camera code kompiliert und npx cap sync endet ohne Fehler.

Schritt 12 — Capgo Live Updates hinzufügen

Jede native Änderung durchläuft normalerweise die App-Store-Prüfung. Capgo Live Updates Änderungen an der Web-Ebene deiner App (HTML, CSS, JS, Bilder) in Minuten per Live Update ausliefern.

Updater in deinem ersten Release installieren damit du nie auf eine Review warten musst, wenn du ein Fix veröffentlichen musst.

npm install @capgo/capacitor-updater
npx cap sync

Hinzufügen zu 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;

In deinem App-Entry initialisieren (z. B. src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commit, push und führe einen neuen Capgo Builder Build aus, damit der Updater SDK im nativen Shell enthalten ist.

Web-Bundles nach dem Launch hochladen:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Siehe Capgo Live Updates Docs.

Um diesen Upload zu automatisieren, jedes Mal wenn jemand auf Veröffentlichen in Lovable klickt, folge Capgo Live Updates von Lovable mit GitHub Actions automatisieren.

✅ Erfolg: Das Updater-Plugin ist installiert und notifyAppReady() wird beim Start ausgeführt.

Schritt 13 – Statusbar-Abstand mit einem Live Update beheben

Auf einem echten iPhone kann sich dein Header über unter die Statusleiste (Uhr und Akku) legen. Moderne Capacitor-Apps zeichnen randlos, daher muss deine App die Safe-Area-Insets: env(safe-area-inset-top), -bottom, -left, -right.

Viele Lovable-Apps behandeln bereits das untere Inset, verwenden aber feste obere Padding-Werte (wie pt-6) ohne das obere Inset.

1. Prüfen viewport-fit=cover in einem index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Obere Header fixen — verwende max() um das Web-Padding beizubehalten und auf Geräten mit Notch zu skalieren:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Frage in Cursor oder Lovable:

„Der App-Inhalt wird auf Mobilgeräten unter der Statusleiste am oberen Rand angezeigt. Füge“ env(safe-area-inset-top) zum oberen Padding jedes Seitenheaders mittels max(), keeping the existing padding as the minimum.”

3. Fix via OTA ausrollen — das ist reines CSS, kein Native Build nötig:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Beende die App auf deinem Gerät vollständig, öffne sie neu, warte ~15–30 Sekunden und öffne sie erneut. Der Header sollte dann unter der Statusleiste sitzen — behoben, ohne Store-Review.

✅ Erfolg: Top-Content weicht der Statusleiste aus, sobald das OTA-Bundle angewendet ist.

Für tiefergehende Layout-Arbeiten siehe @capgo/tailwind-capacitor und Capacitor Edge-to-Edge-Display.

Schritt 14 — Store-Listing vorbereiten

Deine App ist gebaut, installierbar und du kannst Instant Updates pushen. Der Start in den öffentlichen Stores ist größtenteils Papierkram:

  • App-Icon — 1024×1024px für iOS (ohne Transparenz), 512×512px für Google Play
  • Screenshots — Apple verlangt iPhone-6.9″-Screenshots (1320×2868px)
  • App-Name, Untertitel, Beschreibung, Keywords
  • URL zur Datenschutzerklärung — von beiden Stores erforderlich, auch für kostenlose Apps
  • Altersfreigabe — Fragebogen in jeder Konsole
  • Angaben zur Datenerhebung — Apple Privacy Nutrition Labels und Google Data Safety
Set up app icons and splash screens for my Capacitor app

Methode 2: Manuelles Setup

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

App-Assets generiert

Was noch vor dem „Live-Gang“ fehlt:

  1. Google Play Closed Testing (persönliche Konten, die nach dem 13.11.2023 erstellt wurden): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor dem Produktionszugang. iOS hat kein Äquivalent.
  2. Zur Prüfung einreichen — Apple ca. 3–5 Tage, Google ca. 3–7 Tage, nachdem die Testanforderungen erfüllt sind.

Siehe unsere Guide für die erste App-Review für die vollständige Checkliste.

Häufige Fehler (und wie man sie behebt)

  • Could not find the web assets directory: ./dist — Führe npm run build bevor npx cap add oder npx cap sync. Make sure webDir in einem capacitor.config.ts mit dem Framework-Output übereinstimmt (dist für Vite, out für Next.js Static Export).
  • „Diese App-ID … ist nicht verfügbar“ — Bundle-IDs sind global eindeutig. Wähle eine Reverse-Domain-ID, die dir gehört.
  • iOS-Build schlägt nach Änderung der Bundle-ID fehl — Die ID in deinem nativen Projekt muss mit Apple App Store Connect übereinstimmen. Nutze Suchen & Ersetzen in ios/ und android/, committen und neu bauen.
  • White Screen beim Start — Setze base: './' in der Vite-Config, baue neu und starte npx cap sync.
  • Inhalt unter der Statusleiste — Hinzufügen viewport-fit=cover und env(safe-area-inset-top) Padding (Schritt 13).
  • APK im Debug-Modus signiert — Google Play lehnt Debug-Builds ab. Nutze einen Release-Build, der mit deinem Keystore signiert ist.
  • Deployment abgelehnt — Version existiert bereits — Version/Build-Nummer in den nativen Projekten erhöhen und neu bauen.

Bei Problemen mit dem Capgo Builder siehe Native Build Troubleshooting und Live Updates Debugging.

Fazit

Du hast eine Lovable-Web-App zu nativen iOS- und Android-Apps gemacht – im Cloud-Build ohne Mac, mit echter Kamera-Funktion und einem Layout-Fix, der Over-the-Air ausgerollt wurde. Der schwierige Teil ist erledigt.

Nächste Schritte

Erstelle ein kostenloses Capgo-Konto um Live Updates und Cloud-native Builds zu aktivieren.

Ressourcen

Häufig gestellte Fragen

Wie konvertiere ich eine Lovable-App in eine mobile App?

Exportiere das Lovable-Projekt nach GitHub, baue es als statische Web-App (die meisten Lovable-Apps nutzen React und Vite), füge Capacitor mit den Plattformen iOS und Android hinzu, synchronisiere und baue dann store-fertige Binaries. Dieser Leitfaden führt durch jeden Schritt und Capgo Build können iOS- und Android-Apps in der Cloud kompilieren und signieren.

Kann ich ein Lovable-Projekt in eine App für den App Store und Google Play verwandeln?

Ja. Capacitor kapselt den Lovable-Web-Build in eine native iOS- und Android-Shell, sodass Sie eine Codebase beibehalten und native Funktionen wie die Kamera hinzufügen können. Nach dem ersten Store-Release Capgo Live Updates können Sie Web-Änderungen veröffentlichen, ohne auf eine neue Prüfung zu warten.

Weiter mit: Lovable-App für iOS und Android konvertieren mit Capacitor

Wenn du es nutzt Konvertiere deine Lovable-App mit Capacitor in iOS- und Android-Apps Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Capgo Native Builds optimieren für den Produkt-Workflow in Capgo Native Builds, und iOS von Windows aus bauen für Cloud-iOS-Builds ohne Mac.

Live-Updates für Capacitor-Apps

Wenn ein Bug im Web-Layer live ist, liefere den Fix über Capgo aus, statt Tage auf die App-Store-Freigabe zu warten. Nutzer bekommen das Update im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Neues aus unserem Blog

Capgo gibt dir die besten Insights, um eine wirklich professionelle Mobile App zu erstellen.