Ein React-Projekt mit ServBay erstellen und ausführen
Was ist React?
React ist eine von Meta (ehemals Facebook) und dessen Community gepflegte Open-Source-JavaScript-Bibliothek, die speziell für den Aufbau von Benutzeroberflächen (UI) entwickelt wurde. Mit einem komponentenbasierten Ansatz ermöglicht React die effiziente Entwicklung komplexer und wartbarer Single-Page-Anwendungen (SPA) sowie groß angelegter Web-Anwendungen. Die wichtigsten Vorteile von React sind sein deklaratives Programmiermodell, das effiziente Virtual DOM-Update und ein starkes Ökosystem.
Zu den Kernfeatures und Vorteilen von React zählen:
- Komponentenbasierte Entwicklung: Zerlegt komplexe UIs in eigenständige, wiederverwendbare Komponenten – das erhöht Wartbarkeit und ermöglicht effiziente Wiederverwendung des Codes.
- Deklarative Views: Beschreiben Sie einfach den Zustand Ihrer UI, React übernimmt automatisch die DOM-Updates, sodass die Entwicklung logischer und simpler ist.
- Virtuelles DOM: Das DOM wird im Speicher als virtuelle Darstellung gepflegt; Änderungen werden effizient berechnet und unnötige DOM-Manipulationen vermieden – das steigert die Performance spürbar.
- Unidirektionaler Datenfluss: Daten fließen immer von oben nach unten, was Zustandsänderungen nachvollziehbar und verständlich macht.
- JSX: Mit dieser JavaScript-Erweiterung können Sie HTML-ähnliche Strukturen direkt im Code schreiben – das fördert die Lesbarkeit.
- Starkes Ökosystem: Eine große Community und zahlreiche Drittanbieter-Bibliotheken (wie React Router, Redux/Zustand/MobX, Material UI usw.) bieten Lösungen für State Management, Routing, UI-Komponenten und vieles mehr.
Mit React können Entwickler moderne, leistungsfähige Web-Anwendungen schneller und effizienter realisieren.
ServBay als Entwicklungs- und Produktionsumgebung für React nutzen
ServBay ist eine leistungsstarke lokale Webentwicklungsplattform für macOS und Windows, die zahlreiche Softwarepakete – darunter Node.js – bereitstellt. In diesem Leitfaden erfahren Sie Schritt für Schritt, wie Sie mit ServBay ein React-Projekt im Node.js-Umfeld anlegen, konfigurieren und betreiben, inklusive Reverse Proxy für die Entwicklung und statische Dateiserver für die Produktion.
Voraussetzungen
Bitte stellen Sie sicher, dass Sie folgende Schritte vorbereitet haben:
- ServBay installiert: Sie haben ServBay erfolgreich auf Ihrem System installiert und laufen.
- Node.js-Paket installiert: Node.js wurde über die ServBay-Oberfläche oder die Kommandozeile installiert. Detaillierte Schritte dazu finden Sie in der ServBay-Dokumentation für Node.js. ServBay übernimmt automatisch die Verwaltung der Node.js-Version und Umgebungsvariablen.
Ein neues React-Projekt erstellen
Wir nutzen das moderne Tool Vite, um rasch ein React-Projekt aufzusetzen. Vite bietet extrem schnelle Startzeiten und Hot Module Replacement (HMR) für effizientes Development und hat die klassische create-react-app
weitgehend abgelöst.
Terminal öffnen und ins Website-Stammverzeichnis wechseln
Starten Sie Ihr Terminal. ServBay empfiehlt folgende Standard-Stammverzeichnisse für Websites:
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1Ein neues React-Projekt mit Vite erstellen
Führen Sie den folgenden Befehl aus, um über das
create-vite
-Gerüst ein neues Projekt namensservbay-react-demo
mit dem React-Template zu erstellen:bashnpx create-vite servbay-react-demo --template react
1npx
ist der Paket-Runner von npm, mit dem Sie CLI-Tools direkt aus dem npm-Register ohne globale Installation nutzen. So sind Sie immer auf dem neuesten Stand.create-vite
ist das offizielle Projekterstellungs-Tool für Vite.servbay-react-demo
ist der Name des Projektordners.--template react
initialisiert das Projekt direkt mit dem React-Template.
Folgen Sie den Anweisungen auf dem Bildschirm, um die Projekteinrichtung abzuschließen.
In das Projektverzeichnis wechseln und Abhängigkeiten installieren
Wechseln Sie ins neu erstellte Projekt und installieren Sie alle notwendigen Pakete:
bashcd servbay-react-demo npm install
1
2- Sie können alternativ auch
yarn install
oderpnpm install
nutzen, falls Sie Yarn oder pnpm bevorzugen.
- Sie können alternativ auch
Projektinhalt anpassen (optional)
Um zu prüfen, ob alles korrekt eingerichtet ist, können wir die Startseite des Projekts schnell anpassen.
Datei
src/App.jsx
odersrc/App.tsx
öffnenÖffnen Sie mit dem Editor Ihrer Wahl die Datei
src/App.jsx
(bei JavaScript) odersrc/App.tsx
(bei TypeScript).Inhalt ändern
Ersetzen Sie den Hauptinhalt so, dass „Hello ServBay!“ angezeigt wird:
javascript// ... weitere Imports ... import './App.css'; function App() { // ... weiterer Code ... return ( <> {/* ... weitere Elemente ... */} <h1>Hello ServBay!</h1> {/* ... weitere Elemente ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Speichern Sie die Datei.
Entwicklungsmodus aktivieren
Im Entwicklungsmodus läuft in der Regel ein lokaler Dev-Server mit Hot Module Replacement (HMR), was die Arbeit enorm erleichtert. ServBay kann per Reverse Proxy externe Anfragen an diesen Entwicklungsserver weiterleiten.
Dev-Server im Terminal starten
Im Projektverzeichnis
servbay-react-demo
starten Sie den Vite-Entwicklungsserver und legen einen Port (z. B. 8585) fest:bashnpm run dev -- --port 8585
1npm run dev
führt das impackage.json
definierte Skript aus, das meistens Vite startet.-- --port 8585
übergibt den gewünschten Port als Argument an Vite.
Nach dem Start zeigt das Terminal die lokale Adresse an, z. B.
http://localhost:8585
. Lassen Sie das Terminal offen und beenden Sie den Server nicht.Reverse Proxy in ServBay einrichten
Öffnen Sie die ServBay-Oberfläche und gehen Sie zum Bereich Websites. Klicken Sie auf „Hinzufügen“, um eine neue Website-Konfiguration anzulegen:
- Name:
ServBay React Dev
(zur besseren Beschreibung) - Domain:
servbay-react-dev.servbay.demo
(Demo-Domain passend zum ServBay-Branding) - Seitentyp: Wählen Sie
Reverse Proxy
- Proxy-IP:
127.0.0.1
(lokaler Dev-Server) - Proxy-Port:
8585
(entspricht dem Port Ihres Dev-Servers)
Speichern Sie die Konfiguration. ServBay setzt automatisch den Webserver (Caddy oder Nginx) so auf, dass Anfragen an
servbay-react-dev.servbay.demo
anhttp://127.0.0.1:8585
weitergeleitet werden.Detaillierte Anleitung zur Website-Einrichtung in ServBay finden Sie in der Websites-Dokumentation.
- Name:
Dev-Site im Browser aufrufen
Öffnen Sie Ihren Browser und rufen Sie die von Ihnen konfigurierte Domain auf:
https://servbay-react-dev.servbay.demo
.- Dank ServBay ist Ihr lokaler Development-Webserver automatisch mit einem SSL-Zertifikat (von ServBay User CA oder ServBay Public CA) ausgestattet und kann sicher per HTTPS aufgerufen werden. Mehr zu SSL in ServBay erfahren Sie unter Ihre Website mit SSL absichern.
- Änderungen im Code werden nun direkt und live im Browser sichtbar – das ist Hot Module Replacement (HMR).
Production Build erstellen
Wenn die Entwicklung abgeschlossen ist und Sie Ihr Projekt bereitstellen möchten, erstellen Sie eine optimierte Produktionsversion.
Production Build im Terminal ausführen
Im Verzeichnis
servbay-react-demo
führen Sie folgenden Build-Befehl aus:bashnpm run build
1Damit wird das
build
-Skript aus dempackage.json
ausgeführt. Vite kompiliert, bündelt und optimiert Ihren Code zu statischen Dateien (HTML, CSS, JavaScript und Assets), die im Unterverzeichnisdist
landen. Nach Fertigstellung erscheint eine Erfolgsnachricht im Terminal.Statische Dateiserver in ServBay konfigurieren
Die fertigen Dateien im Ordner
dist
können direkt per Webserver ausgeliefert werden. In ServBay erstellen Sie dafür eine neue statische Website-Konfiguration:- Name:
ServBay React Prod
(zur besseren Beschreibung) - Domain:
servbay-react.servbay.demo
(Demo-Domain, zur Unterscheidung von der Dev-Domain) - Seitentyp: Wählen Sie
Static
- Dokumentenstamm: Verweisen Sie auf das erzeugte
dist
-Verzeichnis:- macOS:
/Applications/ServBay/www/servbay-react-demo/dist
- Windows:
C:\ServBay\www\servbay-react-demo\dist
- macOS:
Speichern Sie die Konfiguration. ServBay richtet den Webserver so ein, dass die Dateien aus dem
dist
-Verzeichnis direkt bereitgestellt werden.- Name:
Produktions-Site im Browser aufrufen
Besuchen Sie im Browser Ihre Produktionsdomain:
https://servbay-react.servbay.demo
.Sie sehen die optimierte und gebaute Produktionsversion Ihrer Website. Auch hier ist die Seite automatisch SSL-geschützt.
Fazit
Mit diesen Schritten haben Sie mithilfe von ServBay erfolgreich ein React-Projekt auf Ihrem lokalen System erstellt, für die Entwicklung einen Reverse Proxy aufgesetzt und für die Produktion einen statischen Dateiserver konfiguriert. ServBay vereinfacht die Einrichtung und Verwaltung Ihrer lokalen Entwicklungsumgebung auf macOS und Windows deutlich – insbesondere dank nahtloser Node.js-Integration, flexibler Website-Konfiguration (Reverse Proxy & Static Hosting) und automatischer SSL-Unterstützung. So können React-Entwickler effizient entwickeln, testen und deployen. Setzen Sie Ihre Arbeit direkt auf Basis dieses Setups fort und bringen Sie Ihre React-Anwendung voran!