Trasforma il tuo progetto Bolt.new in app mobile native con Capacitor

Introduzione

Bolt.new è una piattaforma di sviluppo innovativa basata sull'AI che può generare applicazioni web full-stack usando vari framework come React, Vue, Svelte e altri. Ma cosa succede se vuoi portare la tua creazione Bolt.new su dispositivi mobili? In questo tutorial completo, ti mostreremo come esportare il tuo progetto Bolt.new e trasformarlo in app mobile native usando Capacitor.

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

Che il tuo progetto Bolt.new utilizzi React, Vue o un altro framework supportato, questa guida ti aiuterà a creare app native per iOS e Android con accesso alle funzionalità del dispositivo come fotocamera, storage e notifiche push.

Prima di iniziare: Requisiti e tempi

Tempo stimato: 3-5 ore per il setup completo

Requisiti di sistema:

Sviluppo iOS: Mac con macOS 12.0+ (obbligatorio, senza workaround)
Sviluppo Android: Qualsiasi OS (Windows/Mac/Linux)
Spazio Libero: 20-30GB per gli strumenti di sviluppo
Memoria: Minimo 8GB RAM, consigliati 16GB

Budget Necessario:

Apple Developer: $99/anno (per iOS App Store)
Google Play: $25 una tantum
Cursor Pro: $20/mese (opzionale, accelera lo sviluppo)

Cosa installeremo:

Node.js & npm
Xcode (solo Mac, per iOS)
Android Studio (per Android)
Vari tool da riga di comando

Perché trasformare la tua app Bolt.new in mobile?

Copertura cross-platform: Distribuisci la tua app AI sugli store mobile
Accesso alle funzionalità native: Usa fotocamera, GPS, file system e altre funzionalità native
Performance migliori: Il container nativo offre performance superiori alle web view
Funzionalità Offline: Lavora offline con soluzioni di storage native
Notifiche push: Coinvolgi gli utenti con il supporto alle push notification native

Perché Capacitor invece di Expo?

Se stai valutando opzioni per lo sviluppo mobile, Capacitor offre vantaggi significativi rispetto a Expo, specialmente per lo sviluppo web-first:

Un unico codebase, tre piattaforme: Il tuo sito React, Next.js o Vue.js diventa un'app iOS, Android E web senza dover convertire nulla
Nessun rebuilding necessario: Usa il tuo progetto Bolt.new così com'è - senza dover riscrivere tutto per un altro framework come richiede Expo
Approccio web-first nativo: A differenza di Expo, che è mobile-first e poco fluido sul web, Capacitor considera il web un cittadino di prima classe
Sviluppo senza attriti: Continua a usare i tuoi tool e workflow web abituali
Libertà di framework: Funziona con qualsiasi framework web (React, Vue, Svelte, Next.js, ecc.) - senza i vincoli di React Native come Expo

La differenza chiave:

Con Capacitor: Crea il tuo sito → Aggiungi il supporto mobile (stesso codebase)
Con Expo: Crea per mobile → Prova a farlo funzionare sul web (approccio diverso, spesso macchinoso)

Dato che il tuo progetto Bolt.new è già una web app, Capacitor ti permette di estenderla su mobile senza cambiare una riga di code. Expo richiederebbe di ricostruire l'intero progetto per il loro framework.

Passaggio 1: Configura l'ambiente di sviluppo

Ottieni Cursor - il tuo editor Code basato su AI

Per lavorare in modo efficiente con il tuo progetto Bolt.new, useremo Cursor, un editor code intelligente che semplifica lo sviluppo:

Vai su cursor.sh e scarica l'installer per il tuo OS
Segui la procedura di installazione
Avvia Cursor una volta pronto

Avvia Cursor

Configura Cursor per la massima produttività

Per sfruttare al meglio Cursor serve una configurazione iniziale:

Valuta l'acquisto di Cursor Pro - La versione gratuita è disponibile, ma la Pro ($20/mese) sblocca:
- Assistenza AI illimitata
- Modelli premium (GPT-4, Claude)
- Risposte istantanee
- Supporto premium
Accedi alle Impostazioni con Command+, (Mac) o Ctrl+, (Windows)

Impostazioni di Cursor

Attiva funzioni AI - Assicurati che l'assistenza AI sia attiva:

Modelli consentiti

Scegli il tuo modello AI - Consigliamo Claude o GPT-4:

Seleziona modello Cursor

Abilita esecuzione comandi - Consenti a Cursor di eseguire comandi automaticamente:

Consenti esecuzione comandi

Passaggio 2: Esporta il tuo progetto Bolt.new

Ora portiamo il tuo progetto Bolt.new su Cursor.

Scarica il tuo progetto

Vai al tuo progetto Bolt.new nel browser
Trova il Download o Esporta pulsante nell'interfaccia di Bolt

