Convert Your Lovable App to iOS and Android with Capacitor

Introduzione

Lovable è un costruttore di app AI che trasforma le richieste in app React funzionanti in pochi minuti. Puoi distribuire velocemente nell'ambiente di sviluppo — ma cosa succede se vuoi la tua app sullo Store App e Google Play, seduta sulla schermata principale come ogni altra app nativa?

Questa guida guida attraverso l'intero percorso: esporta da Lovable, avvolgi l'app web con Capacitorcostruisci binari iOS e Android firmati in cloud con Capgo Builder (nessuna Mac richiesta), aggiungi una vera funzione nativa e invia un correttivo di layout in rete con Capgo Live Updates.

Utilizziamo Cursor attraverso — il suo AI può eseguire la maggior parte dei comandi del terminale per te se preferisci non scriverli manualmente.

Tempo richiesto: circa 1-2 ore la prima volta, per lo più configurazione dell'account e attesa dei build in cloud.

Al termine, avrai:

• Un'app nativa iOS e Android costruita dalla cloud — senza Xcode o Android Studio sulla strada principale
• L'applicazione in esecuzione su un dispositivo reale (TestFlight, installazione diretta o testing interno di Play)
• Una funzione di camera funzionante che solo un'app nativa può offrire
• Aggiornamenti in tempo reale configurati in modo che le correzioni UI e CSS siano inviate senza la revisione dello store

Prerequisiti

— costruzioni cloud e Aggiornamenti in tempo reale

Facoltativo (solo simulatore locale):

Potete saltare entrambi. La principale via in questa guida costruisce in cloud e installa su dispositivi reali senza di loro.

Una nota rapida su Lovable e framework

Prima di toccare code, sapete che il tipo di app web generata da Lovable influenza il wrapping mobile.

Per molto tempo, il default di Lovable era una app singola di pagina (SPA) React + Vite. A partire da maggio 2026, le nuove app Lovable possono utilizzare TanStack con rendering server-side (SSR) di default. Il SSR è ottimo per il web, ma __CAPGO_KEEP_0__ avvolge un by default. SSR is great for the web, but Capacitor wraps a – una cartella di HTML, CSS e JavaScript con un folder di HTML, CSS e JavaScript con un index.html al suo interno — che si trova all'interno dell'app sul dispositivo.

Un'app SSR aspetta un server per rendere le pagine su ogni richiesta. Non c'è un server all'interno di un telefono, quindi per Capacitor vuoi output statico, client-renderizzato.

Cosa fare:

• Iniziare da zero: Chiedi a Lovable una applicazione a pagina singola (SPA) o saltare la SSR per ottenere un statico dist/ cartella.
• Già su TanStack Start (SSR): Configuralo per pre-renderizzare o produrre una SPA statica. L'unica richiesta difficile è una cartella di build statica contenente index.html.
• Progetti Lovable Legacy Next.js: Usa esportazione statica — l'output va a out/ al posto di dist/.

Sia che utilizzi qualsiasi framework, puntate Capacitor’s webDir a quel cartella. Per una SPA Vite, quella cartella è dist.

Passo 1 — Esporta la tua App amata in GitHub

Lovable mantiene la tua code nel suo editor fino a quando non connetti GitHub.

1. Apre il tuo progetto Lovable nel browser
2. Clicca Aggiorna (in alto a destra) se necessario, poi apri Git in il menu a sinistra
3. Scegli GitHub, autorizza Lovable e collega il tuo account
4. Lovable crea un repository e sposta automaticamente il tuo app

✅ Successo: Visita github.com/YOUR-USERNAME/your-app mostra la tua app's code.

Passo 2 — Configura il cursore e clona il tuo progetto

Prima di poter lavorare con la tua code localmente, avrai bisogno di un code editor. Consigliamo Cursor, un editor basato su AI che può eseguire comandi del terminale per te.

Scarica e installa Cursor

1. Visita cursor.sh e scarica la versione per il tuo sistema operativo
2. Installa Cursor seguendo il wizard di installazione
3. Una volta installato, apri Cursor

Configura il cursore per lo sviluppo AI

Per l'esperienza migliore, configura il cursore prima di iniziare:

