Hvad er Vite? En letforståelig guide til app-byggere

Vite (udtales »veet«, fransk for »hurtig«) er et byggeværktøj til hjemmesider og webapps. Mens du bygger, kører det en udviklingsserver, der viser dine ændringer i browseren næsten øjeblikkeligt. Når du er klar til lancering, pakker det din kode i små, optimerede filer, som enhver webhost kan servere. Det er gratis, open source og standardværktøjet bag mange React-, Vue- og Svelte-projekter.

Hvorfor Vite betyder noget, når du bygger med AI

Du skriver måske aldrig en Vite-kommando, men hvis din app er bygget med en AI-app-builder, kører Vite den sandsynligvis. Mythex starter nye projekter på Vite + React + TypeScript + Tailwind, medmindre du beder om noget andet (sådan vælges teknologien).

At vide, hvad Vite gør, hjælper dig med at:

• Forstå forhåndsvisningen. Den live forhåndsvisning, der opdateres, mens AI'en redigerer filer, er typisk en Vite-udviklingsserver.
• Forstå udrulning. En Vite-app bliver til en mappe med statiske filer — HTML, JavaScript, CSS og billeder — hvilket er billigt og enkelt at hoste.
• Læse fejlmeddelelser. Når forhåndsvisningen viser en rød fejlboks eller en tom side, er det ofte Vite, der melder, at en fil ikke kunne kompileres.
• Kende dens grænser. Vite bygger frontenden. Hvis din app har brug for en backend — en database, hemmelige API-nøgler, betalinger — kører det et andet sted. Se frontend vs. backend.

En hverdagsanalogi

Tænk på et restaurantkøkken.

• Under forberedelsen (udvikling) smager kokken og justerer hver ret undervejs. Ændr krydderiet, smag igen et sekund senere. Det er Vites udviklingsserver: du ændrer en fil, siden opdateres med det samme, ofte uden at du mister det, du har skrevet i en formular.
• Til en cateringordre (produktion) bliver alt tilberedt, portioneret, pakket og mærket, så det kan rejse godt og serveres hvor som helst. Det er vite build: din kode samles, krympes og får fingeraftryk i filer klar til enhver host.

Samme opskrifter, to meget forskellige måder at håndtere dem på — og Vite gør begge dele.

Hvad Vite faktisk gør

En moderne webapp består af mange filer: komponenter, styles, billeder og tredjepartsbiblioteker. Browsere kan ikke bruge det hele, som det er skrevet. TypeScript skal blive til JavaScript, Reacts JSX skal omsættes, og Tailwind-klasser skal blive til CSS.

Vite håndterer dette i to tilstande:

Ældre værktøjer samlede hele appen, før noget blev vist, så start og opdatering af et stort projekt kunne tage lang tid. Vites trick er at springe det over under udvikling og lade browseren hente filer efter behov. Til produktion samler det stadig — fra Vite 8 med en bundler kaldet Rolldown — fordi mange små filer er langsommere for besøgende end få optimerede.

Et praktisk eksempel: hvad der er inde i et Vite-projekt

Sådan ser en lille Vite + React-app nogenlunde ud:

my-app/
  index.html          ← den ene HTML-side, appen starter fra
  package.json        ← liste over biblioteker og scripts (dev, build)
  vite.config.ts      ← Vite-indstillinger og plugins
  src/
    main.tsx          ← starter React og monterer den i index.html
    App.tsx           ← din apps komponent på øverste niveau
    index.css         ← styles, fx @import "tailwindcss";
  public/             ← filer, der kopieres som de er (favicon, robots.txt)

Og scripts i package.json:

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

Følg nu en enkelt ændring:

1. Du beder AI'en om at »gøre overskriften blå«.
2. Den redigerer en klasse i App.tsx.
3. Vite bemærker, at filen er ændret, omsætter kun den fil og sender opdateringen til browseren.
4. Overskriften bliver blå i forhåndsvisningen, typisk inden for et sekund.

Når du udruller, producerer vite build noget som dist/index.html plus dist/assets/index-a1b2c3.js. Den tilfældigt udseende del af filnavnet ændrer sig, når indholdet ændrer sig, så browsere og CDN'er kan cache filer i lang tid uden at servere forældet kode.

Miljøvariabler i Vite

Vite eksponerer kun variabler, hvis navne starter med VITE_, til kode i browseren, fx VITE_PUBLIC_MAP_ID. Det er en sikkerhedsforanstaltning: alt i browserkode kan ses af besøgende, så hemmelige nøgler må aldrig have det præfiks og skal blive på en backend. Se miljøvariabler og hemmeligheder.

Vigtige termer

Almindelige misforståelser

• »Vite er et framework.« Det er et byggeværktøj. React, Vue eller Svelte er frameworket; Vite kører og pakker det.
• »En Vite-app indeholder en backend.« En standard Vite-app er kun frontend. Databaser, logins og hemmelige nøgler kræver en server eller API ved siden af.
• »Udviklingsserveren er fin at sætte online.« Den er ikke beregnet til rigtig trafik. Udrul altid outputtet fra produktionsbygget.
• »Alt i .env er hemmeligt.« I en Vite-app bliver VITE_-variabler indlejret i de filer, alle besøgende downloader.
• »Hvis en side med 404 virker, er appen i stykker.« I en single-page app skal hosten sende alle routes tilbage til index.html. Det er en hosting-indstilling — se sådan rettes 404-fejl efter udrulning.

Hvad du beder din AI-builder om

• »Er denne app kun Vite (frontend), eller har den også en backend? Hvor kører hver del?«
• »Kør produktionsbygget, og ret alle fejl og advarsler, før jeg udruller.«
• »Tjek, at ingen hemmelige nøgler står i VITE_-variabler eller andre steder i frontend-koden.«
• »Forhåndsvisningen viser en tom side — tjek Vite- og browserkonsollens fejl, og ret årsagen.« Se sådan rettes en tom hvid side.
• »Sørg for, at opdatering af enhver side-URL virker efter udrulning, ikke kun forsiden.«

Vite i Mythex

Hvert nyt Mythex-projekt starter på Vite, medmindre du beder om Next.js, statisk HTML eller en anden backend. Den live forhåndsvisning i dit private sandkasse-miljø opdateres, mens agenten redigerer filer, og Publish bygger appen og udruller den — der er ingen hosting, du selv skal sætte op. Hvis du senere får brug for et API eller en database, så bed om det i chatten, og Mythex kan tilføje en backend-tjeneste ved siden af frontenden (apps med flere tjenester).

Spørgsmål