Host en React-app: Vite, React Router, dyplenker

Q: Kan jeg hoste et Create React App-prosjekt her?

Ja. Kjør npm run build og npx lobsite; mappen build/ blir funnet og deployet. Slå på single-page-modus hvis det bruker React Router med nettleserruter.

De fleste React-apper bygges i dag med Vite til en mappe med statiske filer: én index.html og JavaScript-en som tegner hver side. Lobsite hoster den mappen. Kjør npm run build, så npx lobsite, og appen er live på en *.lobsite.app-adresse med HTTPS. Dyplenker med React Router fungerer så snart single-page-modus er på.

Slik fungerer det

Bygg appen med npm run build. Et Vite-prosjekt skriver dist/; et eldre Create React App-prosjekt skriver build/.
Kjør npx lobsite i prosjektet. Den finner build-mappen og deployer den. Første deploy trenger ingen konto og varer i 6 timer.
Slå på single-page-modus for React Router: spa = true i lobsite.toml, eller Single-page-app i nettstedets innstillinger. Behold nettstedet med krav-lenken, i en gratis konto.

React Router og dyplenker

Med createBrowserRouter eller <BrowserRouter> ser adresser ut som /orders/42. Å klikke på en lenke fungerer overalt, fordi React Router bytter side i nettleseren. Å åpne den adressen direkte, eller laste den på nytt, ber serveren om /orders/42, som ikke er en fil. Single-page-modus svarer med index.html, og React Router tegner riktig side.

<HashRouter> (adresser som /#/orders/42) fungerer uten single-page-modus, siden serveren bare ser /. Nettleserruter ser bedre ut og er det søkemotorer forventer.
Rammeverksmodusen i React Router med ssr: false bygger også en single-page-app. Med prerender satt skrives de oppførte sidene som egne HTML-filer, og single-page-modus dekker resten.
TanStack Router og wouter fungerer på samme måte som React Router.

Deployen viser et tips når den finner en ruter i package.json og single-page-modus er av.

Fra Create React App

React-teamet avviklet Create React App i februar 2025 og anbefaler et rammeverk eller Vite for nye apper. Et CRA-prosjekt kan fortsatt deployes: npx lobsite finner build/ og hopper over public/, som CRA kopierer inn i bygget. Å bytte til Vite endrer noen ting på hostingsiden:

build-mappen blir dist/, som finnes på samme måte;
REACT_APP_-miljøvariabler blir VITE_-variabler, lest med import.meta.env;
index.html flytter fra public/ til prosjektets toppmappe.

Trenger appen serverrendering, se heller på Next.js med statisk eksport, eller en vert som kjører React på en server.

Single-page-apper

spa = true i lobsite.toml, eller én bryter i dashbordet: dyplenker åpner appen din, manglende filer gir fortsatt 404.

Bare endrede filer lastes opp

Filer lagres etter hash. Å deploye et uendret nettsted på nytt laster opp 0 byte.

Hver deploy får en URL

Forhåndsvis før du går live. Rull tilbake med ett klikk, inkludert videresendinger.

HTTPS overalt

Hvert nettsted får en *.lobsite.app-adresse med HTTPS fra første deploy.

Skjemaer som bare fungerer

Pek et skjema mot /_lobsite/forms/contact. Spamfilter inkludert.

Prøv uten konto

En deploy uten konto er live i 6 timer. Med krav-lenken beholder du den, gratis.

React-verter sammenlignet

	Lobsite	Netlify	Vercel	GitHub Pages
Dyplenker med React Router	`spa = true`, eller en bryter i dashbordet	En `_redirects`-regel	En rewrite i `vercel.json`	Nei: `HashRouter`, eller `404.html` levert med status 404
Manglende skriptfiler etter en deploy	404, en tydelig feil	Appens `index.html`	Appens `index.html`	404
Serverrendering	Nei	Ja, med et rammeverk	Ja, med et rammeverk	Nei
Konto før første deploy	Nei: live i 6 timer, så behold det gratis	Ja	Ja	Ja, og et repository
Skjemaer uten backend	Ja, når nettstedet er i en konto	Ja	Nei	Nei
Eget domene	Ja, gratis	Ja	Ja	Ja

For en React-app som kjører i nettleseren, som er det Vite bygger, deployer Lobsite den med én kommando, laster bare opp delene som er endret, og beholder en forhåndsvisnings-URL for hver deploy.

Ofte stilte spørsmål

Hvorfor viser en React Router-side «Not found» når jeg laster den på nytt?

Adressen finnes bare inne i appen, så serveren har ingen fil for den. Slå på single-page-modus med spa = true i lobsite.toml, eller Single-page-app i nettstedets innstillinger.

Kan jeg hoste et Create React App-prosjekt her?

Ja. Kjør npm run build og npx lobsite; mappen build/ blir funnet og deployet. Slå på single-page-modus hvis det bruker React Router med nettleserruter.

Kan et React-skjema sende innsendinger uten backend?

Ja, hvis skjemaet ligger i den bygde HTML-en, for eksempel i index.html, og sender til /_lobsite/forms/contact. Et skjema som bare React tegner, blir ikke funnet ved deploy, og innsendingene avvises. Dokumentasjonen for skjemaer forklarer hvordan du holder skjemaet i HTML-en og sender det med fetch().

Trenger jeg Next.js for å hoste en React-app?

Nei. En React-app bygget med Vite er vanlige filer og kjører hos enhver statisk vert. Next.js er for serverrendering eller forhåndsrendrede sider, og har sin egen statiske eksport.

Hosting av React-apper