1. Acquista un piano per il cursore — Sebbene il cursore offra un livello gratuito, un piano Pro ($20/mese) ti offre completamenti AI illimitati, accesso a Claude e GPT-4, e esecuzione di comandi
2. Apre le impostazioni del cursore Premendo Command+, (Mac) o Ctrl+, (Windows)

3. Abilita i modelli AI — Assicurati che le funzionalità AI siano abilitate:

4. Scegli il Modello Preferito — Scegli Claude o GPT-4 per i migliori risultati:

5. Consenti l'Esecuzione dei Comandi — Abilita il Cursor per eseguire i comandi per te:

Copia il tuo Repository nel Cursor

1. In Cursor, premi Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) per aprire la palette dei comandi
2. Inserisci "clone" e seleziona Git: Clone
3. Incolla l'URL del tuo repository GitHub: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Scegli una cartella in cui desideri salvare il progetto

5. Cursor clonerà e aprirà il tuo progetto

Passo 3 — Installa le dipendenze e esegui localmente

Metodo 1: Utilizzando Cursor AI (Consigliato)

1. Apri la scheda AI di Cursor premendo Command+K (Mac) o Ctrl+K (Windows)
2. Digita il seguente comando:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

L'AI rileverà automaticamente il tuo sistema operativo, installerà Node.js e eseguirà npm install, e avvia il server di sviluppo con npm run dev.

Metodo 2: Installazione manuale

Apre la finestra di comando in Cursor premendo Shift+Command+T (Mac) o Shift+Ctrl+T (Windows), quindi:

Per 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

Per Windows:

1. Scarica l'installer di 24 LTS da nodejs.org
2. Esegui l'installatore
3. Apre il terminale e digita:

cd your-lovable-app
npm install
npm run dev

Gli app Lovable tipicamente eseguiscono su http://localhost:8080 o http://localhost:5173 Oppure

— utilizza l'indirizzo che il tuo terminale stampa. Ctrl + C Premi

✅ per fermare il server di sviluppo quando sei pronto a continuare. Successo:

L'app si apre nel browser con l'interfaccia utente funzionante.

Capacitor needs a production build before you add native platforms.

React + Vite (le maggiori app amabili)

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Tasti Command+K (Mac) o Ctrl+K (Windows) e chiedi:

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

Metodo 2: Configurazione manuale

Conferma vite.config.ts utilizza una base relativa quindi i file caricano all'interno della WebView nativa:

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

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

Costruisci e verifica:

npm run build

Devi vedere una dist/ cartella con index.html a sua radice.

Progetti Next.js Legacy

Se il tuo repository utilizza Next.js, chiedi a Cursor:

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

O segui Converti la tua App Next.js in Mobile per la configurazione completa, poi utilizza next.config in __CAPGO_KEEP_0__ al posto di webDir: 'out' in Capacitor instead of dist.

