Converti la tua app Lovable per iOS e Android con Capacitor

Introduzione

Lovable è un builder di app AI che trasforma i prompt in app React funzionanti in pochi minuti. Puoi rilasciare rapidamente nel browser — ma cosa succede se vuoi la tua app su App Store e Google Play, presente nelle home screen come ogni altra app nativa?

Versione breve: la Pagina da Lovable a iOS e Android riassume l'intero percorso in un'unica schermata: export, Capacitor, cloud build senza Mac e live updates.

Questa guida illustra il percorso completo: esporta da Lovable, avvolgi l'app web con Capacitor, compila i binari firmati per iOS e Android nel cloud con Builder Capgo (senza Mac), aggiungi una funzionalità nativa reale e pubblica una correzione di layout over the air con Live Updates di Capgo.

Usiamo Cursore in tutto il flusso — la sua AI può eseguire la maggior parte dei comandi terminali al posto tuo, se preferisci non digitarli manualmente.

Tempo richiesto: circa 1–2 ore la prima volta, principalmente per la configurazione dell'account e l'attesa dei build cloud.

Alla fine, avrai:

• Un'app nativa iOS e Android costruita dal cloud — senza Xcode o Android Studio nel percorso principale
• L'app in esecuzione su un dispositivo reale (TestFlight, installazione diretta o test interni Play)
• Una funzionalità fotocamera funzionante, disponibile solo su un'app nativa
• Live Update configurati per pubblicare correzioni di UI e CSS senza revisione degli store

Prerequisiti

Costi (solo se pubblichi pubblicamente):

Opzionale (solo simulatore locale):

Puoi saltarli entrambi. Il percorso principale di questa guida esegue il build nel cloud e installa su dispositivi reali senza di essi.

Una breve nota su Lovable e i framework

Prima di toccare code, sappi che il tipo di web app che Lovable genera influisce sul wrapping mobile.

Per molto tempo, il default di Lovable è stato una single-page app (SPA) React + Vite. Da maggio 2026, le nuove app Lovable potrebbero usare TanStack Start con server-side rendering (SSR) di default. L'SSR è ottimo per il web, ma Capacitor incapsula una build statica — una cartella di HTML, CSS e JavaScript con un index.html alla radice — che viene inclusa nell'app sul dispositivo.

Un'app SSR richiede un server per renderizzare le pagine a ogni richiesta. Non c'è un server dentro un telefono, quindi per Capacitor serve un output statico renderizzato lato client.

Cosa fare:

• Partire da zero: Chiedi a Lovable di creare una single-page app (SPA) o di saltare l'SSR per ottenere una build statica dist/ cartella.
• Già su TanStack Start (SSR): Configuralo per pre-renderizzare o generare una SPA statica. L'unico requisito obbligatorio è una cartella di build statica contenente index.html.
• Progetti Lovable legacy di Next.js: Usa static export — l'output viene generato in out/ invece di dist/.

Qualunque framework tu usi, punta la webDir di Capacitor webDir su quella cartella. Per una SPA Vite, quella cartella è dist.

Passo 1 — Esporta la tua app Lovable su GitHub

Lovable mantiene il tuo code nel suo editor finché non colleghi GitHub.

1. Apri il tuo progetto Lovable nel browser
2. Clicca su Aggiorna (in alto a destra) se necessario, quindi apri Git nel menu a sinistra
3. Usa GitHub, autorizza Lovable e collega il tuo account
4. Lovable crea un repository e fa il push della tua app automaticamente

✅ Successo: Visitando github.com/YOUR-USERNAME/your-app viene visualizzato il code della tua app.

Passo 2 — Configura Cursor e clona il tuo progetto

Prima di poter lavorare con il tuo code in locale, ti servirà un editor code. Ti consigliamo Cursore, un editor basato su AI in grado di eseguire comandi terminal per te.

Scarica e installa Cursor

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

Configura Cursor per lo sviluppo con AI

Per la migliore esperienza, configura Cursor prima di iniziare:

1. Acquista un piano Cursor — Sebbene Cursor offra un piano gratuito, il piano Pro (20 $/mese) ti dà completamenti AI illimitati, accesso a Claude e GPT-4 ed esecuzione di comandi
2. Apri le impostazioni di Cursor premendo Command+, (Mac) o Ctrl+, (Windows)

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

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

