Da Base44 alle app mobile native con Capacitor

Introduzione

Base44 è un app builder basato su AI che genera applicazioni React complete partendo da prompt. Puoi lanciare un prodotto funzionante nel browser in tempi rapidi — 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, per poi distribuire i binari firmati degli store con Capgo Builder — 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 funzioni come fotocamera, storage e notifiche push.

Prerequisiti e stima dei tempi

Tempo richiesto: 2-4 ore per il setup iniziale

Requisiti di sistema:

Per build iOS in cloud: Qualsiasi OS (Windows, Mac o Linux) con Capgo Builder
Per build Android in cloud: Qualsiasi OS
Storage: 10GB di spazio gratuito per dipendenze e build artifacts
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 per Android: $25 una tantum (Google Play Developer)
Cursor Pro: $20/mese (opzionale ma consigliato)

Software Richiesto:

Node.js 18+
Un editor code come Cursor

Perché trasformare la tua app Base44 in mobile?

Portata più ampia: Raggiungi gli utenti dove si aspettano un'icona 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 dover ricostruire i binari nativi ogni volta

Passaggio 1: Esporta il tuo progetto Base44

Base44 ti permette di esportare code una volta attivato il piano Builder o superiore. Hai due opzioni principali.

Opzione A: Esporta su GitHub (Consigliata)

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

Vedi la documentazione sull'integrazione GitHub di Base44 per i dettagli.

Opzione B: Scarica come ZIP

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

Apri il progetto in Cursor

Vai su 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 a mobile.

Passaggio 2: Configura l'ambiente di sviluppo

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

Utilizzando 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 a http://localhost:5173 (Vite) o sulla porta indicata nel terminale.

Passaggio 3: Prepara la Build di Produzione

Capacitor richiede asset web statici. Le app React di Base44 solitamente usano Vite e caricano 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 un dist/ la cartella esiste con index.html e gli asset bundleati.

Output della build di Base44

Passaggio 4: Aggiungi Capacitor al tuo progetto Base44

Usando 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

Commit the ios/ e android/ cartelle su git. Capgo Builder compila il contenuto di quelle directory.

Passaggio 5: Configura Capacitor

Update 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

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

Passaggio 6: Build e Sync

Ogni volta che modifichi la web app:

npm run build
npx cap sync

Sync Capacitor completato per un'app Base44

Passaggio 7: Crea binari pronti per lo store con Capgo Builder (Consigliato)

I test sul simulatore sono opzionali. Per TestFlight, test interni e invio agli store, usa Capgo Builder 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 può eseguire il tuo agente AI — 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 per 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 fare l'upload automatico su TestFlight.

Fai l'upload del tuo web bundle per gli update OTA:

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

Passaggio 8: Opzionale — Testa localmente in Xcode o Android Studio

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

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

Apri Xcode con un progetto Base44 Capacitor

Usa IDE locali per il debugging quotidiano. Usa Capgo Builder quando ti servono i binari firmati per il rilascio.

Passaggio 9: Aggiungi funzionalità native

Potenzia 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 un nuovo Capgo Builder build prima di sottoporre l'app agli store.

Funzionalità native aggiunte a un'app Base44 Capacitor

Passaggio 10: Ottimizza per la produzione

Icone 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 di Auth funzionino nella WebView (testa il login su un dispositivo reale)
i Deep link siano configurati se usi magic-link o flussi OAuth

Se in futuro migrerai fuori dal backend di Base44, pianifica di sostituire base44.entities.* le relative chiamate a SDK con il tuo API — il layer UI in React solitamente rimane invariato.

Risoluzione dei problemi comuni

Schermata bianca all'avvio

Conferma base: './' è impostato nella config di Vite
Esegui npm run build e verifica che dist/index.html carichi gli asset con percorsi relativi
Esegui npx cap sync dopo ogni build web

Errori di build in Capgo Builder

Commit ios/ e android/ su git prima di richiedere una cloud build
Esegui npx cap sync localmente per copiare gli asset web nei progetti nativi
I nuovi plugin Capacitor richiedono un nuovo Native Build

Export non disponibile in Base44

L'export di 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 Base44 AI, l'hai avvolta con Capacitor e hai una via chiara per ottenere i binari firmati iOS e Android tramite Capgo Builder — senza dover gestire un Xcode farm locale.

Prossimi passi

Capgo Live Updates: Distribuisci fix alla UI e ai testi senza attendere la revisione degli store
Capgo Builder: Automatizza i build di rilascio 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 i build cloud nativi.

Risorse

Passa da Base44 a Native Mobile Apps 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 di prodotto nei Capgo Native Builds, e Build iOS da Windows per build iOS in cloud senza un Mac.