✅ Esiste una cartella di build statica ( odist/ con out/con index.html.

Passo 5 — Aggiungi Capacitor e piattaforme native

Capacitor avvolge la tua app web in vere gusci iOS e Android — non è necessario alcuna riscrittura.

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Tasti Command+K (Mac) o Ctrl+K (Windows) e chiedi:

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

L'AI chiederà il nome della tua applicazione e context: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve UI o elemento di navigazione. Visto in: pagina trust.astro. Chiave messaggio `e` (E). ID bundle com.yourcompany.myapp).

Metodo 2: Installazione Manuale

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

Quando viene richiesto:

Scegli un ID del pacchetto che effettivamente possiedi. Il ID del pacchetto è univoco a livello globale. Utilizza un ID a dominio inverso basato su un dominio che controlli fin dall'inizio — modificarlo in seguito significa sostituire in tutti i file ios/ e android/ context: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve di navigazione o elemento UI. Visualizzato in: pagina trust.astro. Chiave di messaggio `e` (E).

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

Configure Capacitor

Configura

Metodo 1: Utilizzando Cursor AI (Consigliato)

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

Domanda a Cursor: per l'esportazione statica di Next.js, chiedigli di utilizzare out Ecco.

Metodo 2: Configurazione Manuale

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;

Costruisci e sincronizza

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Diga a Cursor:

Build the production web app and sync it with Capacitor platforms

Metodo 2: Comandi Manuali

npm run build
npx cap sync

Ora il tuo progetto assomiglia a questo:

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

Non è necessario CocoaPods. Capacitor 8 utilizza il gestore di pacchetti Swift per le dipendenze iOS automaticamente.

✅ Successo: ios/ e android/ cartelle appaiono e il terminale mostra Sync finished.

Passo 6 — Controlla il tuo .gitignore

Capgo Il costruttore di Capgo compila dal tuo repository Git, quindi ios/ e android/ deve essere commesso. Un errore comune è ignorarle nella radice del repository.

Conferma:

• Radice .gitignore ignora node_modules e dist (il cloud ricostruisce dist durante le costruzioni web)
• ios/ E e android/ si prendono cura di se stesse no ignorate

✅ Successo: git status mostra ios/ e android/ pronte a commitare (non ignorate).

Passo 7 — Commita e Pubblica

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

✅ Successo: il tuo GitHub repo mostra il ios/ e android/ cartelle.

Step 8 — Build Store-Ready Binaries with Capgo Builder

Non hai bisogno di un Mac o di una pipeline locale Xcode/Android Studio per distribuire. Capgo Builder Capgo Builder

Set up 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

Capgo Builder

• compila, firma e può inviare build iOS e Android dal cloud.
• Configura Capgo Builder
• Salva le credenziali di firma una volta sola. Utilizza le nostre strumenti gratuiti se hai bisogno di aiuto per generarle: Generatore di certificato iOS

Generatore di keystore Android gestione delle credenziali e Costruisci iOS da Windows.

Richiedi un build cloud

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

Il flusso dei log di build si visualizza nel tuo terminale. Con App Store Connect configurato, i build iOS possono caricare automaticamente su TestFlight.

Installa su un dispositivo reale:

• iOS: TestFlight (consigliato) o un build di sviluppo con il tuo dispositivo UDID registrato
• Android: Google Play internal testing track o un APK/AAB firmato

✅ Successo: Un build firmato è stato completato e puoi installarlo su un dispositivo reale.

Step 9 — Facoltativo: Test Locale in Xcode o Android Studio

Se hai un Mac o desideri testare l'emulatore prima delle costruzioni cloud:

Per iOS

Metodo 1: Utilizzando Cursor AI (Consigliato)

Open the iOS project in Xcode

Metodo 2: Comando Manuale

npx cap open ios

Prima configurazione di Xcode:

1. Scegli un simulatore dal menu a discesa dei dispositivi (ad esempio iPhone 15)
2. Per dispositivi reali: abilita La gestione automatica della firma e seleziona il tuo team di sviluppatore Apple
3. Clicca il pulsante ▶️ Play — la prima costruzione richiede 5–10 minuti

Per Android

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Open the Android project in Android Studio

Metodo 2: Comando manuale

npx cap open android

Prima configurazione di Android Studio:

1. Installa i pacchetti mancanti SDK se richiesto
2. Crea un emulatore nel Gestore dispositivi (ad esempio Pixel 6, API 33+)
3. Clicca sul pulsante di esecuzione verde ▶️ — la prima compilazione richiede 5-15 minuti

Utilizza gli IDE locali per la debuggazione di tutti i giorni. Utilizza Capgo Builder quando avete bisogno di binari di rilascio firmati.

✅ Successo: L'app si apre nel simulatore o nell'emulatore mostrando il tuo contenuto Lovable.

Passo 10 — Abilita Live Reload (Sviluppo)

Risparmia tempo di iterazione puntando la shell nativa al tuo server di sviluppo locale.

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Dite a Cursor:

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

Metodo 2: Configurazione manuale

1. Trova l'indirizzo IP locale:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Aggiorna 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;

Utilizza il portale 8080 o 3000 se è questo che npm run dev stampa.

3. Applica modifiche:

npx cap copy

✅ Successo: Le modifiche al tuo web code vengono ricolate in tempo reale sul dispositivo o sul simulatore.

Fase 11 — Aggiungi una funzionalità nativa: La fotocamera

Un Capacitor plugin consente a JavaScript di chiamare funzionalità reali del dispositivo. Aggiungeremo il plugin della fotocamera in modo che gli utenti possano scattare una foto — qualcosa che una scheda del browser non può fare in modo affidabile.

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Diga a Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Metodo 2: Installazione manuale

npm install @capacitor/camera
npx cap sync

IOS — aggiungi a ios/App/App/Info.plist all'interno del livello superiore <dict>:

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

Android — aggiungi all'interno <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;
}