5. Consenti esecuzione comandi — Abilita Cursor per eseguire comandi per te:

Clona il tuo repository in Cursor

1. In Cursor, premi Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) per aprire la command palette
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 in cui salvare il progetto

5. Cursor clonerà e aprirà il tuo progetto

Passo 3 — Installa le dipendenze ed esegui in locale

Metodo 1: con 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 OS, installerà Node.js ed eseguirà npm install, e avvierà il dev server con npm run dev.

Metodo 2: installazione manuale

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

cd your-lovable-app
npm install
npm run dev

Le app Lovable in genere girano su http://localhost:8080 oppure http://localhost:5173 — usa l'indirizzo che il terminale stampa.

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

✅ Successo: La tua app si apre nel browser con la UI funzionante.

Passo 4 — Prepara la build di produzione statica

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

React + Vite (la maggior parte delle app Lovable)

Metodo 1: con Cursor AI (consigliato)

Premi 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

Verifica vite.config.ts uses a relative base so assets load inside the native WebView:

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

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

Build e verifica:

npm run build

Dovresti vedere una dist/ cartella con index.html alla sua radice.

Progetti Lovable legacy con Next.js

Se il tuo repo usa Next.js, chiedi a Cursor:

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

Oppure segui Converti la tua app Next.js in mobile per la configurazione next.config completa, poi usa webDir: 'out' in Capacitor al posto di dist.

✅ Successo: Esiste una cartella di build statica (dist/ oppure out/) con index.html.

Passo 5 — Aggiungi Capacitor e piattaforme native

Capacitor incapsula la tua app web in veri shell iOS e Android — nessuna riscrittura necessaria.

Metodo 1: con Cursor AI (consigliato)

Premi 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 ti chiederà il nome dell'app e bundle ID (es. com.yourcompany.myapp).

Metodo 2: installazione manuale

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

Quando richiesto:

Scegli un Package ID che possiedi davvero. I Bundle ID sono globalmente unici. Usa un ID in formato reverse-domain basato su un dominio che controlli fin dall'inizio: cambiarlo in seguito significa fare find-and-replace su ios/ e android/ e ricompilare.

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

Configura Capacitor

Metodo 1: con Cursor AI (consigliato)

Chiedi a Cursor:

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

Per l'export statico di Next.js, chiedi di usare out invece.

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;

Build e Sync

Metodo 1: con Cursor AI (consigliato)

Scrivi a Cursor:

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 è così:

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 serve CocoaPods. Capacitor 8 usa automaticamente Swift Package Manager per le dipendenze iOS.

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

Passo 6 — Controlla il tuo .gitignore

Capgo Builder compila dal tuo repository Git, quindi ios/ e android/ devono essere committati. Un errore comune è ignorarli nella root del repository.

Conferma:

• Root .gitignore ignora node_modules e dist (il cloud ricostruisce dist durante le build web)
• ios/ e android/ essi stessi sono hai ignorati

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

Passo 7 — Commit e Push

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

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

Passaggio 8 — Crea binari pronti per gli store con Capgo Builder

Non ti serve un Mac o una pipeline locale con Xcode/Android Studio per rilasciare. Builder 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 sola volta. Usa i nostri tool gratuiti se ti serve aiuto per generarle:

• Generatore di certificati iOS
• Generatore di Android Keystore
• Trova UDID iOS — registra il tuo iPhone per le build di sviluppo

Vedi Gestione credenziali e Build iOS da Windows.

Richiedi una cloud build

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 log di build scorrono nel terminale. Con App Store Connect configurato, le build iOS possono essere caricate automaticamente su TestFlight.

Installa su un dispositivo reale:

• iOS: TestFlight (consigliato) o una build di sviluppo con l'UDID del dispositivo registrato
• Android: Canale di test interno di Google Play o un APK/AAB di release firmato

✅ Successo: Il build firmato si completa e puoi installarlo su un dispositivo reale.

Passaggio 9 — Opzionale: test in locale in Xcode o Android Studio

Se hai un Mac o vuoi testare sull'emulatore prima dei build cloud:

Per iOS

Metodo 1: con Cursor AI (consigliato)

Open the iOS project in Xcode