Scarica il file ZIP con il tuo progetto
Estrailo in una cartella sul tuo computer

File del progetto Bolt.new

Apri in Cursor

Una volta estratti, apri il progetto in Cursor:

Usa File > Open Folder in Cursor
Seleziona la cartella del progetto Bolt.new estratta
Cursor caricherà il tuo progetto

Apri in Cursor

Alternativa: Clona da GitHub

Se hai collegato Bolt.new a GitHub:

Premi Shift+Command+P (Mac) o Shift+Ctrl+P (Windows)
Cerca “Git: Clone”
Inserisci l'URL del repository
Scegli una cartella dove salvarlo

Clona in Cursor

Passaggio 2: Identifica il framework del progetto

Bolt.new può generare progetti con diversi framework. Vediamo con quale stai lavorando:

Controlla package.json

Apri package.json per vedere quale framework usa il tuo progetto:

Ispezione package.json di Bolt.new

Tipi comuni di progetti Bolt.new:

React + Vite: Configurazione più comune
Vue + Vite: Applicazioni Vue.js
Svelte: Applicazioni Svelte
Next.js: App React full-stack
Vanilla JS: Applicazioni in JavaScript puro

Passaggio 3: Installa gli strumenti di sviluppo

Opzione A: Lascia che Cursor AI faccia tutto

Premi Command+K (Mac) o Ctrl+K (Windows) in Cursor

Digita questa richiesta:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI farà automaticamente:

Installare Node.js e npm se necessario
Configurare Homebrew su macOS
Installare tutte le dipendenze del progetto
Avviare il server di sviluppo

Installare Homebrew

Opzione B: Processo di installazione manuale

Se preferisci il controllo manuale o se l'approccio AI riscontra problemi:

Per prima cosa, apri il terminale di Cursor con Shift+Command+T (Mac) o Shift+Ctrl+T (Windows)

Per utenti macOS:

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Per utenti Windows:

Scarica l'installer di Node.js da nodejs.org
Completa la procedura guidata di installazione
Nel terminale di Cursor:

cd your-bolt-project
npm install
npm run dev

App Bolt.new in esecuzione in locale

