Vad är Vite? En lättförståelig guide för appbyggare

Vite (uttalas “veet”, franska för “snabb”) är ett byggverktyg för webbplatser och webbappar. Medan du bygger kör det en utvecklingsserver som visar dina ändringar i webbläsaren nästan direkt. När du är redo att lansera paketerar det din kod i små, optimerade filer som vilken webbhotell som helst kan servera. Det är gratis, öppen källkod och standardverktyget bakom många React-, Vue- och Svelte-projekt.

Varför Vite spelar roll när du bygger med AI

Du kanske aldrig skriver ett Vite-kommando, men om din app byggdes med en AI-appbyggare kör Vite troligen den. Mythex startar nya projekt med Vite + React + TypeScript + Tailwind om du inte ber om något annat (hur tekniken väljs).

Att veta vad Vite gör hjälper dig att:

• Förstå förhandsvisningen. Den live-förhandsvisning som uppdateras när AI:n redigerar filer är oftast en Vite-utvecklingsserver.
• Förstå publiceringen. En Vite-app blir en mapp med statiska filer – HTML, JavaScript, CSS och bilder – vilket är billigt och enkelt att hosta.
• Läsa felmeddelanden. När förhandsvisningen visar ett rött felöverlägg eller en tom sida är det ofta Vite som rapporterar att en fil inte gick att kompilera.
• Känna till dess gränser. Vite bygger frontend. Om din app behöver en backend – en databas, hemliga API-nycklar, betalningar – körs den någon annanstans. Se frontend kontra backend.

En vardagsliknelse

Tänk på ett restaurangkök.

• Under förberedelserna (utveckling) smakar kocken och justerar varje rätt allteftersom. Ändra kryddningen, smaka igen en sekund senare. Det är Vites utvecklingsserver: du ändrar en fil, sidan uppdateras direkt, ofta utan att du tappar det du skrivit i ett formulär.
• För en cateringbeställning (produktion) tillagas, portioneras, packas och märks allt så att det tål transport och kan serveras var som helst. Det är vite build: din kod buntas, krymps och får fingeravtryck i filer redo för vilken värd som helst.

Samma recept, två helt olika sätt att hantera dem – och Vite gör båda.

Vad Vite faktiskt gör

En modern webbapp består av många filer: komponenter, stilar, bilder och tredjepartsbibliotek. Webbläsare kan inte använda allt det som det är skrivet. TypeScript måste bli JavaScript, Reacts JSX måste omvandlas, och Tailwind-klasser måste bli CSS.

Vite hanterar detta i två lägen:

Äldre verktyg buntade hela appen innan något visades, så att starta och uppdatera ett stort projekt kunde ta lång tid. Vites knep är att hoppa över det under utveckling och låta webbläsaren ladda filer efter behov. För produktion buntar den fortfarande – från Vite 8 med en bundler som heter Rolldown – eftersom många små filer är långsammare för besökare än ett fåtal optimerade.

Ett praktiskt exempel: vad som finns i ett Vite-projekt

Så här ungefär ser ett litet Vite- + React-projekt ut:

my-app/
  index.html          ← den enda HTML-sida appen startar från
  package.json        ← lista över bibliotek och skript (dev, build)
  vite.config.ts      ← Vite-inställningar och plugins
  src/
    main.tsx          ← startar React och monterar den i index.html
    App.tsx           ← din apps toppkomponent
    index.css         ← stilar, t.ex. @import "tailwindcss";
  public/             ← filer som kopieras oförändrade (favicon, robots.txt)

Och skripten i package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Följ nu en enda ändring:

1. Du ber AI:n “gör rubriken blå”.
2. Den redigerar en klass i App.tsx.
3. Vite märker att filen ändrats, omvandlar just den filen och skickar uppdateringen till webbläsaren.
4. Rubriken blir blå i förhandsvisningen, oftast inom en sekund.

När du publicerar skapar vite build något i stil med dist/index.html plus dist/assets/index-a1b2c3.js. Den till synes slumpmässiga delen av filnamnet ändras när innehållet ändras, så att webbläsare och CDN:er kan cacha filer länge utan att servera föråldrad kod.

Miljövariabler i Vite

Vite exponerar bara variabler vars namn börjar med VITE_ för kod i webbläsaren, till exempel VITE_PUBLIC_MAP_ID. Det är en säkerhetsåtgärd: allt i webbläsarkod kan ses av besökare, så hemliga nycklar får aldrig ha det prefixet och måste stanna i en backend. Se miljövariabler och hemligheter.

Viktiga termer

Vanliga missuppfattningar

• “Vite är ett ramverk.” Det är ett byggverktyg. React, Vue eller Svelte är ramverket; Vite kör och paketerar det.
• “En Vite-app innehåller en backend.” En vanlig Vite-app är enbart frontend. Databaser, inloggningar och hemliga nycklar kräver en server eller ett API bredvid.
• “Utvecklingsservern går bra att lägga ut online.” Den är inte avsedd för riktig trafik. Publicera alltid resultatet av produktionsbygget.
• “Allt i .env är hemligt.” I en Vite-app bakas VITE_-variabler in i de filer som varje besökare laddar ner.
• “Om en sida ger 404 vid uppdatering är appen trasig.” I en single-page app måste hosten skicka varje route tillbaka till index.html. Det är en hostinginställning – se hur du åtgärdar 404-fel efter publicering.

Vad du kan be din AI-byggare om

• “Är den här appen enbart Vite (frontend), eller har den också en backend? Var körs varje del?”
• “Kör produktionsbygget och åtgärda alla fel och varningar innan jag publicerar.”
• “Kontrollera att inga hemliga nycklar finns i VITE_-variabler eller någonstans i frontend-koden.”
• “Förhandsvisningen visar en tom sida – kontrollera Vite- och webbläsarkonsolens fel och åtgärda orsaken.” Se hur du åtgärdar en tom vit sida.
• “Se till att det går att ladda om vilken sid-URL som helst efter publicering, inte bara startsidan.”

Vite i Mythex

Varje nytt Mythex-projekt startar på Vite om du inte ber om Next.js, statisk HTML eller en annan backend. Live-förhandsvisningen i din privata sandlåda uppdateras när agenten redigerar filer, och Publicera bygger appen och driftsätter den – det finns ingen hosting att konfigurera själv. Behöver du senare ett API eller en databas kan du be om det i chatten, och Mythex kan lägga till en backend-tjänst bredvid Vite-frontenden (appar med flera tjänster).

Frågor