Metodo 2: comando manuale

npx cap open ios

Configurazione iniziale di Xcode:

1. Seleziona un simulatore dal menu a tendina dei dispositivi (es. iPhone 15)
2. Per dispositivi reali: abilita Gestisci automaticamente la firma e seleziona il tuo team Apple Developer
3. Clicca sul pulsante ▶️ Play — la prima build richiede 5–10 minuti

Per Android

Metodo 1: con Cursor AI (consigliato)

Open the Android project in Android Studio

Metodo 2: comando manuale

npx cap open android

Configurazione iniziale di Android Studio:

1. Installa i pacchetti SDK mancanti se richiesto
2. Crea un emulatore in Device Manager (es. Pixel 6, API 33+)
3. Clicca sul pulsante verde ▶️ Run — la prima build richiede 5–15 minuti

Usa IDE locali per il debugging quotidiano. Usa Builder Capgo quando hai bisogno di binari release firmati.

✅ Successo: L'app si apre nel simulatore o nell'emulatore mostrando i tuoi contenuti Lovable.

Passaggio 10 — Abilita Live Reload (Sviluppo)

Accelera l'iterazione puntando la shell nativa verso il tuo server di sviluppo locale.

Metodo 1: con Cursor AI (consigliato)

Scrivi a Cursor:

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

Metodo 2: Configurazione manuale

1. Trova il tuo indirizzo IP locale:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Aggiornamento 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 la porta 8080 oppure 3000 se è quello che npm run dev stampa.

3. Applica le modifiche:

npx cap copy

✅ Successo: Le modifiche al tuo web code fanno hot reload sul dispositivo o sul simulatore.

Passo 11 — Aggiungi una funzionalità nativa: la fotocamera

Un plugin Capacitor consente a JavaScript di chiamare funzionalità reali del dispositivo. Aggiungeremo il plugin Camera così gli utenti possono scattare una foto — cosa che una scheda del browser non può fare in modo affidabile.

Metodo 1: con Cursor AI (consigliato)

Scrivi 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 principale <dict>:

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

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

L'aggiunta di un plugin richiede una nuova build nativa tramite Capgo Builder prima che funzioni sui dispositivi.

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

Passaggio 12 — Aggiungi Capgo Live Updates

Ogni modifica nativa richiede solitamente la revisione dell'app store. Live Updates di Capgo pubblica le modifiche al web layer della tua app (HTML, CSS, JS, immagini) over the air in pochi minuti.

Installa l'updater nella tua prima release così non dovrai più aspettare la revisione quando devi rilasciare un fix.

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;

Inizializza nell'entry point della tua app (es. src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commit, push ed esegui una nuova build di Capgo Builder in modo che l'updater SDK sia incluso nella shell nativa.

Upload dei bundle web dopo il lancio:

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

Vedi Documentazione Capgo Live Updates.

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

✅ Successo: Il plugin Updater è installato e notifyAppReady() viene eseguito all'avvio.

Passo 13 — Correzione dello spazio della barra di stato con un Live Update

Su un iPhone reale, l'header potrebbe trovarsi sotto la status bar (orologio e batteria). I moderni Capacitor disegnano edge-to-edge, quindi la tua app deve rispettare i safe area insets: env(safe-area-inset-top), -bottom, -left, -right.

Molte app Lovable gestiscono già l'inset inferiore ma usano un padding superiore fisso (come pt-6) senza considerare l'inset superiore.

1. Verifica viewport-fit=cover nella index.html:

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

2. Sistema gli header superiori — usa max() per mantenere il padding web e adattarsi ai 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 si estende sotto la barra di stato in alto su mobile. Aggiungi env(safe-area-inset-top) al padding superiore di ogni header di pagina usando max(), mantenendo il padding esistente come minimo.”

3. Pubblica la correzione over the air — è puro CSS, non serve un rebuild nativo:

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 forzatamente l'app sul dispositivo, riaprila, attendi circa 15–30 secondi e aprila di nuovo. L'header dovrebbe trovarsi sotto la barra di stato — corretto senza revisione dello store.

✅ Successo: Il contenuto superiore copre la barra di stato dopo l'applicazione del bundle OTA.

Per un lavoro più approfondito sul layout, consulta @capgo/tailwind-capacitor e display edge-to-edge di Capacitor.

