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:

1. ServBay installieren: ServBay ist erfolgreich auf Ihrem macOS-System installiert und läuft.
2. 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).

1. 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:

   cd /Applications/ServBay/www

2. Neues React-Projekt mit Vite erstellen

   Mit folgendem Befehl initialisieren Sie per create-vite Scaffolding ein neues Projekt mit dem Namen servbay-react-demo und wählen das react Template:

   npx create-vite servbay-react-demo --template react

   • npx 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 von create-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.

3. Ins Projektverzeichnis wechseln und Abhängigkeiten installieren

   Wechseln Sie ins neue Projektverzeichnis und installieren Sie die benötigten Abhängigkeiten via npm:

   cd servbay-react-demo
   npm install

   • Alternativ können Sie auch yarn install oder pnpm install nutzen, falls Sie einen dieser Paketmanager bevorzugen.

Projektinhalte in React anpassen (optional)

Zum Testen der erfolgreichen Einrichtung können wir die Startseite des Projekts geringfügig anpassen.

1. Datei src/App.jsx oder src/App.tsx öffnen

   Öffnen Sie je nach verwendetem Template (JavaScript oder TypeScript) die entsprechende Datei im Verzeichnis src (z. B. mit Ihrem Lieblingseditor): src/App.jsx oder src/App.tsx.

2. Inhalt anpassen

   Suchen Sie den Code, der das Hauptinhalts-Rendering enthält, und ändern Sie diesen so, dass „Hello ServBay!“ angezeigt wird:

   // ... weitere Importe ...
   import './App.css';
   
   function App() {
     // ... weiterer Code ...
     return (
       <>
         {/* ... weitere Elemente ... */}
         <h1>Hello ServBay!</h1>
         {/* ... weitere Elemente ... */}
       </>
     );
   }
   
   export default App;

   Speichern 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.

1. Entwicklungsserver im Terminal starten

   Starten Sie im Projektverzeichnis servbay-react-demo den Vite-Entwicklungsserver und geben Sie z. B. den Port 8585 an:

   npm run dev -- --port 8585

   • npm run dev startet das im package.json-File definierte dev-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!

2. 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 zu http://127.0.0.1:8585 weitergeleitet werden.

   Ausführliche Informationen zur Website-Konfiguration in ServBay finden Sie in der ServBay-Dokumentation zum Website-Management.

3. 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.

1. Produktionsbuild im Terminal ausführen

   Im Projektverzeichnis servbay-react-demo führen Sie den Build-Befehl aus:

   npm run build

   Dieser Befehl startet das im package.json definierte build-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 Unterverzeichnis dist Ihres Projekts. Nach Fertigstellung zeigt das Terminal eine Erfolgsmeldung an.

2. 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.

3. 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.