Vite compila progetti React, Vue, Svelte, Solid e JavaScript puro in una cartella di file statici, dist/. Lobsite ospita quella cartella. Esegui npm run build, poi npx lobsite, e l'app è online a un indirizzo *.lobsite.app con HTTPS. Se l'app ha il routing lato client, un'impostazione fa funzionare i link diretti.
Realizzare un browser game con un template Vite? Guida all'hosting Phaser copre le risorse di gioco, il dimensionamento dell'area di disegno e le build di test insieme a questo flusso di lavoro di distribuzione.
Come funziona
- Fai la build con
npm run build(cioèvite build). L'app finisce indist/, con i file con hash indist/assets/. - Esegui
npx lobsitenel progetto. Pubblicadist/, nonpublic/, che Vite ha già copiato nella build. Il primo deploy non richiede account e dura 6 ore. - Attiva la modalità a pagina singola se l'app ha un router: aggiungi
spa = truealobsite.toml, o attiva App a pagina singola nelle impostazioni del sito. Poi tieni il sito con il link per rivendicarlo, in un account gratuito.
Routing e modalità a pagina singola
Un'app Vite con React Router, Vue Router o TanStack Router ha un solo index.html. Aprire direttamente /settings chiede al server un file che non esiste. Con la modalità a pagina singola attiva, Lobsite risponde a quei percorsi con il tuo index.html e il router disegna la pagina:
# lobsite.toml
spa = true
Solo le richieste di pagina ricevono l'app. Un file mancante come un vecchio /assets/index-3f9a.js riceve un vero 404, così un visitatore che ha ancora aperta la versione precedente dopo un deploy vede un errore chiaro, non HTML al posto di uno script. Il deploy mostra un suggerimento quando package.json contiene un router e la modalità a pagina singola è disattivata. Di più nella documentazione.
vite.config e la build
baseresta al valore predefinito,/: l'app è servita dalla radice del suo indirizzo. Impostalo solo per un sito di progetto GitHub Pages e toglilo quando traslochi.- Le variabili d'ambiente che iniziano con
VITE_vengono scritte nella build. Chiunque apra l'app può vederle, quindi non metterci segreti; i file.envnon vengono mai pubblicati. - Più pagine (
build.rollupOptions.inputcon più di un file HTML) formano un sito multipagina: ogni pagina è un file e la modalità a pagina singola non serve. npm run previewservedist/in locale, il controllo più rapido prima di un deploy.
Cache dei file con hash
Vite mette un hash del contenuto di ogni file nel suo nome, come index-3f9a.js, quindi un file con un certo nome non cambia mai. Anche Lobsite salva i file per contenuto, quindi un deploy carica solo i chunk modificati. Per far tenere quei file ai browser per un anno, aggiungi una regola di header:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html viene sempre ricontrollato, così i visitatori ricevono la nuova versione subito dopo un deploy.
spa = true in lobsite.toml, o un interruttore nella dashboard: i link diretti aprono la tua app, i file mancanti danno ancora 404.
I file vengono salvati in base al loro hash. Ripubblicare un sito invariato carica 0 byte.
Anteprima prima di andare online. Rollback in un clic, reindirizzamenti compresi.
Ogni sito riceve un indirizzo *.lobsite.app con HTTPS dal primo deploy.
Reindirizzamenti, header e moduli stanno in lobsite.toml e viaggiano con ogni deploy.
Un deploy senza account resta online per 6 ore. Il link per rivendicarlo lo conserva, gratis.
Hosting per Vite a confronto
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Link diretti in un'app a pagina singola | spa = true, o un interruttore nella dashboard |
Una regola in _redirects |
Un rewrite in vercel.json |
No: copia index.html in 404.html, servito con stato 404 |
| File di script mancanti | 404 | L'index.html dell'app |
L'index.html dell'app |
404 |
| Build sul server | No: pubblichi dist/ |
Sì | Sì | In GitHub Actions |
| Account prima del primo deploy | No: online 6 ore, poi tienilo gratis | Sì | Sì | Sì, e un repository |
| Dominio personalizzato | Sì, gratis | Sì | Sì | Sì |
Netlify e Vercel fanno la build da Git ed eseguono funzioni server. Lobsite è il modo più rapido per mettere online un'app Vite compilata dal tuo computer, dalla CI o da un agente IA, con il routing a pagina singola in una riga o un clic.
Domande frequenti
Perché le pagine della mia app Vite diverse dalla home mostrano «Not found»?
L'app usa il routing lato client e il server non ha file per quei percorsi. Attiva la modalità a pagina singola: spa = true in lobsite.toml, o App a pagina singola nelle impostazioni del sito.
Lobsite esegue la mia build Vite?
No. Fai la build sul tuo computer o in CI, poi pubblica dist/. Ciò che hai controllato con npm run preview è esattamente ciò che va online.
Posso usare le variabili d'ambiente di Vite?
Sì, quelle VITE_, che vengono scritte nella build quando la esegui. Rifai la build dopo averle cambiate. Tutto ciò che è segreto va su un server, non in un'app Vite.
Un sito Vite multipagina ha bisogno della modalità a pagina singola?
No. Ogni pagina HTML è un file a sé, e about.html si apre su /about. Lascia disattivata la modalità a pagina singola, così un indirizzo scritto male riceve il tuo 404.html.