Oppsett av React med Vite
Vi viser hvordan du lager et React- og TypeScript-prosjekt med Vite, starter utviklingsserveren, bygger og publiserer, og løser vanlige feil.
Aurora YazılımRedaksjonen
6 min lesetid
For å sette opp Vite React installerer du først den nyeste LTS-versjonen av Node.js. Deretter gir du prosjektet et navn med kommandoen npm create vite@latest i terminalen og velger malen for React og TypeScript. Gå inn i prosjektmappen, installer avhengighetene med npm install og start utviklingsserveren med npm run dev; nettstedet åpnes som standard på localhost:5173.
Hva er Vite, og hvorfor velge det?
Vite er et byggeverktøy og en utviklingsserver laget for moderne webprosjekter. Under utvikling leverer det koden via nettleserens innebygde støtte for ES-moduler og behandler bare filen som blir forespurt. Derfor starter serveren i løpet av sekunder selv om prosjektet vokser, og endringer du lagrer vises uten at siden lastes på nytt.
Ved publisering pakker Vite koden din minimert, delt opp i deler og med filnavn som egner seg for hurtigbuffer. Det tilbyr ferdige maler for biblioteker som React, Vue og Svelte, og har blitt et av de vanligste utgangspunktene i React-økosystemet.
Vite som alternativ til Create React App
I mange år ble React-prosjekter startet med Create React App. React-teamet anbefaler ikke lenger dette verktøyet for nye prosjekter; den offisielle dokumentasjonen foreslår at du starter enten med et rammeverk (som Next.js) eller et byggeverktøy som Vite. Hvis du leter etter et alternativ til Create React App, er Vite den raskeste overgangen med minst mulig konfigurasjon.
Hvis du trenger sidegenerering på serversiden, filbasert ruting og ferdig sideutdata for SEO, kan du se guiden vår om oppsett av Next.js. For et administrasjonspanel, et internt verktøy eller en enkeltsideapplikasjon (SPA) er Vite som regel et enklere valg.
Forutsetninger
Det eneste reelle kravet for Vite er Node.js. Nye versjoner av Vite slutter å støtte eldre Node-versjoner, så den tryggeste veien er å installere den nyeste LTS-versjonen fra nodejs.org. npm følger med Node.js.
- Nyeste LTS-versjon av Node.js og npm som følger med.
- En koderedigerer; for installasjon og anbefalte utvidelser kan du se artikkelen om oppsett av VS Code.
- Terminal: PowerShell eller Windows Terminal på Windows, Terminal på macOS, og skallet du foretrekker på Linux.
- Valgfritt: Git for versjonskontroll.
Node.js etter operativsystem
Du kan laste ned og installere Node.js fra nodejs.org. Hvis du skal bruke ulike Node-versjoner i flere prosjekter, gjør en versjonsbehandler arbeidet enklere senere.
Windows
Last ned LTS-installasjonsfilen fra nodejs.org og installer den med standardvalgene, eller bruk winget i PowerShell. Etter installasjonen lukker du terminalen og åpner den på nytt, slik at PATH oppdateres.
winget install OpenJS.NodeJS.LTS
node -v
npm -vmacOS
Du kan bruke den offisielle installasjonspakken, eller installere med én kommando hvis Homebrew er installert.
brew install node
node -v
npm -vLinux
Node-versjonen i distribusjonenes pakkelagre er ofte gammel. Å installere på brukernivå med nvm gir både en oppdatert versjon og fjerner behovet for sudo; installer nvm med installasjonsskriptet på nvms egen GitHub-side, og kjør deretter kommandoene under.
nvm install --lts
nvm use --lts
node -vSlik oppretter du et React-prosjekt
Når Node.js er klart, er opprettelsen av et React-prosjekt lik på alle operativsystemer. Kommandoen veileder deg interaktivt: den spør etter prosjektnavn, rammeverk (React) og variant (TypeScript). Hvis du vil angi malen direkte i kommandoen, bruker du formatet under; i npm skrives ekstra parametere etter to bindestreker.
- Hvis du vil jobbe med JavaScript, heter malen react, og for TypeScript react-ts.
- Åpne adressen som vises på Local-linjen i terminalen (standard localhost:5173) i nettleseren.
- Endre en tekst i filen src/App.tsx og lagre; hvis siden oppdateres uten å lastes på nytt, fungerer HMR (hot module replacement).
npm create vite@latest benim-uygulamam -- --template react-ts
cd benim-uygulamam
npm install
npm run devpnpm create vite benim-uygulamam --template react-ts
yarn create vite benim-uygulamam --template react-tsLær prosjektstrukturen å kjenne
Den første forskjellen du legger merke til i et Vite-prosjekt, er at index.html ligger i rotmappen. Vite bruker denne filen som inngangspunkt, og script-taggen i den kaller filen src/main.tsx.
| Fil / mappe | Oppgave |
|---|---|
| index.html | Applikasjonens inngangsside; tittel og metakoder står her |
| src/main.tsx | Startfilen som kobler React til siden |
| src/App.tsx | Hovedkomponenten; her bygger du dine egne sider |
| public/ | Filer som kopieres uten behandling: favicon, robots.txt |
| vite.config.ts | Innstillinger for utvidelser, aliaser, server og build |
| package.json | Avhengigheter samt skriptene dev, build og preview |
Miljøvariabler
Vite sender bare variabler som starter med prefikset VITE_ videre til klientkoden, og du får tilgang til dem via import.meta.env. Disse variablene bygges inn i pakken som sendes til nettleseren; legg aldri hemmelige API-nøkler eller lignende her, men oppbevar dem på serversiden.
VITE_API_URL=https://api.ornek.comBuild og publisering
Utviklingsserveren er bare til lokalt arbeid. Du lager versjonen som skal publiseres med npm run build; resultatet skrives til dist-mappen. npm run preview lar deg teste dette resultatet lokalt, nær slik det blir i produksjon.
dist-mappen består av rene HTML-, CSS- og JavaScript-filer og kan lastes opp til et hvilket som helst statisk vertsmiljø eller en webserver som Nginx. For hastigheten er det viktig at filene komprimeres og leveres med langvarige hurtigbufferhoder; detaljene om disse innstillingene forklarer vi på siden vår om hastighet og ytelse.
- Hvis applikasjonen skal publiseres i en undermappe (eksempel.no/panel/), setter du alternativet base i vite.config.ts til den stien.
- Hvis du bruker React Router, legger du til en regel på serveren som sender alle ukjente adresser til index.html.
- På innholdssider som må synes i søkemotorer, kan ren klientside-rendering være utilstrekkelig; her blir tilnærmingen i SEO-vennlig webdesign viktig.
npm run build
npm run previewVanlige feil og løsninger
Det meste av feilene ved oppsett av Vite skyldes Node-versjonen, porten eller publiseringsinnstillingene. Tabellen under oppsummerer de vanligste tilfellene; for flere kommandoer kan du se guiden om npm-kommandoer.
| Symptom | Hvorfor | Løsning |
|---|---|---|
| Advarselen Vite requires Node.js version... | Gammel Node-versjon | Bytt til den nyeste LTS-versjonen |
| Port 5173 is in use | Porten er åpen i en annen prosess | Vite prøver neste port; angi server.port for en fast port |
| node-kommandoen ble ikke funnet | PATH er ikke oppdatert | Lukk og åpne terminalen, og start om datamaskinen om nødvendig |
| Tom hvit side etter publisering | Feil base-sti | Rett opp base-innstillingen etter publiseringsmappen |
| 404 når siden lastes på nytt | SPA-ruting mangler på serveren | Send alle stier til index.html |
Neste steg
Når du har et fungerende prosjekt, kan du legge til verktøy som React Router for ruting, TanStack Query for datahenting og Tailwind CSS eller CSS Modules for stil. For kodekvalitet bør du utvide ESLint-innstillingene som følger med malen, etter prosjektets behov.
Vite og React sammen gir et sterkt grunnlag for forretningsapplikasjoner som bookingpaneler, lagerskjermer, timebestilling eller administrasjon av QR-meny. I slike produkter avgjør datamodell, tilgangsstyring og sikkerhetskopiering like mye som grensesnittet; hvis du vil bygge videre på et ferdig grunnlag, kan bransjespesifikke programvareløsninger spare deg for tid.
Like viktig som den tekniske plattformen er utformingen av grensesnittet: å planlegge brukerflyt og skjermoppsett før du skriver komponentene er grunnlaget i UI/UX-design. Å tenke på mobile brytpunkter fra begynnelsen er også mye billigere enn å rette opp i etterkant når det gjelder mobiltilpasset design.
Vanlige spørsmål
01Er TypeScript obligatorisk i et React-prosjekt med Vite?
Nei, react-malen fungerer med vanlig JavaScript. I mellomstore og store prosjekter fanger imidlertid TypeScript opp feil mens du skriver og gjør samarbeid i teamet enklere. Det er mulig å bytte senere, men det blir mindre arbeid å starte med react-ts fra begynnelsen.
02Kan jeg flytte mitt eksisterende Create React App-prosjekt til Vite?
Ja. De grunnleggende stegene er å flytte index.html til rotmappen, installere Vite og React-utvidelsen i stedet for react-scripts og endre variabler med prefikset REACT_APP_ til prefikset VITE_. I store prosjekter bør du først prøve i en egen gren og kjøre testene.
03Er et nettsted laget med Vite godt nok for SEO?
For paneler og applikasjonsskjermer er det ikke noe problem. På innholdssider som skal rangeres i søkemotorer, er det sunnere at innholdet genereres som HTML på serveren; da velger man et rammeverk som Next.js eller en løsning med forhåndsrendering (pre-render).
04Bør jeg bruke pnpm i stedet for npm?
pnpm bruker diskplassen mer effektivt og gjør installasjonen raskere; Vite fungerer problemfritt med begge pakkehåndtererne. At alle i teamet bruker det samme verktøyet, er viktigere enn hvilket du velger.
Å sette opp React med Vite tar bare noen minutter; det virkelige arbeidet ligger i arkitekturen til applikasjonen du bygger på toppen. Hvis du trenger et panel, en bookingløsning eller et administrasjonssystem tilpasset virksomheten din, kan du se bransjeløsningene våre; for et raskt og unikt nettsted kan du også se tjenesten vår innen webdesign.
