Wat is Vite? Een heldere gids voor app-bouwers

Vite (uitgesproken als "veet", Frans voor "snel") is een buildtool voor websites en webapps. Terwijl je bouwt, draait het een ontwikkelserver die je wijzigingen bijna direct in de browser toont. Als je klaar bent om te lanceren, verpakt het je code in kleine, geoptimaliseerde bestanden die elke webhost kan leveren. Het is gratis, open source en de standaardtool achter veel React-, Vue- en Svelte-projecten.

Waarom Vite ertoe doet als je met AI bouwt

Je typt misschien nooit een Vite-commando, maar als je app met een AI-app-builder is gemaakt, draait Vite er waarschijnlijk op. Mythex start nieuwe projecten op Vite + React + TypeScript + Tailwind, tenzij je iets anders vraagt (hoe de techniek wordt gekozen).

Weten wat Vite doet, helpt je om:

• De Preview te begrijpen. De live preview die bijwerkt terwijl de AI bestanden bewerkt, is meestal een Vite-ontwikkelserver.
• Publicatie te begrijpen. Een Vite-app wordt een map met statische bestanden (HTML, JavaScript, CSS en afbeeldingen), wat goedkoop en eenvoudig te hosten is.
• Foutmeldingen te lezen. Wanneer de preview een rode foutmelding of een lege pagina toont, meldt Vite vaak dat een bestand niet gecompileerd kon worden.
• De grenzen te kennen. Vite bouwt de frontend. Als je app een backend nodig heeft (een database, geheime API-sleutels, betalingen), draait die ergens anders. Zie frontend vs backend.

Een alledaagse vergelijking

Denk aan een restaurantkeuken.

• Tijdens de voorbereiding (ontwikkeling) proeft de chef elk gerecht en past het aan terwijl hij werkt. Verander de kruiden, proef een seconde later opnieuw. Dat is de ontwikkelserver van Vite: je wijzigt een bestand, de pagina werkt meteen bij, vaak zonder dat je ingetypte gegevens in een formulier kwijt zijn.
• Voor een cateringbestelling (productie) wordt alles gekookt, afgewogen, ingepakt en gelabeld zodat het goed reist en overal kan worden geserveerd. Dat is vite build: je code wordt gebundeld, verkleind en voorzien van unieke bestandsnamen, klaar voor elke host.

Dezelfde recepten, twee heel verschillende manieren om ze te behandelen, en Vite doet beide.

Wat Vite precies doet

Een moderne webapp bestaat uit veel bestanden: componenten, stijlen, afbeeldingen en bibliotheken van derden. Browsers kunnen dat niet allemaal zomaar gebruiken zoals het is geschreven. TypeScript moet JavaScript worden, de JSX van React moet worden omgezet, en Tailwind-classes moeten worden omgezet naar CSS.

Vite regelt dit in twee modi:

Oudere tools bundelden de hele app voordat ze iets toonden, waardoor het starten en bijwerken van een groot project lang kon duren. De truc van Vite is dat het dat tijdens de ontwikkeling overslaat en de browser bestanden laat laden wanneer ze nodig zijn. Voor productie wordt nog steeds gebundeld, sinds Vite 8 met een bundler die Rolldown heet, omdat veel kleine bestanden trager zijn voor bezoekers dan een paar geoptimaliseerde.

Een uitgewerkt voorbeeld: wat zit er in een Vite-project

Zo ziet een klein Vite + React-app er ongeveer uit:

my-app/
  index.html          ← de ene HTML-pagina waarmee de app start
  package.json        ← lijst met bibliotheken en scripts (dev, build)
  vite.config.ts      ← Vite-instellingen en plug-ins
  src/
    main.tsx          ← start React en koppelt het aan index.html
    App.tsx           ← het hoogste component van je app
    index.css         ← stijlen, bijv. @import "tailwindcss";
  public/             ← bestanden die ongewijzigd worden gekopieerd (favicon, robots.txt)

En de scripts in package.json:

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

Volg nu één wijziging:

1. Je vraagt de AI om "maak de kop blauw".
2. Die past een class aan in App.tsx.
3. Vite merkt dat het bestand is gewijzigd, transformeert alleen dat bestand en stuurt de update naar de browser.
4. De kop wordt blauw in de preview, meestal binnen een seconde.

Wanneer je publiceert, maakt vite build iets als dist/index.html plus dist/assets/index-a1b2c3.js. Dat willekeurig ogende deel van de bestandsnaam verandert telkens wanneer de inhoud verandert, zodat browsers en CDN's bestanden lang kunnen cachen zonder verouderde code te tonen.

Omgevingsvariabelen in Vite

Vite maakt alleen variabelen die beginnen met VITE_ zichtbaar voor code in de browser, bijvoorbeeld VITE_PUBLIC_MAP_ID. Dat is een veiligheidsmaatregel: alles in de browsercode kan door bezoekers worden gezien, dus geheime sleutels mogen nooit dat voorvoegsel hebben en moeten op een backend blijven. Zie omgevingsvariabelen en geheimen.

Belangrijke termen

Veelvoorkomende misverstanden

• "Vite is een framework." Het is een buildtool. React, Vue of Svelte is het framework; Vite draait en verpakt het.
• "Een Vite-app bevat een backend." Een standaard Vite-app is alleen frontend. Databases, logins en geheime sleutels hebben een server of API naast zich nodig.
• "De ontwikkelserver mag online." Die is niet bedoeld voor echt verkeer. Publiceer altijd de uitvoer van de productiebuild.
• "Alles in .env is geheim." In een Vite-app worden VITE_-variabelen in de bestanden ingebakken die elke bezoeker downloadt.
• "Een pagina verversen die een 404 geeft, betekent dat de app kapot is." In een single-page app moet de host elke route terugsturen naar index.html. Het is een hostinginstelling; zie hoe je 404-fouten na publicatie oplost.

Wat je aan je AI-builder kunt vragen

• "Is deze app alleen Vite (frontend), of heeft hij ook een backend? Waar draait elk onderdeel?"
• "Draai de productiebuild en los alle fouten en waarschuwingen op voordat ik publiceer."
• "Controleer dat er geen geheime sleutels in VITE_-variabelen of ergens in de frontendcode staan."
• "De preview toont een lege pagina; controleer de Vite- en browserconsolefouten en los de oorzaak op." Zie hoe je een lege witte pagina oplost.
• "Zorg dat het verversen van elke paginaurl werkt na publicatie, niet alleen van de startpagina."

Vite in Mythex

Elk nieuw Mythex-project start op Vite, tenzij je om Next.js, statische HTML of een andere backend vraagt. De live Preview in je privé-sandbox werkt bij terwijl de agent bestanden bewerkt, en Publiceren bouwt de app en zet hem live; je hoeft zelf geen hosting in te richten. Als je later een API of database nodig hebt, vraag je dat in de chat en kan Mythex naast de Vite-frontend een backendservice toevoegen (apps met meerdere services).

Veelgestelde vragen