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 spedire in browser velocemente — ma cosa se vuoi che la tua app sia sullo Store App e Google Play, seduta sulla schermata come ogni altra app nativa?

Questa guida guida attraverso il percorso completo: esporta da Lovable, avvolgi l'app web con Capacitor CapacitorCostruisci binari iOS e Android firmati in cloud con Capgo Builder (non è richiesto Mac), aggiungi una vera funzione nativa e invia una correzione di layout in remoto 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, principalmente impostazione del conto e attesa dei costruttori cloud.

Al termine, avrai:

• Un'app nativa iOS e Android costruita dal cloud — senza Xcode o Android Studio sulla strada principale
• L'app 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 Live configurati per inviare UI e correzioni CSS senza revisione del negozio.

Prerequisites

Costi (solo per pubblicare pubblicamente):

Facoltativo (solo simulatore locale):

Potete saltare entrambi. La principale via di questo guide costruisce in cloud e installa su dispositivi reali senza di essi.

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 un applicazione web unica pagina (SPA) React + ViteCome di maggio 2026, le nuove applicazioni Lovable possono utilizzare TanStack Inizia con rendering server-side (SSR) SSR è ottimo per il web, ma Capacitor avvolge una costruzione statica una cartella di HTML, CSS e JavaScript con un index.html al suo interno — che viene inviata all'interno dell'app sul dispositivo.

Un'app SSR si aspetta che un server renderizzi pagine su ogni richiesta. Non c'è alcun server all'interno di un telefono, quindi per Capacitor desideri output staticamente client-renderizzato.

Che fare:

• Iniziare da capo: Richiedi a Lovable un applicazione web unica pagina (SPA) or to skip SSR so you get a static dist/ folder.
• Configuralo per pre-renderizzare o per produrre una static Configura per pre-renderizzare o per produrre una SPA statica. L'unica richiesta è un cartella di build statica contenente index.html.
• Progetti Lovable Legacy Next.js: Usa l'esportazione statica — l'output va a out/ invece di dist/.

Qualunque framework tu utilizzi, punti Capacitor’s webDir al quel folder. Per una SPA Vite, quel folder è dist.

Step 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 nel menu a sinistra
3. Scegli GitHube autorizza Lovable, collegando il tuo account
4. Crea un repository e invia automaticamente il tuo app

✅ Successo: Visita github.com/YOUR-USERNAME/your-app Mostra il tuo app di code.

Passo 2 — Configura Cursor e clona il tuo progetto

Prima di poter lavorare con il tuo 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 Cursor per lo sviluppo AI

Per l'esperienza migliore, configura Cursor prima di iniziare:

1. Acquista un piano per Cursor --- Mentre Cursor offre un livello gratuito, un piano Pro ($20/mese) ti offre completamenti AI illimitati, accesso a Claude e GPT-4, e esecuzione di comandi
2. Apri le impostazioni di Cursor toccando Command+, (Mac) o Ctrl+, (Windows)

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

4. Scegli il tuo modello preferito — Scegli Claude o GPT-4 per i migliori risultati:

5. Consenti l'esecuzione delle istruzioni — Abilita il puntatore per eseguire le istruzioni per te:

Copia il tuo repository nel cursore

1. In cursore, premi Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) per aprire la palette dei comandi
2. Digita "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 dove desideri salvare il progetto

5. Cursore clonerà e aprirà il tuo progetto

Passo 3 — Installa le dipendenze e esegui localmente

Metodo 1: Utilizzando Cursor AI (Consigliato)

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

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

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

Metodo 2: Installazione manuale

Apre la finestra del terminale in Cursor premendo Shift+Command+T (Mac) o Shift+Ctrl+T (Windows), poi:

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 il 24 LTS dall'installer da nodejs.org
2. Esegui l'installer
3. Apri il terminale e esegui:

cd your-lovable-app
npm install
npm run dev

Le app Lovable si eseguono tipicamente su http://localhost:8080 o http://localhost:5173 — utilizza l'indirizzo che il tuo terminale stampa.

Premi Ctrl + C per fermare il server di sviluppo quando sei pronto a continuare.

✅ Successo: La tua app si apre nel browser con la sua interfaccia utente funzionante.

Passo 4 — Prepara la produzione statica

Capacitor richiede una build di produzione prima di aggiungere piattaforme native.

React + Vite (le maggiori app amabili)

Metodo 1: Utilizzare Cursor AI (Consigliato)

Premi Command+K (Mac) o Ctrl+K Metodo 1: Utilizzando Cursor AI (Consigliato)

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 gli asset si caricano all'interno del WebView nativo:

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

Dovresti vedere un dist/ cartella con index.html al suo interno.

Progetti Next.js Legacy Lovable

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 il tuo App Next.js in Mobile per il full next.config configurazione, quindi utilizza webDir: 'out' in Capacitor al posto di dist.

