Vite mit React einrichten
Wir zeigen, wie Sie ein React-Projekt mit Vite und TypeScript anlegen, den Entwicklungsserver starten, das Projekt bauen und veröffentlichen und häufige Fehler beheben.
Aurora YazılımRedaktionsteam
6 Min. Lesezeit
Für das Vite-React-Setup installieren Sie zuerst die aktuelle LTS-Version von Node.js. Anschließend geben Sie im Terminal mit npm create vite@latest den Projektnamen ein und wählen die React-Vorlage mit TypeScript. Im Projektordner installieren Sie mit npm install die Abhängigkeiten und starten mit npm run dev den Entwicklungsserver; die Seite ist standardmäßig unter localhost:5173 erreichbar.
Was ist Vite und warum wird es bevorzugt?
Vite ist ein Build-Tool und Entwicklungsserver für moderne Webprojekte. Während der Entwicklung liefert es den Code über die native ES-Modul-Unterstützung des Browsers aus und verarbeitet nur die Datei, die tatsächlich angefragt wird. Deshalb startet der Server auch bei großen Projekten in Sekunden, und gespeicherte Änderungen erscheinen ohne Neuladen der Seite.
Für die Veröffentlichung bündelt Vite Ihren Code minimiert, in Teile aufgeteilt und mit cache-freundlichen Dateinamen. Für Bibliotheken wie React, Vue oder Svelte gibt es fertige Vorlagen; im React-Ökosystem ist Vite zu einem der verbreitetsten Startpunkte geworden.
Vite als Alternative zu Create React App
Viele Jahre lang wurden React-Projekte mit Create React App gestartet. Das React-Team empfiehlt dieses Werkzeug für neue Projekte nicht mehr; die offizielle Dokumentation rät entweder zu einem Framework (etwa Next.js) oder zu einem Build-Tool wie Vite. Wenn Sie eine Alternative zu Create React App suchen, ist Vite mit minimaler Konfiguration der schnellste Weg.
Benötigen Sie serverseitiges Rendering, dateibasiertes Routing und fertig ausgelieferte Seiten für die SEO, lesen Sie unsere Anleitung zur Next.js-Einrichtung. Für Admin-Panels, interne Tools oder Single-Page-Anwendungen (SPA) ist Vite meist die schlankere Wahl.
Voraussetzungen
Die einzige echte Voraussetzung von Vite ist Node.js. Neue Vite-Versionen unterstützen ältere Node-Versionen nicht mehr; am sichersten installieren Sie daher die aktuelle LTS-Version von nodejs.org. npm wird mit Node.js mitgeliefert.
- Node.js in der aktuellen LTS-Version samt npm.
- Ein Code-Editor; zur Installation und zu empfohlenen Erweiterungen lesen Sie unseren Beitrag zur VS-Code-Installation.
- Terminal: PowerShell oder Windows Terminal unter Windows, Terminal unter macOS, die Shell Ihrer Wahl unter Linux.
- Optional: Git für die Versionsverwaltung.
Node.js je nach Betriebssystem
Sie können Node.js von nodejs.org herunterladen und installieren. Wenn Sie in mehreren Projekten unterschiedliche Node-Versionen benötigen, erleichtert ein Versionsmanager Ihnen später die Arbeit.
Windows
Laden Sie das LTS-Installationsprogramm von nodejs.org herunter und installieren Sie es mit den Standardoptionen, oder nutzen Sie winget in der PowerShell. Schließen Sie das Terminal nach der Installation und öffnen Sie es neu, damit der PATH aktualisiert wird.
winget install OpenJS.NodeJS.LTS
node -v
npm -vmacOS
Sie können das offizielle Installationspaket verwenden oder Node.js mit einem einzigen Befehl installieren, sofern Homebrew vorhanden ist.
brew install node
node -v
npm -vLinux
Die Node-Version in den Paketquellen der Distributionen ist oft veraltet. Mit nvm installieren Sie Node.js auf Benutzerebene: Sie erhalten die aktuelle Version und brauchen kein sudo. Installieren Sie nvm über das Installationsskript auf der GitHub-Seite des Projekts und führen Sie dann die folgenden Befehle aus.
nvm install --lts
nvm use --lts
node -vReact-Projekt in wenigen Schritten anlegen
Ist Node.js bereit, läuft das Anlegen eines React-Projekts auf allen Betriebssystemen gleich ab. Der Befehl führt Sie interaktiv durch die Auswahl: Projektname, Framework (React) und Variante (TypeScript). Möchten Sie die Vorlage direkt im Befehl angeben, verwenden Sie das folgende Format; bei npm stehen zusätzliche Parameter nach zwei Bindestrichen.
- Wenn Sie mit JavaScript arbeiten möchten, lautet der Vorlagenname react, für TypeScript react-ts.
- Öffnen Sie die im Terminal in der Zeile Local angezeigte Adresse (standardmäßig localhost:5173) im Browser.
- Ändern Sie in der Datei src/App.tsx einen Text und speichern Sie. Aktualisiert sich die Seite ohne Neuladen, funktioniert HMR (Hot Module Replacement, Austausch von Modulen im laufenden Betrieb).
npm create vite@latest benim-uygulamam -- --template react-ts
cd benim-uygulamam
npm install
npm run devpnpm create vite benim-uygulamam --template react-ts
yarn create vite benim-uygulamam --template react-tsDie Projektstruktur kennenlernen
Der erste auffällige Unterschied in einem Vite-Projekt: Die Datei index.html liegt im Stammverzeichnis. Vite nutzt sie als Einstiegspunkt, und das darin enthaltene Script-Tag lädt die Datei src/main.tsx.
| Datei / Ordner | Aufgabe |
|---|---|
| index.html | Einstiegsseite der Anwendung; Titel und Meta-Tags stehen hier |
| src/main.tsx | Startdatei, die React in die Seite einbindet |
| src/App.tsx | Hauptkomponente; hier bauen Sie Ihre eigenen Seiten auf |
| public/ | Dateien, die unverarbeitet kopiert werden: Favicon, robots.txt |
| vite.config.ts | Plugins, Aliase, Server- und Build-Einstellungen |
| package.json | Abhängigkeiten sowie die Skripte dev, build und preview |
Umgebungsvariablen
Vite gibt nur Variablen mit dem Präfix VITE_ an den Client-Code weiter; Sie greifen darauf über import.meta.env zu. Diese Variablen werden in das Paket eingebettet, das an den Browser geht. Legen Sie hier niemals geheime API-Schlüssel ab, sondern bewahren Sie sie serverseitig auf.
VITE_API_URL=https://api.ornek.comBuild erstellen und veröffentlichen
Der Entwicklungsserver ist nur für die lokale Arbeit gedacht. Die Version für die Veröffentlichung erzeugen Sie mit npm run build; das Ergebnis wird in den Ordner dist geschrieben. Mit npm run preview testen Sie diese Ausgabe lokal unter praxisnahen Bedingungen.
Der Ordner dist besteht aus reinem HTML, CSS und JavaScript und lässt sich bei jedem statischen Hosting oder auf einem Webserver wie Nginx hochladen. Für die Geschwindigkeit ist wichtig, dass die Dateien komprimiert und mit langen Cache-Headern ausgeliefert werden; Details zu diesen Einstellungen erklären wir auf unserer Seite zur Speed- und Performance-Optimierung.
- Wird die Anwendung in einem Unterordner veröffentlicht (beispiel.com/panel/), setzen Sie die Option base in vite.config.ts auf diesen Pfad.
- Verwenden Sie React Router, fügen Sie auf dem Server eine Regel hinzu, die alle unbekannten Adressen auf index.html umleitet.
- Bei Inhaltsseiten, die in Suchmaschinen sichtbar sein sollen, reicht reines Rendering im Browser unter Umständen nicht aus; hier gewinnt der Ansatz eines SEO-optimierten Webdesigns an Bedeutung.
npm run build
npm run previewHäufige Fehler und Lösungen
Die meisten Fehler bei der Vite-Einrichtung gehen auf die Node-Version, den Port oder die Veröffentlichungseinstellungen zurück. Die folgende Tabelle fasst die häufigsten Fälle zusammen; weitere Befehle finden Sie in unserer Anleitung zu npm-Befehlen.
| Symptom | Warum | Lösung |
|---|---|---|
| Warnung «Vite requires Node.js version...» | Veraltete Node-Version | Auf die aktuelle LTS-Version wechseln |
| Port 5173 is in use | Port ist in einem anderen Prozess belegt | Vite probiert den nächsten Port; für einen festen Port setzen Sie server.port |
| Befehl node nicht gefunden | PATH nicht aktualisiert | Terminal schließen und neu öffnen, notfalls den Rechner neu starten |
| Leere weiße Seite nach der Veröffentlichung | Falscher base-Pfad | base-Einstellung an den Veröffentlichungsordner anpassen |
| 404 nach dem Neuladen der Seite | SPA-Weiterleitung fehlt auf dem Server | Alle Pfade auf index.html umleiten |
Nächste Schritte
Sobald Ihr Projekt läuft, können Sie Werkzeuge ergänzen, etwa React Router für das Routing, TanStack Query zum Laden von Daten und Tailwind CSS oder CSS Modules fürs Styling. Für die Codequalität erweitern Sie die mitgelieferte ESLint-Konfiguration passend zu Ihrem Projekt.
Vite und React bilden eine starke Basis für Business-Anwendungen wie Reservierungs-Panels, Lagerverwaltung, Terminplanung oder die Verwaltung von QR-Speisekarten. Bei solchen Produkten sind neben der Oberfläche auch Datenmodell, Berechtigungen und Backups entscheidend; wenn Sie auf einer fertigen Grundlage aufbauen möchten, können Ihnen branchenspezifische Softwarelösungen Zeit sparen.
Neben der technischen Basis ist auch die Konzeption der Oberfläche wichtig: Den Nutzerfluss und das Screenlayout zu planen, bevor Sie Komponenten schreiben, ist das Fundament des UI/UX-Design-Prozesses. Mobile Breakpoints von Anfang an mitzudenken ist zudem für ein responsives Webdesign viel günstiger, als später nachzubessern.
Häufig gestellte Fragen
01Ist TypeScript in einem React-Projekt mit Vite Pflicht?
Nein, die Vorlage react funktioniert mit reinem JavaScript. In mittleren und großen Projekten fängt TypeScript Fehler jedoch schon beim Schreiben ab und erleichtert die Zusammenarbeit im Team. Ein späterer Umstieg ist möglich, aber mit react-ts von Anfang an ist der Aufwand geringer.
02Kann ich mein bestehendes Create-React-App-Projekt zu Vite migrieren?
Ja. Die wichtigsten Schritte: index.html ins Stammverzeichnis verschieben, Vite und das React-Plugin statt react-scripts installieren und Variablen mit dem Präfix REACT_APP_ auf das Präfix VITE_ umstellen. Probieren Sie es bei großen Projekten zuerst in einem separaten Branch aus und führen Sie die Tests durch.
03Ist eine mit Vite erstellte Website aus SEO-Sicht ausreichend?
Für Panels und Anwendungsansichten ist das unproblematisch. Bei Inhaltsseiten, die in Suchmaschinen ranken sollen, ist es besser, den Inhalt serverseitig als HTML zu erzeugen; dafür wählt man ein Framework wie Next.js oder eine Pre-Rendering-Lösung.
04Sollte ich pnpm statt npm verwenden?
pnpm nutzt den Speicherplatz effizienter und beschleunigt die Installation; Vite funktioniert mit beiden Paketmanagern problemlos. Wichtiger als die Wahl ist, dass alle im Team dasselbe Werkzeug verwenden.
Vite mit React einzurichten dauert nur wenige Minuten; der eigentliche Aufwand steckt in der Architektur der Anwendung, die Sie darauf aufbauen. Brauchen Sie ein individuelles Panel, eine Reservierungs- oder Verwaltungssoftware für Ihr Unternehmen, schauen Sie sich unsere branchenspezifischen Softwarelösungen an; für eine schnelle, einzigartige Website lohnt sich ein Blick auf unseren Webdesign-Service.
