Was ist Vite? Ein verständlicher Leitfaden für App-Bauer

Vite (ausgesprochen „Wiet“, französisch für „schnell“) ist ein Build-Werkzeug für Websites und Web-Apps. Während Sie bauen, betreibt es einen Entwicklungsserver, der Ihre Änderungen fast sofort im Browser zeigt. Wenn Sie startklar sind, verpackt es Ihren Code in kleine, optimierte Dateien, die jeder Webhost ausliefern kann. Es ist kostenlos, Open Source und das Standardwerkzeug hinter vielen React-, Vue- und Svelte-Projekten.

Warum Vite beim Bauen mit KI wichtig ist

Sie tippen vielleicht nie einen Vite-Befehl, aber wenn Ihre App mit einem KI-App-Baukasten gebaut wurde, läuft wahrscheinlich Vite. Mythex startet neue Projekte mit Vite + React + TypeScript + Tailwind, sofern Sie nichts anderes wünschen (wie die Technik ausgewählt wird).

Zu wissen, was Vite tut, hilft Ihnen dabei:

• Die Vorschau zu verstehen. Die Live-Vorschau, die sich aktualisiert, während die KI Dateien bearbeitet, ist typischerweise ein Vite-Entwicklungsserver.
• Das Deployment zu verstehen. Eine Vite-App wird zu einem Ordner mit statischen Dateien – HTML, JavaScript, CSS und Bilder –, was günstig und einfach zu hosten ist.
• Fehlermeldungen zu lesen. Wenn die Vorschau ein rotes Fehler-Overlay oder eine leere Seite zeigt, meldet Vite oft, dass eine Datei nicht kompiliert werden konnte.
• Seine Grenzen zu kennen. Vite baut das Frontend. Wenn Ihre App ein Backend braucht – eine Datenbank, geheime API-Schlüssel, Zahlungen –, läuft das woanders. Siehe Frontend vs. Backend.

Ein Alltagsvergleich

Denken Sie an eine Restaurantküche.

• Bei der Vorbereitung (Entwicklung) probiert der Koch jedes Gericht und passt es an. Die Würzung ändern, eine Sekunde später erneut probieren. Das ist Vites Entwicklungsserver: Sie ändern eine Datei, und die Seite aktualisiert sich sofort, oft ohne dass Sie eingetragene Eingaben in einem Formular verlieren.
• Für einen Catering-Auftrag (Produktion) wird alles gegart, portioniert, verpackt und beschriftet, damit es gut transportiert und überall serviert werden kann. Das ist vite build: Ihr Code wird gebündelt, verkleinert und mit eindeutigen Dateinamen versehen, bereit für jeden Host.

Dieselben Rezepte, zwei sehr verschiedene Arten, sie zu handhaben – und Vite beherrscht beides.

Was Vite eigentlich tut

Eine moderne Web-App besteht aus vielen Dateien: Komponenten, Styles, Bilder und Bibliotheken von Drittanbietern. Browser können das nicht alles so verwenden, wie es geschrieben ist. TypeScript muss zu JavaScript werden, JSX von React muss umgewandelt werden, und Tailwind-Klassen müssen zu CSS werden.

Vite erledigt das in zwei Modi:

Ältere Werkzeuge bündelten die gesamte App, bevor etwas angezeigt wurde, sodass Start und Aktualisierung großer Projekte lange dauern konnten. Vites Trick ist, dies während der Entwicklung zu überspringen und den Browser Dateien bei Bedarf laden zu lassen. Für die Produktion bündelt Vite weiterhin – seit Vite 8 mit einem Bundler namens Rolldown –, weil viele kleine Dateien für Besucher langsamer sind als wenige optimierte.

Ein Beispiel: was in einem Vite-Projekt steckt

So sieht ungefähr ein kleines Vite- und React-Projekt aus:

