Piattaforma di sviluppo web full-stack basata su AI di StackBlitz che genera, esegue e distribuisce applicazioni interamente nel browser.
| Comando | Descrizione |
|---|
Naviga su bolt.new | Apri Bolt.new nel browser |
| Accedi con GitHub o Google | Crea account per la persistenza dei progetti |
| Digita un prompt nella chat | Inizia a costruire un’applicazione |
| Clicca “Deploy” quando pronto | Distribuisci su Netlify o altri host |
| Fork su StackBlitz | Continua a modificare nell’IDE StackBlitz |
| Scarica progetto | Ottieni il codice sorgente come zip |
Architettura di Bolt.new:
1. Descrivi cio che vuoi in linguaggio naturale
2. L'AI genera il progetto completo (frontend + backend + configurazione)
3. WebContainer esegue l'app nel browser (nessun server necessario)
4. L'anteprima live si aggiorna mentre l'AI apporta modifiche
5. Iteri chattando — l'AI modifica il codice in tempo reale
6. Distribuisci direttamente su Netlify o scarica il sorgente
Tecnologia: Funziona su StackBlitz WebContainers
- Node.js funziona NEL browser (non su un server remoto)
- npm install, build e dev server funzionano tutti localmente
- Nessun Docker, nessuna VM, nessun cloud compute
| Stile di Prompt | Descrizione |
|---|
| ”Build a todo app with React and Tailwind” | Specifica framework e stile |
| ”Create a REST API with Express and MongoDB” | Prompt focalizzato sul backend |
| ”Make a landing page for a SaaS product” | Prompt focalizzato sul design |
| ”Add authentication with email/password” | Aggiungi funzionalita al progetto esistente |
| ”Fix the bug where the form doesn’t submit” | Debug di problemi esistenti |
| ”Change the color scheme to dark mode” | Modifiche allo stile |
| ”Add a dashboard page with charts” | Richiesta di nuova pagina/funzionalita |
| ”Refactor the code to use TypeScript” | Miglioramenti alla qualita del codice |
Prompt buoni:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Prompt cattivi:
"Make me a website" → Troppo vago
"Build Facebook" → Troppo ampio
"Fix everything" → Nessun obiettivo specifico
Suggerimenti:
- Specifica lo stack tecnologico (React, Vue, Svelte, ecc.)
- Descrivi le funzionalita che ti servono
- Menziona preferenze di stile (Tailwind, CSS modules)
- Fai riferimento ad API o fonti di dati specifiche
- Suddividi app grandi in prompt incrementali
| Framework | Descrizione |
|---|
| React | Libreria UI basata su componenti |
| Next.js | Framework React con SSR/SSG |
| Vue.js | Framework JavaScript progressivo |
| Nuxt | Framework Vue con SSR/SSG |
| Svelte | Framework reattivo a tempo di compilazione |
| SvelteKit | Framework full-stack Svelte |
| Astro | Generatore di siti statici orientato ai contenuti |
| Solid.js | Libreria UI reattiva a grana fine |
| Angular | Framework TypeScript completo |
| Framework | Descrizione |
|---|
| Express.js | Framework web minimale per Node.js |
| Fastify | Framework web veloce per Node.js |
| Hono | Framework leggero edge-first |
| NestJS | Framework enterprise TypeScript |
| tRPC | API type-safe end-to-end |
| Remix | Framework full-stack React |
| Libreria | Descrizione |
|---|
| Tailwind CSS | Framework CSS utility-first |
| shadcn/ui | Libreria di componenti React |
| DaisyUI | Libreria di componenti Tailwind |
| Material UI | Design system di Google per React |
| Chakra UI | Componenti React accessibili |
| Radix UI | Componenti accessibili senza stile |
| Comando | Descrizione |
|---|
| Clicca file nella barra laterale | Apri file nell’editor |
| Modifica codice direttamente | Modifiche manuali al codice |
Ctrl + S | Salva le modifiche al file |
| Clic destro file → New File | Crea nuovo file |
| Clic destro file → Delete | Rimuovi file |
| Clic destro cartella → New Folder | Crea directory |
| Modifiche ai file rilevate automaticamente | L’hot reload aggiorna l’anteprima |
| Comando | Descrizione |
|---|
| Clicca il pannello terminale in basso | Accedi al terminale WebContainer |
npm install package | Installa pacchetti npm |
npm run dev | Avvia il server di sviluppo |
npm run build | Build per produzione |
npx prisma migrate dev | Esegui migrazioni Prisma |
node script.js | Esegui script Node.js |
| Comando | Descrizione |
|---|
| ”Add a navbar with logo and links” | Aggiungi nuovi componenti |
| ”Make the button bigger and blue” | Modifiche allo stile |
| ”Add form validation for email” | Aggiungi funzionalita |
| ”The page crashes when I click submit” | Segnalazione bug |
| ”Show loading spinner while data fetches” | Miglioramenti UX |
| ”Add error handling for the API call” | Robustezza |
| ”Make it responsive for mobile” | Design responsive |
| ”Add dark mode toggle” | Cambio tema |
| Comando | Descrizione |
|---|
| La cronologia chat mostra tutte le modifiche | Traccia cosa ha modificato l’AI |
| ”Undo the last change” | Annulla le modifiche dell’AI |
| ”Go back to the version with the blue header” | Riferisciti a stati precedenti |
| Scarica progetto in qualsiasi momento | Salva snapshot localmente |
| Fork su StackBlitz per git | Integrazione git completa |
| Comando | Descrizione |
|---|
| Clicca il pulsante “Deploy” | Avvia il processo di distribuzione |
| Connetti account Netlify | Autorizza l’accesso a Netlify |
| Build e distribuzione automatiche | Ottieni un URL live in pochi secondi |
| Supporto dominio personalizzato | Configura nella dashboard Netlify |
| HTTPS incluso | Certificati SSL automatici |
| Comando | Descrizione |
|---|
| Scarica progetto → distribuisci manualmente | Qualsiasi provider di hosting |
| Fork su StackBlitz → connetti CI/CD | Distribuzione basata su GitHub |
| Fork su GitHub → auto-deploy Vercel/Netlify | Flussi di lavoro basati su git |
Scarica → npm run build → carica dist/ | Hosting statico manuale |
Flusso di distribuzione:
1. Clicca "Deploy" in Bolt.new
2. Seleziona Netlify (o connetti account)
3. Bolt.new esegue la build del progetto
4. Carica su Netlify automaticamente
5. Ottieni il tuo URL live: https://your-app.netlify.app
Per domini personalizzati:
1. Distribuisci prima per ottenere l'URL Netlify
2. Vai nella dashboard Netlify → Impostazioni dominio
3. Aggiungi il tuo dominio personalizzato
4. Aggiorna i record DNS presso il tuo registrar
| Funzionalita | Descrizione |
|---|
| Node.js funziona nel browser | Nessun server remoto necessario |
| Supporto npm/yarn/pnpm | Gestione completa dei pacchetti |
| File system nel browser | Filesystem virtuale |
| Dev server nel browser | Hot reload con URL locali |
| Docker non necessario | Tutto funziona lato client |
| Funziona offline (dopo il caricamento) | Nessuna connessione internet continua necessaria |
Cosa funziona nei WebContainers:
✓ Node.js (LTS piu recente)
✓ npm, yarn, pnpm
✓ Compilazione TypeScript
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (in memoria)
✓ Prisma (con SQLite)
✓ Operazioni su file system
Cosa NON funziona:
✗ Container Docker
✗ PostgreSQL / MySQL / MongoDB
✗ Dipendenze binarie native
✗ Python / Ruby / Go
✗ Operazioni a livello di sistema
✗ Processi in background a lunga esecuzione
| Database | Descrizione |
|---|
| SQLite (in memoria) | Funziona direttamente nel WebContainer |
| Prisma + SQLite | ORM con database locale |
| Supabase (remoto) | PostgreSQL via API |
| Firebase (remoto) | NoSQL via Firebase SDK |
| Turso (remoto) | Edge SQLite via libSQL |
| PlanetScale (remoto) | MySQL via API |
Per lo sviluppo locale in Bolt.new:
SQLite + Prisma e la combinazione migliore
- Funziona interamente nel WebContainer
- Nessun servizio esterno necessario
- ORM completo con migrazioni
Per la produzione:
Connetti a un database in hosting
- Supabase (piano gratuito: 500MB)
- Turso (piano gratuito: 9GB)
- PlanetScale (piano gratuito: 5GB)
Imposta le stringhe di connessione come variabili d'ambiente
| Template | Descrizione |
|---|
| ”React + Vite + Tailwind starter” | SPA React moderna |
| ”Next.js app with shadcn/ui” | React full-stack |
| ”Express API with Prisma + SQLite” | Backend API REST |
| ”Vue + Nuxt + Tailwind” | Vue full-stack |
| ”Svelte + SvelteKit” | Svelte full-stack |
| ”Astro blog with MDX” | Sito di contenuti |
| ”Landing page with Tailwind” | Pagina marketing |
-
Inizia con un prompt chiaro e specifico — Descrivi lo stack tecnologico, le funzionalita e le preferenze di design fin dall’inizio. “Build a task manager with React, Tailwind, and localStorage persistence” ottiene risultati migliori di “make a todo app.”
-
Costruisci incrementalmente — Inizia con la funzionalita principale, verifica che funzioni, poi aggiungi funzionalita una alla volta. Ogni prompt dovrebbe concentrarsi su una cosa piuttosto che richiedere tutto in una volta.
-
Fai riferimento al codice durante il debug — Invece di “non funziona,” di’ “la funzione handleSubmit in ContactForm.tsx non invia la richiesta POST” per correzioni piu mirate.
-
Usa il terminale per la verifica — Controlla l’output del terminale per errori di build, dipendenze mancanti o problemi runtime prima di chiedere all’AI di fare debug.
-
Scarica backup regolarmente — Scarica il tuo progetto periodicamente come rete di sicurezza. I progetti basati sul browser possono essere persi se cancelli i dati del browser.
-
Specifica le versioni dei pacchetti quando necessario — Se hai bisogno di una versione specifica di una libreria, menzionala: “Use react-query v5” o “Use Tailwind CSS v3, not v4.”
-
Fork su StackBlitz per modifiche avanzate — Quando hai bisogno di git, terminali multipli o flussi di lavoro piu complessi, fai fork del progetto nell’IDE completo di StackBlitz.
-
Usa variabili d’ambiente per i segreti — Non codificare mai chiavi API nei prompt. Chiedi all’AI di usare variabili d’ambiente e impostale nella piattaforma di distribuzione.
-
Scegli SQLite per i database nel browser — Poiche i WebContainers non possono eseguire PostgreSQL o MySQL, usa SQLite con Prisma per lo sviluppo locale e passa a un DB in hosting per la produzione.
-
Sfrutta la palette dei comandi — Premi Ctrl + K per cercare rapidamente file, eseguire comandi e navigare il tuo progetto senza cliccare nei menu.
