Da Base44 alle app mobile native con Capacitor

Introduzione

Base44 è un app builder basato su AI che genera intere applicazioni React partendo da prompt. Puoi lanciare un prodotto funzionante nel browser in tempi rapidissimi — ma cosa succede se lo vuoi su iOS e Android? In questo tutorial, ti mostriamo come esportare il tuo progetto Base44 e trasformarlo in app mobile native con Capacitor, poi pubblicare i binari firmati per gli store con Builder Capgo — senza bisogno di un Mac per iOS.

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

Alla fine di questa guida, la tua app Base44 girerà nativamente su iOS e Android, con accesso a funzionalità del dispositivo come fotocamera, storage e notifiche push.

Prerequisiti e stima dei tempi

Tempo richiesto: 2-4 ore per il primo setup

Requisiti di sistema:

Per le build iOS in cloud: Qualsiasi OS (Windows, Mac o Linux) con Capgo Builder
Per le build Android in cloud: Qualsiasi OS
Archiviazione: 10GB di spazio libero per dipendenze e artefatti di build
RAM: Minimo 8GB

Costi:

Esportazione Base44: Piano Builder o superiore (per esportazione GitHub e download ZIP)
App Store di iOS: 99 $/anno (Apple Developer Account)
Google Play Store: 25 $ una tantum (Google Play Developer)
Cursor Pro: 20 $/mese (facoltativo ma consigliato)

Software richiesto:

Node.js 18+
Un editor code come Cursore

Perché trasformare la tua app Base44 in un'app mobile?

Maggiore portata: Raggiungi gli utenti dove si aspettano un'icona di app nativa, non una scheda del browser
Funzionalità native: Fotocamera, GPS, biometria e storage offline tramite plugin Capacitor
Distribuzione sugli store: Pubblica su Google Play e Apple App Store
Iterazione più rapida: Combina Capgo Live Updates con Capgo Builder per fix sul web layer senza ricostruire i binari nativi ogni volta

Fase 1: Esporta il tuo progetto Base44

Base44 ti permette di esportare code una volta che sei sul piano Builder o superiore. Hai due opzioni principali.

Opzione A: Esporta su GitHub (Consigliata)

Apri la tua app nell'editor Base44
Clicca sul GitHub icona nella barra superiore
Autorizza Base44 Builder e crea o collega un repository
Base44 sincronizza automaticamente la tua app da code a GitHub (sincronizzazione bidirezionale nei piani supportati)

Vedi Documentazione integrazione Base44 GitHub per i dettagli.

Opzione B: Scarica come ZIP

Clicca su Code nella barra superiore per aprire il file browser
Clicca su Esporta progetto come ZIP in alto a destra nella vista code
Estrai l'archivio sul tuo computer

Apri il progetto in Cursor

Visita cursor.sh e installa Cursor
Clona il tuo repo GitHub (Git: Clone dalla command palette) o apri la cartella ZIP estratta con File > Apri cartella

Avvia Cursor

Per il miglior workflow assistito dall'IA, abilita il tuo modello preferito e consenti l'esecuzione dei comandi nelle impostazioni di Cursor — la stessa configurazione descritta nel nostro guida da Lovable al mobile.

Passaggio 2: Configura l'ambiente di sviluppo

Base44 esporta un progetto React standard. Installa le dipendenze e verifica che il dev server funzioni.

Usare Cursor AI (consigliato)

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

Install Node.js if needed, install project dependencies, and start the dev server

Configurazione manuale

cd your-base44-project
npm install
npm run dev

App Base44 in esecuzione in locale

La tua app Base44 dovrebbe caricarsi su http://localhost:5173 (Vite) o sulla porta indicata nel terminale.

Fase 3: Prepara la build di produzione

Capacitor richiede asset web statici. Le app React di Base44 solitamente usano Vite e generano l'output in dist/.

Configura Vite per il mobile

Chiedi a Cursor:

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

O aggiorna vite.config.ts manualmente:

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

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

Testa la build di produzione

npm run build