Aggiungere un plugin richiede una costruzione nativa fresca tramite Capgo Builder prima che funzioni sui dispositivi.

✅ Successo: Camera code compila e npx cap sync termina senza errori.

Step 12 — Aggiungi Capgo Aggiornamenti in Tempo Reale

Tutti i cambiamenti nativi normalmente vanno in rassegna dell'app store. Capgo Aggiornamenti in Tempo Reale context: Pagina/Area: Pagina prodotti per gli aggiornamenti in tempo reale. Ruolo: Etichetta breve per l'elemento di navigazione o per l'interfaccia utente. Visualizzato in: pagina live-update.astro. Preservare i termini di prodotto e marchio Capgo e i termini tecnici esattamente. Chiave del messaggio `live_update_hero_badge` (Badge Eroe Aggiornamento in Tempo Reale).

invia cambiamenti alla layer web dell'app (HTML, CSS, JS, immagini) in pochi minuti. Installa l'aggiornatore nella tua prima versione.

npm install @capgo/capacitor-updater
npx cap sync

così non resti mai bloccato ad aspettare la rassegna quando hai bisogno di spedire un fix. 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;

Aggiungi a 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, invia e esegui una nuova __CAPGO_KEEP_0__ Costruttore build in modo che l'aggiornatore __CAPGO_KEEP_1__ sia nel shell nativo.

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

Carica i bundle web dopo il lancio: Vedi anche: Capgo Aggiornamenti in Tempo Reale - Documentazione.

To automatizzare questo upload ogni volta che qualcuno clicca Pubblica Pubblica Segui questi passaggi per automatizzare le Capgo Aggiornamenti in tempo reale da Lovable con GitHub Azioni.

✅ Successo: L'aggiornamento del plugin è installato e notifyAppReady() si esegue all'avvio.

Fase 13 — Correggi lo spazio della barra dello stato con un Aggiornamento in tempo reale

Sul tuo iPhone reale, il tuo header potrebbe essere posizionato sotto la barra dello stato (orologio e batteria). Il moderno Capacitor disegna fino all'orlo, quindi il tuo app deve rispettare gli insetti di area sicura safe area insets: env(safe-area-inset-top), -bottom, -left, -right.

Molte app Lovable già gestiscono l'insetto inferiore, ma utilizzano un padding superiore fissato (come pt-6) senza l'insetto superiore.

1. Conferma viewport-fit=cover in index.html:

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

2. Correggi i titoli superiori — utilizza max() per mantenere il padding web e aumentare su dispositivi con notch:

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

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

In Cursor o Lovable, chiedi:

“Il contenuto dell'app scorre sotto la barra di stato in alto su mobile. Aggiungi env(safe-area-inset-top) al padding superiore di ogni intestazione di pagina utilizzando max(), mantenendo il padding esistente come minimo.”

3. Invia la correzione via aria --- questo è pura CSS, nessuna ricostruzione nativa necessaria:

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

Chiudi l'app sul tuo dispositivo, riaprila, aspetta ~15–30 secondi, e aprila nuovamente. Il header dovrebbe apparire sotto la barra dello stato — risolto senza revisione dello store.

✅ Successo: Contenuto superiore elimina la barra dello stato dopo l'applicazione del bundle OTA.

Per lavori di layout più approfonditi, vedi @capgo/tailwind-capacitor e Capacitor edge-to-edge display.

__CAPGO_KEEP_0__ schermo da bordo a bordo

Passo 14 — Prepara la tua lista dello store