La tua app Bolt.new dovrebbe essere ora in esecuzione (solitamente su http://localhost:5173 per progetti Vite).

Passaggio 4: Configura la Build per Mobile

La configurazione varierà in base al framework del tuo progetto.

Opzione A: Configurazione Automatica con Cursor AI

Chiedi a Cursor AI di gestire la configurazione:

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor rileverà il tuo framework e applicherà la configurazione corretta.

Opzione B: Configurazione Manuale per Framework

Per progetti React + Vite:

Modifica vite.config.js:

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

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Per progetti Vue + Vite:

Modifica vite.config.js:

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

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

Per progetti Next.js

Aggiungi ai tuoi package.json script:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

Aggiornamento next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

Passaggio 5: Build del progetto

È ora di creare la build di produzione della tua app Bolt.new.

Opzione A: Build con Cursor AI

Chiedi semplicemente a Cursor:

Build my Bolt.new project for production deployment

Cursor eseguirà il comando di build corretto in base al tuo framework.

Opzione B: Build manuale

Per progetti basati su Vite (React/Vue/Svelte):

npm run build

Build Vite di Bolt.new completata

Per applicazioni Next.js:

npm run static

Build completata con successo

Assicurati che il build abbia generato l'output corretto:

Progetti Vite: Cerca una dist directory
Progetti Next.js: Controlla se esiste una out directory

output di build di Bolt.new

Passaggio 6: Aggiungi Capacitor al tuo progetto Bolt.new

Trasformiamo la tua web app in app mobile native.

Opzione A: Setup rapido con Cursor AI

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

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI gestirà l'intero processo di setup.

Opzione B: Setup manuale passo dopo passo

Installa gli strumenti CLI di Capacitor:

npm install -D @capacitor/cli

Inizializza il tuo progetto Capacitor:

npx cap init

Bolt di inizializzazione Capacitor

Ti verrà richiesto di inserire:

Nome dell'app: Il nome del tuo progetto Bolt.new
Bundle ID: Formato: com.yourcompany.yourapp

Continua con la configurazione manuale - installa i pacchetti essenziali:

npm install @capacitor/core @capacitor/ios @capacitor/android

Aggiungi il supporto per le piattaforme mobile:

npx cap add ios
npx cap add android

Capacitor piattaforme aggiunte a Bolt

Cosa è successo?

Ecco come appare la struttura del tuo progetto Bolt.new:

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

Note importanti:

Il tuo code web rimane in src/ - modifica lì
ios/ e android/ vengono generati - non modificare
Dopo le modifiche, esegui sempre npx cap sync
Ogni piattaforma ha il proprio processo di build

Passaggio 7: Configura Capacitor

Ora configura Capacitor per il tuo framework specifico.

Opzione A: Auto-configurazione con Cursor

Chiedi aiuto a Cursor:

Configure capacitor.config.ts for my Bolt.new project build output

Opzione B: Configurazione manuale

Per applicazioni basate su Vite:

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

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

export default config;

Per applicazioni Next.js:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

Passaggio 8: Build e Sync

Prepara la tua app per il deployment mobile.

Opzione A: usare Cursor AI

Scrivi a Cursor:

Build my project and sync it with Capacitor for mobile deployment

Opzione B: Processo manuale

Esegui questi comandi in sequenza:

npm run build
npx cap sync

Capacitor sync Bolt completato

Passaggio 9: Build dei binari per gli store con Capgo Builder (Consigliato)

Non serve un Mac o una pipeline locale completa con Xcode/Android Studio per pubblicare su App Store e Google Play. Builder Capgo compila, firma e può inviare build iOS e Android dal cloud: la via più veloce per le app create con Bolt.new.

Perché Capgo Builder?

Nessun Mac richiesto per iOS — build da Windows, Linux o dal tuo ambiente di coding AI
Un unico workflow CLI — facile da scriptare e passare a Cursor, Claude Code o Codex
Si integra con Live Updates — rilascia fix JS/UI over-the-air; ricostruisci il binario nativo solo se cambiano plugin o permessi

Configura Capgo Builder

Dopo aver completato il build di produzione e la sincronizzazione Capacitor localmente:

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 una sola volta le credenziali di firma (certificati Apple, provisioning profiles, Android keystore). 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

Capgo Builder trasmette i log di build direttamente nel terminale. Con App Store Connect configurato, i build iOS possono andare direttamente su TestFlight.

Carica il tuo web bundle per gli update OTA:

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

Step 10: apri gli IDE nativi (opzionale per i test locali)

Se hai un Mac o vuoi testare su emulatore prima delle cloud build, apri i progetti nativi localmente:

Accedi agli ambienti di sviluppo nativi della tua app.

Sviluppo iOS

Opzione A: tramite Cursor AI

Open my iOS project in Xcode

Opzione B: comando da terminale

npx cap open ios

Apertura del progetto Bolt in Xcode

Sviluppo Android

Opzione A: tramite Cursor AI

Open my Android project in Android Studio

Opzione B: comando da terminale

npx cap open android

Apertura del progetto Bolt in Android Studio

Passaggio 11: build e run in locale (opzionale)

Esecuzione su iOS

Configurazione di Xcode (prima volta)

Scegli il tuo target:
- Accanto al tasto Play, clicca sul selettore del dispositivo
- Per i test: scegli un simulatore iPhone
- Per un dispositivo reale: collega l'iPhone via USB
Configura la firma di Code:
- Clicca sul nome del progetto nella sidebar a sinistra
- Vai alla scheda “Signing & Capabilities”
- Abilita “Automatically manage signing”
- Effettua l'accesso con il tuo Apple ID
- Nota: I dispositivi reali richiedono l'Apple Developer Program ($99/anno)
Build della tua App:
- Clicca il tasto ▶️ Play
- Primo build: 5-10 minuti (sii paziente!)
- Controlla la barra di avanzamento in alto

Risoluzione problemi iOS:

“Nessun account trovato”: Aggiungi Apple ID in Xcode > Settings > Accounts
“Errore durante la build”: Pulisci la build folder (Shift+Command+K) e riprova
Problemi con il Simulator: Riavvia il simulator via Device > Restart

App Bolt in esecuzione su iOS

Esecuzione su Android

Configurazione di Android Studio (prima volta)

Setup SDK (automatico):
- Android Studio rileverà i componenti mancanti
- Clicca su “Install missing SDK” quando richiesto
- Scarica circa 2-3 GB di file
Crea un dispositivo virtuale:
- Apri AVD Manager (icona telefono nella toolbar)
- Clicca su “+ Create Virtual Device”
- Seleziona “Pixel 6” (ottimo default)
- Scarica l'immagine di sistema quando richiesto
- Completa il setup con le opzioni predefinite
Avvia la tua app:
- Seleziona l'emulatore dal menu a tendina
- Clicca sul tasto verde ▶️ Run
- Primo build: 10-15 minuti
- L'emulatore si avvia automaticamente

Risoluzione problemi Android:

“Errore durante la sincronizzazione di Gradle”: Prova File > Invalidate Caches
Emulatore lento: Abilita l'accelerazione hardware nelle impostazioni AVD
Errori di build: Aggiorna Gradle tramite i fix suggeriti

App Bolt in esecuzione su Android

Checklist di verifica

Dopo un build riuscito, verifica:

✅ L'app si avvia senza crash ✅ Il contenuto di Bolt.new è visualizzato correttamente ✅ Pulsanti e interazioni funzionano ✅ La console non mostra errori in rosso

Hai ancora problemi? I messaggi di errore solitamente spiegano esattamente cosa non va: leggili con attenzione!

Passaggio 12: Abilita Live Reload (Sviluppo)

Accelera il tuo workflow di sviluppo con l'hot reloading.

Opzione A: Setup automatico con Cursor

Chiedi a Cursor:

Enable live reload for my Capacitor app development

Cursor configurerà tutto automaticamente.

Opzione B: Configurazione manuale

Ottieni il tuo indirizzo IP locale:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

Aggiorna il tuo capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

Applica la configurazione:

npx cap copy

Live reload abilitato su Bolt

Passaggio 13: Aggiungi funzionalità native

Potenzia la tua app Bolt.new con funzionalità specifiche del dispositivo.

Opzione A: Integrazione tramite AI

Richiesta per Cursor:

Add native share, camera, and geolocation features to my Bolt.new app

Cursor installerà i plugin e creerà l'integrazione code.

Opzione B: Installazione manuale dei plugin

Installa i plugin nativi più popolari:

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

Crea un file di utility per progetti React:

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

Usalo nei tuoi componenti

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

Sincronizza le modifiche

Con Cursor AI:

Sync my native feature changes to all platforms

Comando manuale:

npx cap sync

Funzionalità native aggiunte a Bolt

Passaggio 14: Ottimizzazione per la produzione

Icone dell'app e splash screen

Opzione A: Configurazione con Cursor AI

Prompt:

Create app icons and splash screens for my mobile app

Opzione B: Creazione manuale degli asset

Ottieni lo strumento per gli asset:

npm install -D @capacitor/assets

Prepara la grafica:
- Crea assets/icon.png (1024x1024px)
- Crea assets/splash.png (2732x2732px)
Genera tutte le dimensioni automaticamente:

npx capacitor-assets generate

Asset dell'app Bolt generati

Ottimizza il Build

Per i progetti Vite, ottimizza il build:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

Build finale

Opzione A: Build con Cursor AI

Create the final production build and prepare for app store deployment

Opzione B: Processo di Build manuale

npm run build
npx cap sync
npx cap copy

Risoluzione dei problemi comuni

Problemi specifici del framework

Progetti React/Vite

Assicurati base: './' sia impostato nella config di Vite
Controlla che gli import usino percorsi relativi
Verifica che la dist cartella sia generata correttamente

Progetti Vue

Assicurati che Vue Router usi la hash mode per mobile
Controlla che gli asset siano referenziati correttamente
Verifica il lazy loading dei componenti in ambito mobile

Progetti Next.js

Assicurati che l'export statico sia configurato correttamente
Verifica che gli import dinamici funzionino in contesto statico
Verifica che le rotte API non vengano usate (o siano gestite correttamente)

Errori di build

Se riscontri errori di build:

Cancella node_modules e reinstalla:

rm -rf node_modules package-lock.json
npm install

Controlla la compatibilità mobile delle dipendenze del progetto Bolt.new
Assicurati che tutti i path relativi siano corretti per il deployment mobile

Asset mancanti

Per problemi di caricamento degli asset:

Verifica che tutti gli asset siano nella cartella public
Usa percorsi relativi per immagini e file
Verifica che il build process copi tutti gli asset necessari

Conclusione

Congratulazioni! Hai trasformato con successo il tuo progetto Bolt.new in applicazioni mobile native. La tua web app generata dall'IA può ora:

Eseguirsi nativamente su dispositivi iOS e Android
Accedere alle funzionalità del dispositivo come fotocamera, GPS e storage
Essere distribuita tramite gli app store
Offrire un'esperienza utente mobile ottimizzata

Prossimi passi

Builder Capgo: Usare Native Build in cloud per i rilasci su TestFlight e Play Store
Live Update: Implementa Capgo per aggiornamenti over-the-air istantanei
Analytics: Add mobile analytics to track user behavior
Prestazioni: Monitora e ottimizza le performance mobile della tua app
Test: Testa la tua app su vari dispositivi e dimensioni di schermo

La tua creazione su Bolt.new è pronta per l'ecosistema mobile!

Risorse

Scopri come Capgo può aiutarti a rilasciare aggiornamenti istantanei per la tua app mobile, registrati per un account gratuito oggi.

Continua da Trasforma il tuo progetto Bolt.new in app mobile native con Capacitor

Se stai usando Trasforma il tuo progetto Bolt.new in 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, Aggiunta o aggiornamento dei plugin per i dettagli sull'implementazione in Adding or Updating Plugins, Alternative ai plugin Ionic Enterprise per il workflow del prodotto in Ionic Enterprise Plugin Alternatives, e Capgo Native Build per il workflow di prodotto in Capgo Native Builds.