Cos'è Vite? Guida semplice per chi crea app

Vite (si pronuncia «vit», parola francese che significa «veloce») è uno strumento di build per siti e app web. Mentre costruisci, avvia un server di sviluppo che mostra le modifiche nel browser quasi all'istante. Quando sei pronto al lancio, impacchetta il codice in file piccoli e ottimizzati che qualsiasi hosting web può servire. È gratuito, open source e lo strumento predefinito dietro molti progetti React, Vue e Svelte.

Perché Vite conta quando costruisci con l'AI

Potresti non digitare mai un comando di Vite, ma se la tua app è stata creata con un builder AI, probabilmente è Vite a farla girare. Mythex avvia i nuovi progetti su Vite + React + TypeScript + Tailwind a meno che tu non chieda altro (come viene scelta la tecnologia).

Sapere cosa fa Vite ti aiuta a:

• Capire l'anteprima. L'anteprima live che si aggiorna mentre l'AI modifica i file è tipicamente un server di sviluppo Vite.
• Capire il deploy. Un'app Vite diventa una cartella di file statici — HTML, JavaScript, CSS e immagini — economica e semplice da ospitare.
• Leggere i messaggi di errore. Quando l'anteprima mostra una schermata di errore rossa o una pagina bianca, spesso è Vite che segnala che un file non è stato compilato.
• Conoscerne i limiti. Vite costruisce il frontend. Se la tua app ha bisogno di un backend — un database, chiavi API segrete, pagamenti — quello gira altrove. Vedi frontend vs backend.

Un'analogia quotidiana

Pensa a una cucina di ristorante.

• Durante la preparazione del servizio (sviluppo), lo chef assaggia e regola ogni piatto man mano. Cambi il condimento, assaggi di nuovo un secondo dopo. Questo è il server di sviluppo di Vite: cambi un file, la pagina si aggiorna subito, spesso senza perdere ciò che avevi scritto in un modulo.
• Per un ordine per catering (produzione), tutto viene cotto, porzionato, confezionato ed etichettato così che viaggi bene e possa essere servito ovunque. È vite build: il tuo codice viene raggruppato, ridotto e rinominato con un'impronta in file pronti per qualsiasi hosting.

Stesse ricette, due modi molto diversi di gestirle — e Vite fa entrambe le cose.

Cosa fa davvero Vite

Un'app web moderna è fatta di tanti file: componenti, stili, immagini e librerie di terze parti. I browser non possono usare tutto questo così com'è. TypeScript deve diventare JavaScript, il JSX di React deve essere trasformato, e le classi Tailwind devono diventare CSS.

Vite gestisce questo in due modalità:

Gli strumenti più vecchi raggruppavano l'intera app prima di mostrare qualsiasi cosa, quindi avviare e aggiornare un progetto grande poteva richiedere molto tempo. Il trucco di Vite è saltare questo passaggio durante lo sviluppo e lasciare che il browser carichi i file man mano che servono. Per la produzione, invece, continua a raggruppare — da Vite 8, con un bundler chiamato Rolldown — perché molti file piccoli sono più lenti per i visitatori rispetto a pochi file ottimizzati.

Un esempio concreto: cosa c'è dentro un progetto Vite

Ecco più o meno come appare una piccola app Vite + React:

my-app/
  index.html          ← l'unica pagina HTML da cui parte l'app
  package.json        ← elenco di librerie e script (dev, build)
  vite.config.ts      ← impostazioni e plugin di Vite
  src/
    main.tsx          ← avvia React e lo monta in index.html
    App.tsx           ← il componente di primo livello della tua app
    index.css         ← stili, es. @import "tailwindcss";
  public/             ← file copiati così come sono (favicon, robots.txt)

E gli script in package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Ora segui una singola modifica:

1. Chiedi all'AI di «rendere blu il titolo».
2. Lei modifica una classe in App.tsx.
3. Vite nota che il file è cambiato, trasforma solo quel file e invia l'aggiornamento al browser.
4. Il titolo diventa blu nell'anteprima, di solito in meno di un secondo.

Quando pubblichi, vite build produce qualcosa come dist/index.html più dist/assets/index-a1b2c3.js. La parte dal nome casuale del file cambia ogni volta che cambia il contenuto, così browser e CDN possono tenere i file in cache a lungo senza servire codice vecchio.

Variabili d'ambiente in Vite

Vite espone al codice del browser solo le variabili il cui nome inizia con VITE_, ad esempio VITE_PUBLIC_MAP_ID. È una misura di sicurezza: tutto ciò che sta nel codice del browser può essere visto dai visitatori, quindi le chiavi segrete non devono mai avere quel prefisso e devono restare su un backend. Vedi variabili d'ambiente e segreti.

Termini chiave

Idee sbagliate comuni

• «Vite è un framework.» È uno strumento di build. React, Vue o Svelte sono il framework; Vite lo esegue e lo impacchetta.
• «Un'app Vite include un backend.» Un'app Vite standard è solo frontend. Database, login e chiavi segrete richiedono un server o un'API affiancati.
• «Il server di sviluppo va bene da mettere online.» Non è pensato per il traffico reale. Pubblica sempre l'output della build di produzione.
• «Tutto ciò che sta in .env è segreto.» In un'app Vite, le variabili VITE_ vengono incorporate nei file che ogni visitatore scarica.
• «Se ricaricando una pagina ottengo un 404, l'app è rotta.» In una single-page app, l'hosting deve rimandare ogni percorso a index.html. È un'impostazione dell'hosting — vedi come risolvere gli errori 404 dopo il deploy.

Cosa chiedere al tuo builder AI

• «Questa app è solo Vite (frontend) o ha anche un backend? Dove gira ciascuna parte?»
• «Esegui la build di produzione e correggi errori e avvisi prima che io pubblichi.»
• «Verifica che nessuna chiave segreta si trovi in variabili VITE_ o da qualche parte nel codice frontend.»
• «L'anteprima mostra una pagina bianca — controlla gli errori di Vite e della console del browser e correggi la causa.» Vedi come risolvere una pagina bianca.
• «Assicurati che ricaricare qualsiasi URL di pagina funzioni dopo la pubblicazione, non solo la home.»

Vite in Mythex

Ogni nuovo progetto Mythex parte da Vite, a meno che tu non chieda Next.js, HTML statico o un backend diverso. L'anteprima live nel tuo sandbox privato si aggiorna mentre l'agente modifica i file, e Pubblica costruisce l'app e la distribuisce — non devi configurare nessun hosting da solo. Se in seguito ti serve un'API o un database, chiedilo in chat e Mythex può aggiungere un servizio backend accanto al frontend Vite (app multi-servizio).

Domande