Erstellen und Ausführen von React-Projekten in der lokalen macOS-Umgebung mit ServBay
Was ist React?
React ist eine von Meta (vormals Facebook) und ihrer Community gepflegte Open-Source-JavaScript-Bibliothek, die speziell für den Aufbau von Benutzeroberflächen (UIs) entwickelt wurde. Sie ermöglicht es, interaktive UIs komponentenbasiert zu gestalten, sodass Entwickler effizient komplexe und gut wartbare Single-Page-Apps (SPA) oder umfangreiche Webanwendungen realisieren können. Zu den größten Vorteilen von React zählen sein deklaratives Programmierparadigma, die effizienten Updates durch das Virtual DOM und das starke, stetig wachsende Ökosystem.
Zentrale Eigenschaften und Vorteile von React
- Komponentenbasierte Entwicklung: Komplexe Benutzeroberflächen werden in unabhängige, wiederverwendbare Komponenten zerlegt, was die Wartbarkeit und Wiederverwendbarkeit des Codes verbessert.
- Deklarative Views: Der UI-Zustand wird einfach beschrieben – React kümmert sich eigenständig um das Aktualisieren des DOMs entsprechend dem aktuellen Zustand. Das vereinfacht die Logik bei UI-Entwicklung.
- Virtuelles DOM (Virtual DOM): Ein DOM-Abbild bleibt im Speicher; React vergleicht Änderungen und minimiert Manipulationen am echten DOM, was die Performance deutlich steigert.
- Unidirektionaler Datenfluss: Daten fließen von oben nach unten, wodurch Statusänderungen leichter nachvollzogen werden können.
- JSX: Eine JavaScript-Spracherweiterung, die das Schreiben HTML-ähnlicher Strukturen im JS-Code erlaubt und die Lesbarkeit fördert.
- Starkes Ökosystem: Eine aktive Community und viele Drittanbieter-Bibliotheken (z. B. React Router, Redux/Zustand/MobX, Material UI) unterstützen Routing, State-Management, UI-Komponenten und vieles mehr.
Mit React bauen Sie moderne, leistungsstarke Webanwendungen schneller und effizienter.
Einrichtung der React-Entwicklungs- und Produktionsumgebung mit ServBay
ServBay ist eine leistungsstarke lokale Webentwicklungsumgebung für macOS-Nutzer und bringt zahlreiche Softwarepakete wie Node.js direkt mit. In dieser Anleitung erfahren Sie Schritt für Schritt, wie Sie auf Basis der Node.js-Umgebung und der Website-Funktionalität von ServBay ein React-Projekt erstellen, konfigurieren und ausführen – inklusive Einrichtung von Reverse-Proxies im Entwicklungsmodus sowie Bereitstellung statischer Dateien im Produktionsmodus.
Voraussetzungen
Vergewissern Sie sich, dass Sie folgende Voraussetzungen erfüllt haben:
- ServBay installieren: ServBay ist erfolgreich auf Ihrem macOS-System installiert und läuft.
- Node.js-Paket installieren: Das Node.js-Paket wurde über das ServBay-Interface oder per Kommandozeile installiert. Eine Anleitung finden Sie in der ServBay-Dokumentation zur Node.js-Paketinstallation. ServBay übernimmt die Verwaltung von Node.js-Versionen und Umgebungsvariablen automatisch.
React-Projekt erstellen
Zum schnellen Erstellen eines React-Projekts nutzen wir das moderne Build-Tool Vite. Vite bietet ultraschnelle Starts und Hot Module Replacement (HMR) und ist heute eine der bevorzugten Methoden beim Initialisieren neuer React-Projekte (im Gegensatz zum früher populären create-react-app
).
Terminal öffnen und ins Web-Root-Verzeichnis wechseln
Starten Sie Ihr Terminal. Der empfohlene Standard-Web-Root von ServBay ist
/Applications/ServBay/www
. Wechseln Sie in dieses Verzeichnis:bashcd /Applications/ServBay/www
1Neues React-Projekt mit Vite erstellen
Mit folgendem Befehl initialisieren Sie per
create-vite
Scaffolding ein neues Projekt mit dem Namenservbay-react-demo
und wählen dasreact
Template:bashnpx create-vite servbay-react-demo --template react
1npx
ist der Ausführungshelfer von npm, mit dem Sie Tools aus dem npm-Register verwenden können, ohne sie global zu installieren. So arbeiten Sie immer mit der aktuellen Version voncreate-vite
.create-vite
ist das offizielle Vite-Projekt-Scaffolding-Tool.servbay-react-demo
ist der Name Ihres Projektverzeichnisses.--template react
legt das React-Template zur Initialisierung der Projektstruktur fest.
Folgen Sie den Anweisungen im Terminal, um das Projekt zu erstellen.
Ins Projektverzeichnis wechseln und Abhängigkeiten installieren
Wechseln Sie ins neue Projektverzeichnis und installieren Sie die benötigten Abhängigkeiten via npm:
bashcd servbay-react-demo npm install
1
2- Alternativ können Sie auch
yarn install
oderpnpm install
nutzen, falls Sie einen dieser Paketmanager bevorzugen.
- Alternativ können Sie auch
Projektinhalte in React anpassen (optional)
Zum Testen der erfolgreichen Einrichtung können wir die Startseite des Projekts geringfügig anpassen.
Datei
src/App.jsx
odersrc/App.tsx
öffnenÖffnen Sie je nach verwendetem Template (
JavaScript
oderTypeScript
) die entsprechende Datei im Verzeichnissrc
(z. B. mit Ihrem Lieblingseditor):src/App.jsx
odersrc/App.tsx
.Inhalt anpassen
Suchen Sie den Code, der das Hauptinhalts-Rendering enthält, und ändern Sie diesen so, dass „Hello ServBay!“ angezeigt wird:
javascript// ... weitere Importe ... 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.
In den Entwicklungsmodus wechseln
In der Entwicklungsphase wird üblicherweise ein lokaler Entwicklungsserver gestartet, der unter anderem Hot Module Replacement (HMR) für ein besonders komfortables Arbeiten bietet. ServBay kann als Reverse Proxy fungieren und Anfragen an Ihren Entwicklungsserver weiterleiten.
Entwicklungsserver im Terminal starten
Starten Sie im Projektverzeichnis
servbay-react-demo
den Vite-Entwicklungsserver und geben Sie z. B. den Port 8585 an:bashnpm run dev -- --port 8585
1npm run dev
startet das impackage.json
-File definiertedev
-Script und somit üblicherweise den Vite-Entwicklungsserver.-- --port 8585
übergibt den Port-Parameter direkt an den Vite-Befehl.
Nach dem Start werden im Terminal in der Regel Zugriffsschnittstellen wie
http://localhost:8585
angezeigt. Lassen Sie das Terminal geöffnet – der Entwicklungsserver muss weiterlaufen!Website-Reverse-Proxy in ServBay konfigurieren
Öffnen Sie die ServBay-Oberfläche und gehen Sie zum Bereich Websites. Legen Sie eine neue Website-Konfiguration an:
- Name:
ServBay React Dev
(beschreibender Name) - Domain:
servbay-react-dev.servbay.demo
(empfohlene Demo-Domain mit Bezug zu ServBay) - Seitentyp: Wählen Sie
Reverse Proxy
- Proxy-IP:
127.0.0.1
(da der Entwicklungsserver lokal läuft) - Proxy-Port:
8585
(wie beim Start des Servers)
Speichern Sie die Konfiguration. ServBay übernimmt die Änderungen automatisch und richtet den internen Webserver (Caddy oder Nginx) so ein, dass Anfragen an
servbay-react-dev.servbay.demo
zuhttp://127.0.0.1:8585
weitergeleitet werden.Ausführliche Informationen zur Website-Konfiguration in ServBay finden Sie in der ServBay-Dokumentation zum Website-Management.
- Name:
Entwicklungswebsite aufrufen
Öffnen Sie Ihren Browser und rufen Sie die konfigurierte Domain auf:
https://servbay-react-dev.servbay.demo
.- Dank ServBays Leistungsumfang ist Ihre lokale Entwicklungswebsite sofort mit einem SSL-Zertifikat geschützt (ausgestellt von ServBay User CA oder ServBay Public CA), sodass Sie sie sicher per HTTPS erreichen können. Weitere Infos zur SSL-Unterstützung finden Sie in Websites mit SSL schützen.
- Änderungen im Editor und Speichern lösen nun dank Hot Module Replacement (HMR) sofortige Aktualisierungen im Browser aus.
Produktionsbuild erstellen
Ist Ihr React-Projekt fertig für den Einsatz, müssen Sie ein optimiertes Produktions-Build erzeugen.
Produktionsbuild im Terminal ausführen
Im Projektverzeichnis
servbay-react-demo
führen Sie den Build-Befehl aus:bashnpm run build
1Dieser Befehl startet das im
package.json
definiertebuild
-Script. Für Vite-basierte React-Projekte wird so der Quellcode in eine Reihe statischer Dateien (HTML, CSS, JavaScript, Assets) kompiliert und optimiert. Die Ausgabe finden Sie anschließend im Unterverzeichnisdist
Ihres Projekts. Nach Fertigstellung zeigt das Terminal eine Erfolgsmeldung an.Statischen Dateiserver in ServBay einrichten
Im
dist
-Verzeichnis des Produktionsbuilds befinden sich alle Dateien, die direkt per Webserver ausgeliefert werden können. Sie können jetzt eine statische Website in ServBay anlegen, die auf diesen Ordner verweist:Öffnen Sie die ServBay-Anwendung, wechseln Sie zum Bereich Websites und konfigurieren Sie eine neue Website:
- Name:
ServBay React Prod
(beschreibender Name) - Domain:
servbay-react.servbay.demo
(abgesichert von der Demo-Domain und abgrenzbar zur Dev-Instanz) - Seitentyp: Wählen Sie
Static
- Web-Root-Verzeichnis:
/Applications/ServBay/www/servbay-react-demo/dist
(Pfad zum Produktions-Build-Ordner)
Speichern Sie die Konfiguration. ServBay stellt so die im
dist
-Ordner befindlichen Dateien direkt mit dem integrierten Webserver bereit.- Name:
Produktionswebsite aufrufen
Rufen Sie im Browser die neue Produktionsdomain auf:
https://servbay-react.servbay.demo
.Sie sehen nun die optimierte Produktionsversion Ihrer Website. Auch diese Instanz profitiert von der automatischen SSL-Unterstützung durch ServBay.
Fazit
Mit den oben beschriebenen Schritten haben Sie erfolgreich ein React-Projekt in Ihrer lokalen macOS-Umgebung mit ServBay erstellt und sowohl für den Entwicklungs- als auch für den Produktivmodus eingerichtet. ServBay vereinfacht das Aufsetzen und Verwalten lokaler Entwicklungsumgebungen erheblich. Besonders hervorzuheben sind die integrierte Node.js-Unterstützung, flexible Website-Konfigurationen (inklusive Reverse Proxy und statischer Dateiauslieferung) sowie die automatische SSL-Bereitstellung – allesamt große Vorteile für React-Entwickler. Sie können auf dieser Basis Ihre React-App komfortabel weiterentwickeln, testen und bereitstellen.