Passo 14 — Prepara il tuo listing sullo store

La tua app è compilata, installabile e puoi spingere aggiornamenti istantanei. Pubblicarla sugli store pubblici è per lo più burocrazia:

• Icona dell'app — 1024×1024px per iOS (senza trasparenza), 512×512px per Google Play
• Screenshot — Apple richiede screenshot per iPhone 6.9” (1320×2868px)
• Nome app, sottotitolo, descrizione, parole chiave
• URL della privacy policy — richiesto da entrambi gli store, anche per le app gratuite
• Age rating — questionario in ciascuna console
• Dichiarazioni sulla raccolta dati — Apple Privacy Nutrition Labels e Google Data Safety

Metodo 1: con 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 manca prima del “live”:

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

Vedi il nostro guida alla prima revisione dell'app per la checklist completa.

Errori comuni (e come risolverli)

• Could not find the web assets directory: ./dist — Esegui npm run build prima npx cap add oppure npx cap sync. Assicurati che webDir nella capacitor.config.ts corrisponda all'output del tuo framework (dist per Vite, out per l'export statico di Next.js).
• “Questo App ID … non è disponibile” — I Bundle ID sono univoci a livello globale. Scegli un ID reverse-domain che controlli.
• La build iOS fallisce dopo aver cambiato il bundle ID — L'ID nel tuo progetto nativo deve corrispondere a quello in Apple App Store Connect. Cerca e sostituisci in ios/ e android/, commit, rebuild.
• Schermata bianca all'avvio — Imposta base: './' nella config di Vite, rebuild ed esegui npx cap sync.
• Contenuto sotto la status bar — Aggiungi viewport-fit=cover e env(safe-area-inset-top) padding (passaggio 13).
• APK firmato in modalità debug — Google Play rifiuta le build di debug. Usa una release build firmata con il tuo keystore.
• Deployment rifiutato — la versione esiste già — Incrementa la versione/build number nei progetti nativi e rifai il build.

Per i problemi di Capgo Builder, consulta Troubleshooting di Native Build e Debug di Live Updates.

Conclusione

Hai portato un'app web Lovable su iOS e Android nativi — costruita nel cloud senza un Mac, con una funzione di fotocamera reale e una correzione del layout pubblicata over the air. La parte difficile è fatta.

Prossimi passi

• Live Updates di Capgo — Pubblica correzioni di UI e testi senza aspettare la revisione degli store
• Builder Capgo — Automatizza i build di release in CI
• Directory dei plugin di Capgo — Biometria, notifiche push, geolocalizzazione e altro
• Guide correlate: Base44 su mobile · Bolt.new su mobile

Registrati per un account Capgo gratuito per abilitare Live Updates e le build native cloud.

Risorse

• Documentazione Lovable
• Documentazione Capacitor
• Capgo Native Build
• Capgo — Live Updates per app Capacitor
• Build iOS da Windows
• Export statico Next.js per mobile

Frequently asked questions

Come si converte un'app Lovable in un'app mobile?

Esporta il progetto Lovable in GitHub, compilo come app web statica (la maggior parte delle app Lovable usa React e Vite), aggiungi Capacitor con le piattaforme iOS e Android, poi sincronizza e compila i binari pronti per gli store. Questa guida spiega ogni passaggio e Build Capgo può compilare e firmare le app iOS e Android nel cloud.

Posso trasformare un progetto Lovable in un'app per l'App Store e Google Play?

Sì. Capacitor incapsula il build web di Lovable in un shell nativo iOS e Android, così mantieni un'unica codebase e puoi aggiungere funzionalità native come la fotocamera. Dopo la prima release in store, Live updates di Capgo ti permette di pubblicare modifiche web senza aspettare una nuova revisione.

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

Se stai usando Converti la tua app Lovable per iOS e Android con Capacitor per pianificare il lavoro sui plugin nativi, collegalo a Directory dei plugin di Capgo per il workflow del prodotto nella Capgo Plugin Directory, Plugin Capacitor di Capgo per i dettagli di implementazione in Capacitor Plugins di Capgo, Capgo Native Build per il workflow del prodotto in Capgo Native Builds, e Build iOS da Windows per build iOS nel cloud senza un Mac.