• L'app è stata creata, è installabile e puoi inviare aggiornamenti istantanei. La pubblicazione sulle store pubbliche è principalmente questione di documentazione: Iconografia dell'applicazione
• Evidenze — Apple richiede screenshot iPhone 6.9“ (1320×2868px)
• Nome dell'app, sottotitolo, descrizione, parole chiave
• URL della politica sulla privacy — richiesto da entrambe le piattaforme, anche per le app gratuite
• Classificazione di età context: Pagina/Area: Pagina di soluzioni sezione esempi di app. Ruolo: Etichetta breve di elemento di navigazione o elemento UI. Visualizzato in: componente solutions/SolutionAppExample.astro. Chiave di messaggio `solution_app_examples_rating` (Classificazione delle app di esempio).
• — questionario in ogni console Disclosures sulla raccolta dei dati

— Etichette di nutrizione sulla privacy di Apple e Google Data Safety

Set up app icons and splash screens for my Capacitor app

Metodo 1: Utilizzo di Cursor AI (Consigliato)

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

Cosa resta prima di "live":

1. Test di chiusura su Google Play (contabilità personale creata dopo il 13 novembre 2023): almeno 12 tester per 14 giorni consecutivi prima dell'accesso alla produzione. L'iOS non ha un equivalente.
2. Invia per la revisione — Apple ~3–5 giorni, Google ~3–7 giorni dopo che sono stati soddisfatti i requisiti di testing.

Vedi il nostro guida alla prima revisione dell'app per la lista completa dei controlli.

Errori comuni (e come risolverli)

• Could not find the web assets directory: ./dist — Esegui npm run build prima npx cap add o npx cap sync. Assicurati che webDir in capacitor.config.ts corrisponda all'output del tuo framework (dist per Vite, out per l'esportazione statica di Next.js).
• “Questo ID dell'app … non è disponibile” — Gli ID dei bundle sono univoci a livello globale. Scegli un ID a dominio inverso che controlli.
• La compilazione iOS fallisce dopo aver modificato l'ID del bundle — L'ID nel tuo progetto nativo deve corrispondere a Apple App Store Connect. Cerca e sostituisci in tutti i ios/ e android/, commit, ricostruisci.
• Schermo bianco all'avvio — Imposta base: './' in configurazione Vite, ricostruisci, e esegui npx cap sync.
• Contenuto sotto la barra dello stato — Aggiungi viewport-fit=cover e env(safe-area-inset-top) padding (Passaggio 13).
• APK firmata in modalità debug — Google Play rifiuta le costruzioni in debug. Utilizza una costruzione di rilascio firmata con il tuo keystore.
• La distribuzione è stata rifiutata — esiste già una versione — Aggiorna la versione/numero di costruzione nei progetti nativi e ricostruisci.

Per Capgo problemi del costruttore, consulta Troubleshooting Build nativo E e Aggiornamenti in tempo reale.

Conclusioni

Hai portato una tua applicazione web amata a iOS e Android nativi — costruita in cloud senza un Mac, con una funzione di camera reale e una correzione di layout spedita via aria. Quel che è difficile è stato fatto.

Passaggi successivi

• Capgo Aggiornamenti in tempo reale — Invia correzioni di UI e di copia senza dover aspettare la revisione del negozio
• Capgo Costruttore — Invia correzioni di UI e di copia senza dover aspettare la revisione del negozio
• Capgo Directory dei plugin — Biometria, notifiche push, geolocalizzazione e altro
• Guide correlate: Da Base44 a mobile · Da Bolt.new a mobile

Iscriviti a un account gratuito Capgo per abilitare le Aggiornamenti in tempo reale e i costruzioni nativi cloud.

Risorse

• Documentazione Lovable
• Documentazione Capacitor
• Costruzioni nativi Capgo
• Capgo — Aggiornamenti in tempo reale per le App Capacitor
• Costruisci iOS da Windows
• Export statico Next.js per mobile

Continua da Converti la tua App Lovable in iOS e Android con Capacitor

Se stai utilizzando Convert Your Lovable App to iOS and Android with Capacitor per pianificare il lavoro del plugin nativo, connettilo con Directory dei Plugin Capgo per il flusso di lavoro del prodotto nella directory dei plugin Capgo. Capacitor Plugins by Capgo Per i dettagli di implementazione in Capacitor Plugin da Capgo. Capgo Native Builds per il flusso di lavoro del prodotto in Capgo Costruzioni Native, e Costruire l'Applicazione iOS da Windows per costruire applicazioni iOS in cloud senza un Mac.