Verifica che dist/ la cartella esista con index.html e gli asset bundled.

Output della build di Base44

Passaggio 4: Aggiungi Capacitor al tuo progetto Base44

Usare Cursor AI (consigliato)

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

Installazione manuale

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Inizializzazione di Capacitor per un'app Base44

Fai il commit del ios/ e android/ cartelle su git. Capgo Builder compila il contenuto di quelle directory.

Passaggio 5: Configura Capacitor

Aggiornamento capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

Valuta di aggiungere @capgo/capacitor-updater subito, così potrai rilasciare aggiornamenti OTA dopo il lancio. Vedi Documentazione Capgo Live Updates.

Passo 6: Build e Sync

Ogni volta che modifichi la web app:

npm run build
npx cap sync

Sync Capacitor completato per un'app Base44

Passo 7: Build di binari pronti per lo store con Capgo Builder (Consigliato)

I test sul simulatore sono opzionali. Per TestFlight, test interni e invio allo store, usa Builder Capgo per compilare e firmare i binari nativi nel cloud.

Perché usare Capgo Builder per le app Base44?

Nessun Mac richiesto per iOS — build da Windows o Linux
Lo stesso CLI che il tuo agente AI può eseguire — si adatta ai workflow di vibe-coding da Base44 → GitHub → Cursor
Si integra con Live Updates — correggi UI e testi via OTA; rebuild nativo solo se cambiano plugin o permessi

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. 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.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --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.

Carica il tuo web bundle per gli update OTA:

npx @capgo/cli@latest bundle upload --channel production

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

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode che apre un progetto Base44 Capacitor

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

Passo 9: Aggiungi funzionalità native

Migliora la tua app Base44 con le capacità del dispositivo:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Chiedi a Cursor di integrare Share, Camera o Push nei tuoi componenti React. Dopo aver aggiunto i plugin, esegui una nuova Builder Capgo build prima dell'invio allo store.

Funzionalità native aggiunte a un'app Base44 Capacitor

Fase 10: Ottimizza per la produzione

Icone dell'app e splash screen

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

Considerazioni sul backend di Base44

Le app Base44 esportate possono chiamare il backend ospitato da Base44 e SDK. Di solito funziona in Capacitor a patto che:

le chiamate a API usino HTTPS
i redirect auth funzionino nella WebView (testa il login su un dispositivo reale)
i deep link siano configurati se usi flussi magic-link o OAuth

Se in futuro migri via dal backend di Base44, prevedi di sostituire base44.entities.* e le relative chiamate a SDK con il tuo API — il layer UI React di solito resta invariato.

Risoluzione dei problemi comuni

Schermata bianca all'avvio

Verifica base: './' sia impostato nella config di Vite
Esegui npm run build e verifica che dist/index.html carichi le risorse con percorsi relativi
Esegui npx cap sync dopo ogni web build

Errori di build in Capgo Builder

Commit ios/ e android/ su git prima di richiedere una cloud build
Esegui npx cap sync localmente in modo che gli asset web vengano copiati nei progetti nativi
I nuovi plugin Capacitor richiedono una nuova build nativa

Export non disponibile in Base44

L'export GitHub e il download ZIP richiedono il piano Builder o superiore. Fai l'upgrade in Base44 o copia i file manualmente dalla vista Code nei piani inferiori.

Conclusione

Hai esportato un'app React generata da AI in Base44, l'hai incapsulata con Capacitor e hai un percorso chiaro verso binari iOS e Android firmati tramite Builder Capgo — senza dover mantenere una farm Xcode locale.

Prossimi passi

Live Updates di Capgo: Pubblica correzioni di UI e testi senza aspettare la revisione dello store
Builder Capgo: Automatizza le build di release in CI
Notifiche push: Aggiungi @capacitor/push-notifications e ricostruisci con Capgo Builder
Guide correlate: Lovable su mobile · Bolt.new su mobile

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

Risorse

Continua da Base44 alle app mobile native con Capacitor

Se stai usando Da Base44 alle app mobile native 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.