De meeste React-apps worden tegenwoordig met Vite gebouwd tot een map met statische bestanden: één index.html en het JavaScript dat elke pagina tekent. Lobsite host die map. Voer npm run build uit, dan npx lobsite, en de app staat live op een *.lobsite.app-adres met HTTPS. Deeplinks met React Router werken zodra de single-page-modus aan staat.
Zo werkt het
- Bouw de app met
npm run build. Een Vite-project schrijftdist/; een ouder Create React App-project schrijftbuild/. - Voer
npx lobsiteuit in het project. Het vindt de buildmap en deployt die. De eerste deploy heeft geen account nodig en duurt 6 uur. - Zet de single-page-modus aan voor React Router:
spa = trueinlobsite.toml, of Single-page-app in de instellingen van de site. Houd de site met de claimlink, in een gratis account.
React Router en deeplinks
Met createBrowserRouter of <BrowserRouter> zien adressen eruit als /orders/42. Op een link klikken werkt overal, omdat React Router de pagina in de browser wisselt. Wie dat adres direct opent of herlaadt, vraagt de server om /orders/42, en dat is geen bestand. De single-page-modus beantwoordt het met je index.html, en React Router tekent de juiste pagina.
<HashRouter>(adressen zoals/#/orders/42) werkt zonder single-page-modus, omdat de server alleen/ziet. Browserroutes zien er beter uit en zijn wat zoekmachines verwachten.- De frameworkmodus van React Router met
ssr: falsebouwt ook een single-page-app. Metprerenderworden de opgegeven pagina's als eigen HTML-bestanden geschreven, en de single-page-modus dekt de rest. - TanStack Router en wouter werken op dezelfde manier als React Router.
De deploy toont een tip als hij een router in package.json vindt en de single-page-modus uit staat.
Overstappen van Create React App
Het React-team heeft Create React App in februari 2025 als verouderd aangemerkt en raadt voor nieuwe apps een framework of Vite aan. Een CRA-project kun je nog steeds deployen: npx lobsite vindt build/ en slaat public/ over, dat CRA naar de build kopieert. Overstappen op Vite verandert een paar dingen aan de hostingkant:
- de buildmap wordt
dist/, die op dezelfde manier wordt gevonden; REACT_APP_-omgevingsvariabelen wordenVITE_-variabelen, gelezen metimport.meta.env;index.htmlverhuist vanpublic/naar de hoofdmap van het project.
Heeft de app serverrendering nodig, kijk dan naar Next.js met een statische export, of naar een host die React op een server draait.
spa = true in lobsite.toml, of één schakelaar in het dashboard: deeplinks openen je app, ontbrekende bestanden geven nog steeds 404.
Bestanden worden op hun hash opgeslagen. Een ongewijzigde site opnieuw deployen uploadt 0 bytes.
Bekijk een voorbeeld voordat het live gaat. Zet in één klik terug, inclusief doorverwijzingen.
Elke site krijgt vanaf de eerste deploy een *.lobsite.app-adres met HTTPS.
Laat een formulier wijzen naar /_lobsite/forms/contact. Spamfilter inbegrepen.
Een deploy zonder account is 6 uur live. Met de claimlink houd je hem, gratis.
React-hosts vergeleken
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Deeplinks met React Router | spa = true, of een schakelaar in het dashboard |
Een _redirects-regel |
Een rewrite in vercel.json |
Nee: HashRouter, of 404.html met status 404 |
| Ontbrekende scriptbestanden na een deploy | 404, een duidelijke fout | De index.html van de app |
De index.html van de app |
404 |
| Serverrendering | Nee | Ja, met een framework | Ja, met een framework | Nee |
| Account vóór de eerste deploy | Nee: 6 uur live, daarna gratis houden | Ja | Ja | Ja, en een repository |
| Formulieren zonder backend | Ja, zodra de site in een account staat | Ja | Nee | Nee |
| Eigen domein | Ja, gratis | Ja | Ja | Ja |
Een React-app die in de browser draait, en dat is wat Vite bouwt, deployt Lobsite met één opdracht, met alleen de gewijzigde chunks, en met een voorbeeld-URL voor elke deploy.
Veelgestelde vragen
Waarom toont het herladen van een React Router-pagina ‘Not found’?
Het adres bestaat alleen binnen de app, dus de server heeft er geen bestand voor. Zet de single-page-modus aan met spa = true in lobsite.toml, of Single-page-app in de instellingen van de site.
Kan ik hier een Create React App-project hosten?
Ja. Voer npm run build en npx lobsite uit; de map build/ wordt gevonden en gedeployd. Zet de single-page-modus aan als het React Router met browserroutes gebruikt.
Kan een React-formulier inzendingen versturen zonder backend?
Ja, als het formulier in de gebouwde HTML staat, bijvoorbeeld in index.html, en naar /_lobsite/forms/contact verstuurt. Een formulier dat alleen React tekent, wordt bij de deploy niet gevonden, en de inzendingen worden geweigerd. De docs over formulieren leggen uit hoe je het formulier in de HTML houdt en met fetch() verstuurt.
Heb ik Next.js nodig om een React-app te hosten?
Nee. Een met Vite gebouwde React-app bestaat uit gewone bestanden en draait op elke statische host. Next.js is voor serverrendering of geprerenderde pagina's, en heeft een eigen statische export.