✅ Successo: Esiste una cartella di build statica (dist/ o out/) with 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: Utilizzare Cursor AI (Consigliato)

Press 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 tuo nome dell'app e ID del bundle (ad es. com.yourcompany.myapp).

Metodo 2: Installazione manuale

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

Quando viene richiesto:

Pick a Package ID you actually own. Gli ID bundle sono univoci a livello globale. Utilizza un ID basato sul dominio inverso basato su un dominio che controlli fin da subito — cambiarlo in seguito significa sostituire in tutti i posti. ios/ E e android/ E e ricostruire.

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

Configura Capacitor

Metodo 1: Utilizzando Cursor AI (Raccomandato)

Domanda a Cursor:

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

Per Next.js static export, chiedigli di utilizzarla out instead.

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;

Metodo 2: Configurazione manuale

Metodo 1: Utilizzando Cursor AI (Raccomandato)

Costruisci e sincronizza

Build the production web app and sync it with Capacitor platforms

Metodo 2: Comandi Manuali

npm run build
npx cap sync

Il tuo progetto ora assomiglia a:

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.

__CAPGO_KEEP_0__ Costruttore compila dal tuo repository Git, quindi .gitignore

Il Capgo Builder compila dal tuo repository Git, quindi ios/ e android/ folders appaiono e il terminale mostra. Un errore comune è ignorarli nella cartella root.

Conferma:

• Root .gitignore ignori node_modules e dist (il cloud ricostruisce dist durante le costruzioni web)
• ios/ e android/ stessi sono non ignorati

✅ Successo: git status mostra ios/ e android/ pronto per il commit (non ignorato).

Passo 7 — Commit e Push

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

✅ Successo: La tua GitHub repo mostra i ios/ e android/ cartelle.

Passo 8 — Crea file binari pronti per il store con Capgo Builder

Non hai bisogno di un Mac o di un pipeline locale Xcode/Android Studio per distribuire. Costruttore Capgo compila, firma e può inviare build iOS e Android dal cloud.

Configura 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

Salva le credenziali di firma una volta. Utilizza le nostre strumenti gratuiti se hai bisogno di aiuto per generarle.

• Generatore di Certificato iOS
• Generatore di chiavi Android Keystore
• Cerca l'ID dispositivo iOS — registra il tuo iPhone per gli edifici di sviluppo

Vedi Gestisci le 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

I registri di build si riversano nel terminale. Con App Store Connect configurato, i build iOS possono caricare automaticamente su TestFlight.

Installa sul 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 si completa e puoi installarlo sul dispositivo reale.

Passo 9 — Facoltativo: Testa localmente in Xcode o Android Studio

Se hai un Mac o vuoi testare l'emulatore prima dei build 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 dalla lista 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 sul pulsante ▶️ Play — il primo build 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. Creare un emulatore nel Device Manager (ad esempio Pixel 6, API 33+)
3. Clicca sul pulsante verde ▶️ Run — la prima compilazione richiede 5–15 minuti

Usa gli IDE locali per la debuggazione quotidiana. Usa Costruttore Capgo quando hai 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 (Development)

Accelerare l'iterazione puntando la shell nativa al tuo server di sviluppo locale.

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Diga a Cursor:

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

Metodo 2: Configurazione manuale

1. Cerca 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;

Usa il porto 8080 o 3000 se è questo npm run dev Se è questo che

3. Applica modifiche:

npx cap copy

✅ Success: Modifiche al tuo web code si ricaricano automaticamente sul dispositivo o simulatore.

Passo 11 — Aggiungi una Funzione Nativa: La Fotocamera

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

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;
}

Richiede una plugin un Una nuova costruzione nativa è richiesta attraverso Capgo Builder prima che funzioni sui dispositivi.

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

Passo 12 — Aggiungi Capgo Aggiornamenti in tempo reale

Tutti i cambi nativi normalmente vanno in rassegna della store dell'app. Capgo Live Updates pubblica le modifiche al layer web del tuo app (HTML, CSS, JS, immagini) in pochi minuti.

Installa l'aggiornatore nella tua prima versione di rilascio così non resterai mai bloccato in attesa di revisione quando hai bisogno di inviare una correzione.

npm install @capgo/capacitor-updater
npx cap sync

Aggiungi a 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;

Avvia nella tua entry dell'app (ad esempio src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commit, invia e esegui un nuovo Capgo Builder build affinché l'aggiornatore SDK sia nel shell nativo.

Carica bundle web dopo il lancio:

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

Vedi Capgo documentazione Live Updates.

Per automatizzare questo caricamento ogni volta che qualcuno clicca Pubblica in Lovable, segui Automatizza Capgo Live Updates da Lovable con GitHub Actions.

