Installera React med Vite

01Vad är Vite och varför välja det?

Vite är ett byggverktyg och en utvecklingsserver för moderna webbprojekt. Under utveckling levererar det koden med webbläsarens inbyggda stöd för ES-moduler och bearbetar bara den fil som efterfrågas. Därför startar servern på några sekunder även när projektet växer, och ändringar du sparar syns på skärmen utan att sidan laddas om.

För publicering paketerar Vite din kod minifierad, uppdelad i delar och med filnamn som passar cache. Det erbjuder färdiga mallar för bibliotek som React, Vue och Svelte och har blivit en av de vanligaste startpunkterna i React-ekosystemet.

Vite som alternativ till Create React App

I många år startades React-projekt med Create React App. React-teamet rekommenderar inte längre verktyget för nya projekt; den officiella dokumentationen föreslår att börja med antingen ett ramverk (som Next.js) eller ett byggverktyg som Vite. Letar du efter ett alternativ till Create React App är Vite den snabbaste vägen med minst konfiguration.

Behöver du sidgenerering på serversidan, filbaserad routing och färdig sidutdata för SEO kan du titta på vår guide om installation av Next.js. För en adminpanel, ett internt verktyg eller en single page-applikation (SPA) är Vite oftast det enklare valet.

02Förutsättningar

Vites enda egentliga förutsättning är Node.js. Nya Vite-versioner slutar stödja gamla Node-versioner, så det tryggaste är att installera den aktuella LTS-versionen från nodejs.org. npm följer med Node.js.

• Aktuell LTS-version av Node.js och npm som följer med.
• En kodeditor; för installation och rekommenderade tillägg kan du titta på inlägget om installation av VS Code.
• Terminal: PowerShell eller Windows Terminal i Windows, Terminal i macOS och valfritt skal i Linux.
• Valfritt: Git för versionshantering.

03Node.js för ditt operativsystem

Du kan ladda ner och installera Node.js från nodejs.org. Ska du använda olika Node-versioner i flera projekt underlättar det senare att välja en versionshanterare.

Windows

Ladda ner LTS-installationsfilen från nodejs.org och installera med standardalternativen, eller använd winget i PowerShell. Stäng och öppna terminalen igen efter installationen så att PATH uppdateras.

winget install OpenJS.NodeJS.LTS
node -v
npm -v

macOS

Du kan använda det officiella installationspaketet, eller installera med ett enda kommando om du har Homebrew.

brew install node
node -v
npm -v

Linux

Node-versionen i distributionernas paketkällor är ofta gammal. Att installera med nvm på användarnivå ger både en aktuell version och gör att du slipper sudo; när du har installerat nvm med installationsskriptet på dess egen GitHub-sida kör du följande kommandon.

nvm install --lts
nvm use --lts
node -v

04Steg för att skapa ett React-projekt

När Node.js är klart är det samma sak att skapa ett React-projekt på alla operativsystem. Kommandot guidar dig interaktivt: projektnamn, ramverk (React) och variant (TypeScript) efterfrågas. Vill du ange mallen direkt i kommandot, använd formatet nedan; i npm skrivs extra parametrar efter två bindestreck.

• Vill du arbeta med JavaScript heter mallen react, och för TypeScript react-ts.
• Öppna adressen som visas på raden Local i terminalen (som standard localhost:5173) i webbläsaren.
• Ändra en text i filen src/App.tsx och spara; om sidan uppdateras utan att laddas om fungerar HMR (hot module replacement).

npm create vite@latest benim-uygulamam -- --template react-ts
cd benim-uygulamam
npm install
npm run dev

pnpm create vite benim-uygulamam --template react-ts
yarn create vite benim-uygulamam --template react-ts

05Lär känna projektstrukturen

Det första som sticker ut i ett Vite-projekt är att filen index.html ligger i rotkatalogen. Vite använder den som ingångspunkt, och script-taggen i den anropar filen src/main.tsx.

Miljövariabler

Vite för bara över variabler som börjar med prefixet VITE_ till klientkoden, och du når dem via import.meta.env. De här variablerna bäddas in i paketet som går till webbläsaren; lägg aldrig hemliga API-nycklar här, utan förvara dem på serversidan.

VITE_API_URL=https://api.ornek.com

06Bygga och publicera

Utvecklingsservern är bara till för lokalt arbete. Versionen du ska publicera tar du fram med npm run build; utdata skrivs till mappen dist. Med npm run preview kan du testa den utdatan lokalt på ett sätt som ligger nära den verkliga publiceringen.

Mappen dist består av vanliga HTML-, CSS- och JavaScript-filer och kan laddas upp till valfri statisk hosting eller en webbserver som Nginx. För snabbhetens skull är det viktigt att filerna komprimeras och levereras med långa cache-headers; detaljerna kring de inställningarna beskriver vi på sidan hastighet och prestanda.

• Ska applikationen publiceras i en undermapp (exempel.se/panel/) sätter du alternativet base i vite.config.ts till den sökvägen.
• Använder du React Router, lägg till en regel på servern som skickar alla okända adresser till index.html.
• På innehållssidor som ska synas i sökmotorer räcker det inte alltid med rendering enbart på klientsidan; här blir en SEO-anpassad webbdesign viktig.

npm run build
npm run preview

07Vanliga fel och lösningar

De flesta fel vid installation av Vite beror på Node-versionen, porten eller publiceringsinställningarna. Tabellen nedan sammanfattar de vanligaste fallen; för fler kommandon kan du titta på guiden om npm-kommandon.

08Nästa steg

När du har ett fungerande projekt kan du lägga till verktyg som React Router för routing, TanStack Query för datahämtning och Tailwind CSS eller CSS Modules för stil. För kodkvaliteten kan du utöka inställningarna för ESLint som följer med mallen efter ditt projekt.

Kombinationen Vite och React ger en stark grund för affärsapplikationer som bokningspaneler, lagervyer, tidsbokning eller hantering av QR-menyer. I sådana produkter är datamodell, behörigheter och backup lika avgörande som gränssnittet; vill du bygga vidare på en färdig plattform kan branschanpassade mjukvarulösningar spara tid.

Gränssnittets upplägg är lika viktigt som den tekniska grunden: att planera användarflöde och skärmlayout innan du skriver komponenterna är grunden i en UI/UX-designprocess. Att tänka på mobila brytpunkter från början är också mycket billigare än att rätta till dem i efterhand för en mobilanpassad design.