Hva er Vite? En enkel guide for appbyggere

Vite (uttales «veet», fransk for «rask») er et byggverktøy for nettsider og web-apper. Mens du bygger, kjører det en utviklingsserver som viser endringene dine i nettleseren nesten øyeblikkelig. Når du er klar til å lansere, pakker det koden din i små, optimaliserte filer som alle nettsidetjenere kan vise. Det er gratis, åpen kildekode, og standardverktøyet bak mange React-, Vue- og Svelte-prosjekter.

Hvorfor Vite er viktig når du bygger med AI

Du skriver kanskje aldri en Vite-kommando, men hvis appen din er bygget med en AI-appbygger, kjører Vite den sannsynligvis. Mythex starter nye prosjekter på Vite + React + TypeScript + Tailwind med mindre du ber om noe annet (slik velges teknologien).

Å vite hva Vite gjør, hjelper deg med å:

• Forstå forhåndsvisningen. Den live forhåndsvisningen som oppdateres når AI-en redigerer filer, er vanligvis en Vite-utviklingsserver.
• Forstå publisering. En Vite-app blir en mappe med statiske filer – HTML, JavaScript, CSS og bilder – som er billig og enkel å drifte.
• Lese feilmeldinger. Når forhåndsvisningen viser en rød feilboks eller en tom side, er det ofte Vite som melder at en fil ikke kunne kompileres.
• Kjenne grensene. Vite bygger frontend. Hvis appen din trenger en backend – en database, hemmelige API-nøkler, betalinger – kjører den et annet sted. Se frontend vs. backend.

En hverdagslig sammenligning

Tenk på et restaurantkjøkken.

• Under forberedelsene (utvikling) smaker kokken og justerer hver rett underveis. Endrer krydderet, smaker igjen et sekund senere. Slik fungerer Vites utviklingsserver: du endrer en fil, siden oppdateres med en gang, ofte uten at du mister det du har skrevet inn i et skjema.
• Til en cateringbestilling (produksjon) blir alt tilberedt, porsjonert, pakket og merket, slik at det tåler transport og kan serveres hvor som helst. Det er vite build: koden din blir samlet, gjort mindre og fått unike filnavn, klar for alle tjenere.

Samme oppskrifter, to helt forskjellige måter å håndtere dem på – og Vite gjør begge.

Hva Vite faktisk gjør

En moderne web-app består av mange filer: komponenter, stiler, bilder og tredjepartsbiblioteker. Nettleserne kan ikke bruke alt dette slik det er skrevet. TypeScript må gjøres om til JavaScript, Reacts JSX må omformes, og Tailwind-klasser må gjøres om til CSS.

Vite håndterer dette i to moduser:

Eldre verktøy pakket hele appen før noe ble vist, så oppstart og oppdateringer av et stort prosjekt kunne ta lang tid. Vites knep er å hoppe over dette under utvikling og la nettleseren laste filer etter behov. For produksjon pakker det fortsatt – fra Vite 8 med en pakker som heter Rolldown – fordi mange små filer er tregere for besøkende enn noen få optimaliserte.

Et praktisk eksempel: hva som finnes i et Vite-prosjekt

Slik ser et lite Vite + React-prosjekt ut, omtrentlig:

min-app/
  index.html          ← den ene HTML-siden appen starter fra
  package.json        ← liste over biblioteker og skript (dev, build)
  vite.config.ts      ← Vite-innstillinger og plugins
  src/
    main.tsx          ← starter React og monterer den i index.html
    App.tsx           ← den øverste komponenten i appen din
    index.css         ← stiler, f.eks. @import "tailwindcss";
  public/             ← filer som kopieres som de er (favicon, robots.txt)

Og skriptene i package.json:

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

Følg nå én enkelt endring:

1. Du ber AI-en om å «gjøre overskriften blå».
2. Den redigerer en klasse i App.tsx.
3. Vite oppdager at filen er endret, omformer bare den filen og sender oppdateringen til nettleseren.
4. Overskriften blir blå i forhåndsvisningen, vanligvis innen et sekund.

Når du publiserer, lager vite build noe som dist/index.html og dist/assets/index-a1b2c3.js. Den tilfeldig utseende delen av filnavnet endres hver gang innholdet endres, slik at nettlesere og CDN-er kan mellomlagre filer lenge uten å servere utdatert kode.

Miljøvariabler i Vite

Vite gjør bare variabler med navn som starter med VITE_ tilgjengelige for kode i nettleseren, for eksempel VITE_PUBLIC_MAP_ID. Det er et sikkerhetstiltak: alt i nettleserkode kan ses av besøkende, så hemmelige nøkler må aldri ha dette prefikset og må ligge på en backend. Se miljøvariabler og hemmeligheter.

Nøkkelbegreper

Vanlige misforståelser

• «Vite er et rammeverk.» Det er et byggverktøy. React, Vue eller Svelte er rammeverket; Vite kjører og pakker det.
• «En Vite-app inkluderer en backend.» En vanlig Vite-app er bare frontend. Databaser, innlogging og hemmelige nøkler krever en server eller API ved siden av.
• «Utviklingsserveren er fin å legge ut på nettet.» Den er ikke laget for ekte trafikk. Publiser alltid resultatet av produksjonsbygget.
• «Alt i .env er hemmelig.» I en Vite-app blir VITE_-variabler bakt inn i filene alle besøkende laster ned.
• «Hvis en side gir 404 etter oppdatering, er appen ødelagt.» I en enkeltsideapp må hosten sende alle ruter tilbake til index.html. Det er en innstilling hos hosten – se slik fikser du 404-feil etter publisering.

Hva du bør be AI-byggeren om

• «Er denne appen bare Vite (frontend), eller har den også en backend? Hvor kjører hver del?»
• «Kjør produksjonsbygget og rett alle feil og advarsler før jeg publiserer.»
• «Sjekk at ingen hemmelige nøkler står i VITE_-variabler eller noe annet sted i frontend-koden.»
• «Forhåndsvisningen viser en tom side – sjekk Vite- og nettleserkonsollens feil og fiks årsaken.» Se slik fikser du en tom hvit side.
• «Sørg for at det fungerer å oppdatere enhver sideadresse etter publisering, ikke bare forsiden.»

Vite i Mythex

Hvert nytt Mythex-prosjekt starter på Vite med mindre du ber om Next.js, statisk HTML eller en annen backend. Den live forhåndsvisningen i din private sandkasse oppdateres mens agenten redigerer filer, og Publiser bygger appen og legger den ut – du trenger ikke sette opp hosting selv. Hvis du senere trenger et API eller en database, be om det i chatten, så kan Mythex legge til en backend-tjeneste ved siden av Vite-frontenden (apper med flere tjenester).

Spørsmål