✅ Risultato: Aggiornamento plugin è installato e notifyAppReady() funziona al avvio.

Passo 13 — Risolvi lo Spazio della Barra di Stato con un Live Update

Sul tuo iPhone reale, il tuo header potrebbe essere sotto la barra dello stato (orologio e batteria). Moderno Capacitor si estende fino all'orlo, quindi il tuo app deve rispettare insetti di area di sicurezza: env(safe-area-inset-top), -bottom, -left, -right.

Molti app Lovable già gestiscono l'inserzione inferiore ma utilizzano un padding superiore fissato (come pt-6) senza l'inserzione 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 in alto — utilizza max() to keep web padding and grow on notched devices:

/* 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 dello 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

Forza la chiusura dell'app sul tuo dispositivo, riaprila, aspetta ~15–30 secondi e aprila nuovamente. L'intestazione dovrebbe essere posizionata sotto la barra dello stato — risolto senza revisione della 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 schermo da bordo.

Passo 14 — Preparazione della tua lista di negozio

Il tuo app è costruita, installabile e puoi inviare aggiornamenti istantanei. La pubblicazione sulle store pubbliche è perlopiù questioni burocratiche:

• Icona dell'app — 1024×1024px per iOS (senza trasparenza), 512×512px per Google Play
• Schermate dell'app — Apple richiede schermate per iPhone 6.9” (1320×2868px)
• Nome, sottotitolo, descrizione, parole chiave dell'app
• URL della politica sulla privacy — richiesta da entrambe le store, anche per le app gratuite
• Età di valutazione — questionario in ogni console
• Disclosures di raccolta dati — Etichette di privacy di Apple e sicurezza dei dati di Google

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Set up app icons and splash screens for my Capacitor app

Metodo 2: Configurazione manuale

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

Cosa rimane prima di "live":

1. Test di Google Play chiuso (conti personali creati dopo il 13 novembre 2023): almeno 12 tester per 14 giorni consecutivi prima dell'accesso alla produzione. L'iOS non ha equivalente.
2. Invia per la revisione — Apple ~3–5 giorni, Google ~3–7 giorni dopo aver soddisfatto i requisiti di testing.

Vedi il nostro guida di revisione dell'app per principianti per l'elenco completo.

Errori comuni (e come risolverli)

• Could not find the web assets directory: ./dist — Esegui npm run build prima npx cap add or npx cap synco webDir in capacitor.config.ts corrisponde al tuo output del framework ("dist in out corrisponda al tuo output di framework (
• Ecco l'ID App … non è disponibile — Scegli un ID di bundle con dominio inverso che controlli.
• Ecco l'errore di build iOS dopo aver modificato l'ID di bundle — L'ID nella tua progetto nativo deve corrispondere a Apple App Store Connect. Cerca e sostituisci in tutti i file ios/ e android/commit, ricostruisci.
• Schermo bianco al lancio — Imposta base: './' in configurazione Vite, ricostruisci e esegui npx cap sync.
• Contenuto sotto la barra di stato — Aggiungi viewport-fit=cover e env(safe-area-inset-top) spaziatura (Passaggio 13).
• APK firmata in modalità debug — Google Play rifiuta le versioni di debug. Utilizza una versione di rilascio firmata con il tuo keystore.
• Deployimento rifiutato — versione già esistente --- Incrementa la versione/n° di costruzione nei progetti nativi e ricostruisci.

Per Capgo problemi del costruttore, vedi Trattamento dei problemi di costruzione nativa e Aggiornamenti in Tempo Reale di Debugging.

Conclusion

You took a Lovable web app to native iOS and Android — built in the cloud without a Mac, with a real camera feature and a layout fix shipped over the air. That’s the hard part done.

Next Steps

• Capgo Aggiornamenti Live — Invia modifiche UI e testo senza attendere la revisione del negozio
• Capgo Costruttore — Automate gli aggiornamenti di rilascio in CI
• Capgo Directory dei plugin — Biometria, notifiche push, geolocalizzazione e altro
• Guide correlate: Base44 per dispositivi mobili · Bolt.new per dispositivi mobili

Iscriviti a un account Capgo gratuito per abilitare gli Aggiornamenti Live e i costruttori nativi cloud.

Risorse

• Documentazione Lovable
• Capacitor Documentazione
• Capgo Costruzione Nativa
• Capgo — Live Updates for Capacitor Apps
• Costruisci iOS da Windows
• Eseporto statico Next.js per mobile

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

Se stai utilizzando Converti la tua App Lovable in iOS e Android con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow del prodotto nella Capgo Directory dei Plugin. Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Capgo Costruzione nativa per il flusso di lavoro del prodotto in Capgo Costruzione nativa, e Costruisci iOS da Windows per le costruzioni di iOS in cloud senza un Mac.