Oggi la maggior parte delle app React viene compilata con Vite in una cartella di file statici: un index.html e il JavaScript che disegna ogni pagina. Lobsite ospita quella cartella. Esegui npm run build, poi npx lobsite, e l'app è online a un indirizzo *.lobsite.app con HTTPS. I link diretti di React Router funzionano non appena attivi la modalità a pagina singola.
Come funziona
- Fai la build dell'app con
npm run build. Un progetto Vite scrivedist/; un vecchio progetto Create React App scrivebuild/. - Esegui
npx lobsitenel progetto. Trova la cartella di build e la pubblica. Il primo deploy non richiede account e dura 6 ore. - Attiva la modalità a pagina singola per React Router:
spa = trueinlobsite.toml, o App a pagina singola nelle impostazioni del sito. Tieni il sito con il link per rivendicarlo, in un account gratuito.
React Router e link diretti
Con createBrowserRouter o <BrowserRouter>, gli indirizzi sono come /orders/42. Cliccare un link funziona ovunque, perché React Router cambia pagina nel browser. Aprire direttamente quell'indirizzo, o ricaricarlo, chiede al server /orders/42, che non è un file. La modalità a pagina singola risponde con il tuo index.html e React Router disegna la pagina giusta.
<HashRouter>(indirizzi come/#/orders/42) funziona senza modalità a pagina singola, perché il server vede sempre e solo/. Le route del browser sono più belle e sono ciò che i motori di ricerca si aspettano.- La modalità framework di React Router con
ssr: falseproduce anch'essa un'app a pagina singola. Conprerender, le pagine elencate vengono scritte come file HTML a sé, e la modalità a pagina singola copre il resto. - TanStack Router e wouter funzionano come React Router.
Il deploy mostra un suggerimento quando trova un router in package.json e la modalità a pagina singola è disattivata.
Se arrivi da Create React App
Il team di React ha deprecato Create React App a febbraio 2025 e consiglia un framework o Vite per le nuove app. Un progetto CRA si pubblica ancora: npx lobsite trova build/ e salta public/, che CRA copia nella build. Passare a Vite cambia alcune cose lato hosting:
- la cartella di build diventa
dist/, trovata allo stesso modo; - le variabili d'ambiente
REACT_APP_diventanoVITE_, lette conimport.meta.env; index.htmlsi sposta dapublic/alla cartella principale del progetto.
Se l'app ha bisogno del rendering lato server, guarda invece Next.js con export statico, o un hosting che esegue React su un server.
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.
Fai puntare un modulo a /_lobsite/forms/contact. Filtro antispam incluso.
Un deploy senza account resta online per 6 ore. Il link per rivendicarlo lo conserva, gratis.
Hosting per React a confronto
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Link diretti con React Router | spa = true, o un interruttore nella dashboard |
Una regola in _redirects |
Un rewrite in vercel.json |
No: HashRouter, o 404.html servito con stato 404 |
| File di script mancanti dopo un deploy | 404, un errore chiaro | L'index.html dell'app |
L'index.html dell'app |
404 |
| Rendering lato server | No | Sì, con un framework | Sì, con un framework | No |
| Account prima del primo deploy | No: online 6 ore, poi tienilo gratis | Sì | Sì | Sì, e un repository |
| Moduli senza backend | Sì, quando il sito è in un account | Sì | No | No |
| Dominio personalizzato | Sì, gratis | Sì | Sì | Sì |
Per un'app React che gira nel browser, cioè ciò che compila Vite, Lobsite la pubblica con un comando, carica solo i chunk modificati e tiene un URL di anteprima per ogni deploy.
Domande frequenti
Perché ricaricando una pagina di React Router compare «Not found»?
L'indirizzo esiste solo dentro l'app, quindi il server non ha un file per esso. Attiva la modalità a pagina singola con spa = true in lobsite.toml, o App a pagina singola nelle impostazioni del sito.
Posso ospitare qui un progetto Create React App?
Sì. Esegui npm run build e npx lobsite; la cartella build/ viene trovata e pubblicata. Attiva la modalità a pagina singola se usa React Router con route del browser.
Un modulo React può inviare dati senza backend?
Sì, se il modulo è nell'HTML compilato, per esempio in index.html, e invia a /_lobsite/forms/contact. Un modulo disegnato solo da React non viene trovato al deploy e i suoi invii vengono rifiutati. La documentazione dei moduli spiega come tenere il modulo nell'HTML e inviarlo con fetch().
Serve Next.js per ospitare un'app React?
No. Un'app React compilata con Vite è fatta di semplici file e gira su qualsiasi hosting statico. Next.js serve per il rendering lato server o le pagine prerenderizzate, e ha un suo export statico.