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:

1. ServBay installiert: Sie haben ServBay erfolgreich auf Ihrem System installiert und laufen.
2. 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.

1. Terminal öffnen und ins Website-Stammverzeichnis wechseln

   Starten Sie Ihr Terminal. ServBay empfiehlt folgende Standard-Stammverzeichnisse für Websites:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Ein neues React-Projekt mit Vite erstellen

   Führen Sie den folgenden Befehl aus, um über das create-vite-Gerüst ein neues Projekt namens servbay-react-demo mit dem React-Template zu erstellen:

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

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

3. In das Projektverzeichnis wechseln und Abhängigkeiten installieren

   Wechseln Sie ins neu erstellte Projekt und installieren Sie alle notwendigen Pakete:

   cd servbay-react-demo
   npm install

   • Sie können alternativ auch yarn install oder pnpm install nutzen, falls Sie Yarn oder pnpm bevorzugen.

Projektinhalt anpassen (optional)

Um zu prüfen, ob alles korrekt eingerichtet ist, können wir die Startseite des Projekts schnell anpassen.

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

   Öffnen Sie mit dem Editor Ihrer Wahl die Datei src/App.jsx (bei JavaScript) oder src/App.tsx (bei TypeScript).

2. Inhalt ändern

   Ersetzen Sie den Hauptinhalt so, dass „Hello ServBay!“ angezeigt wird:

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

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

1. Dev-Server im Terminal starten

   Im Projektverzeichnis servbay-react-demo starten Sie den Vite-Entwicklungsserver und legen einen Port (z. B. 8585) fest:

   npm run dev -- --port 8585

   • npm run dev führt das im package.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.

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

   Detaillierte Anleitung zur Website-Einrichtung in ServBay finden Sie in der Websites-Dokumentation.

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

1. Production Build im Terminal ausführen

   Im Verzeichnis servbay-react-demo führen Sie folgenden Build-Befehl aus:

   npm run build

   Damit wird das build-Skript aus dem package.json ausgeführt. Vite kompiliert, bündelt und optimiert Ihren Code zu statischen Dateien (HTML, CSS, JavaScript und Assets), die im Unterverzeichnis dist landen. Nach Fertigstellung erscheint eine Erfolgsnachricht im Terminal.

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

   Speichern Sie die Konfiguration. ServBay richtet den Webserver so ein, dass die Dateien aus dem dist-Verzeichnis direkt bereitgestellt werden.

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