my-app/
  index.html          ← die eine HTML-Seite, mit der die App startet
  package.json        ← Liste der Bibliotheken und Skripte (dev, build)
  vite.config.ts      ← Vite-Einstellungen und Plugins
  src/
    main.tsx          ← startet React und hängt es in index.html ein
    App.tsx           ← die oberste Komponente Ihrer App
    index.css         ← Styles, z. B. @import "tailwindcss";
  public/             ← Dateien, die unverändert kopiert werden (Favicon, robots.txt)

Und die Skripte in package.json:

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

Verfolgen wir eine einzelne Änderung:

1. Sie bitten die KI: „Mach die Überschrift blau.“
2. Sie bearbeitet eine Klasse in App.tsx.
3. Vite bemerkt die Änderung, wandelt genau diese Datei um und schickt das Update an den Browser.
4. Die Überschrift wird in der Vorschau blau, meist innerhalb einer Sekunde.

Wenn Sie veröffentlichen, erzeugt vite build etwas wie dist/index.html plus dist/assets/index-a1b2c3.js. Der zufällig wirkende Teil des Dateinamens ändert sich, wenn sich der Inhalt ändert, sodass Browser und CDNs Dateien lange zwischenspeichern können, ohne veralteten Code auszuliefern.

Umgebungsvariablen in Vite

Vite stellt Browser-Code nur Variablen zur Verfügung, deren Namen mit VITE_ beginnen, zum Beispiel VITE_PUBLIC_MAP_ID. Das ist eine Sicherheitsmaßnahme: Alles im Browser-Code kann von Besuchern eingesehen werden, deshalb dürfen geheime Schlüssel dieses Präfix nie tragen und müssen auf einem Backend bleiben. Siehe Umgebungsvariablen und Geheimnisse.

Wichtige Begriffe

Häufige Missverständnisse

• „Vite ist ein Framework.“ Es ist ein Build-Werkzeug. React, Vue oder Svelte ist das Framework; Vite betreibt und verpackt es.
• „Eine Vite-App enthält ein Backend.“ Eine Standard-Vite-App ist nur Frontend. Datenbanken, Logins und geheime Schlüssel brauchen einen Server oder eine API daneben.
• „Der Entwicklungsserver kann ruhig online gestellt werden.“ Er ist nicht für echten Traffic gedacht. Deployen Sie immer das Ergebnis des Produktions-Builds.
• „Alles in .env ist geheim.“ In einer Vite-App werden VITE_-Variablen in die Dateien eingebacken, die jeder Besucher herunterlädt.
• „Wenn eine Seite nach dem Neuladen einen 404-Fehler liefert, ist die App kaputt.“ In einer Single-Page-App muss der Host jede Route an index.html zurücksenden. Das ist eine Hosting-Einstellung – siehe wie Sie 404-Fehler nach dem Deployment beheben.

Was Sie Ihren KI-Baukasten fragen sollten

• „Ist diese App nur Vite-Frontend, oder hat sie auch ein Backend? Wo läuft jeder Teil?“
• „Führe den Produktions-Build aus und behebe alle Fehler und Warnungen, bevor ich veröffentliche.“
• „Prüfe, dass keine geheimen Schlüssel in VITE_-Variablen oder irgendwo im Frontend-Code stehen.“
• „Die Vorschau zeigt eine leere Seite – prüfe die Konsolenfehler von Vite und im Browser und behebe die Ursache.“ Siehe wie Sie eine leere weiße Seite beheben.
• „Stelle sicher, dass nach dem Veröffentlichen das Neuladen jeder Seiten-URL funktioniert, nicht nur der Startseite.“

Vite in Mythex

Jedes neue Mythex-Projekt startet mit Vite, sofern Sie nicht Next.js, statisches HTML oder ein anderes Backend wünschen. Die Live-Vorschau in Ihrer privaten Sandbox aktualisiert sich, während der Agent Dateien bearbeitet, und Veröffentlichen baut die App und deployt sie – Sie müssen kein Hosting selbst einrichten. Wenn Sie später eine API oder eine Datenbank brauchen, fragen Sie im Chat, und Mythex kann einen Backend-Dienst neben dem Vite-Frontend hinzufügen (Apps mit mehreren Diensten).

Fragen