Erstellen und Ausführen eines Angular-Projekts in ServBay

Übersicht

Dieses Dokument beschreibt Schritt für Schritt, wie Sie ein Angular-Projekt in der lokalen Web-Entwicklungsumgebung ServBay erstellen, konfigurieren und betreiben. Wir nutzen die leistungsfähige Node.js-Umgebung von ServBay sowie das flexible Website-Management (früher „Hosts“ genannt), um Entwicklungs- und Produktionsumgebungen unkompliziert einzurichten. Sie profitieren von benutzerdefinierten Domains, SSL-Zertifikaten und einer sicheren Zugriffsverwaltung. ServBay integriert zahlreiche für die Entwicklung erforderliche Softwarepakete („Services“), einschließlich Node.js, PHP, Python, Go, Java, Datenbanken und mehr – ideal für Full-Stack-Entwicklung auf dem lokalen System.

Was ist Angular?

Angular ist ein von Google gepflegtes, quelloffenes Frontend-Framework zur Entwicklung leistungsstarker, dynamischer Single-Page-Applications (SPAs). Es basiert auf TypeScript und bietet ein umfassendes Toolset sowie eine strukturierte Architektur – optimal zum Erstellen großer, komplexer Enterprise-Anwendungen.

Zentrale Eigenschaften und Vorteile von Angular

• Komponentenbasierte Architektur: Aufbau von Benutzeroberflächen mit wiederverwendbaren Komponenten – für bessere Wartbarkeit und Skalierbarkeit des Codes.
• TypeScript-Support: Statische Typisierung und objektorientierte Features steigern Code-Qualität und Entwicklungseffizienz.
• Dependency Injection: Erleichtert das Testen und das Management von Abhängigkeiten innerhalb der Komponenten.
• Leistungsstarke CLI: Die Befehlszeilenschnittstelle vereinfacht das Anlegen von Projekten, das Generieren von Komponenten, Services und Modulen sowie das Bauen und Testen.
• Integrierte Lösungen: Mitgelieferte Module für Routing, Formularverarbeitung, HTTP-Client u.v.m.
• Performanceoptimierungen: AOT (Ahead-of-Time-)Kompilierung, Tree-shaking und weitere Technologien sorgen für optimale Performance.

In Kombination mit der stabilen ServBay-Umgebung können Sie sich ganz auf Ihre Business-Logik konzentrieren.

Voraussetzungen

Bevor Sie starten, stellen Sie bitte sicher, dass Sie folgende Schritte erledigt haben:

1. ServBay installiert: Sie haben ServBay erfolgreich auf Ihrem Mac installiert und gestartet.
2. Node.js aktiviert: Prüfen Sie im ServBay-Control-Panel, ob das gewünschte Node.js-Paket installiert und aktiv ist. In ServBay können Sie mehrere Node.js-Versionen installieren und bequem umschalten.

Einrichtung und Ausführung eines Angular-Projekts mit ServBay

Sie erstellen und betreiben Ihr Angular-Projekt im Node.js-Umfeld von ServBay. Im Entwicklungsmodus wird durch die Website-Funktion ein Reverse Proxy auf den Angular-Entwicklungsserver eingerichtet; in Produktion werden statische Dateien bereitgestellt.

1. Neues Angular-Projekt anlegen

Zuerst erstellen Sie ein neues Projekt mit Angular CLI.

1. Angular CLI installieren:
   Öffnen Sie Ihr Terminal und installieren Sie Angular CLI global mit dem Node.js, das von ServBay bereitgestellt wird. Falls die Node.js-Umgebung von ServBay nicht automatisch im PATH enthalten ist, wechseln Sie ggf. vorher mit dem Terminal in das Node.js-Umfeld von ServBay. In der Regel regelt ServBay dies jedoch selbst.

   npm install -g @angular/cli

   Dadurch steht Ihnen der Befehl ng systemweit zur Verfügung.

2. Neues Angular-Projekt anlegen:
   Wechseln Sie ins von ServBay empfohlene Web-Root-Verzeichnis /Applications/ServBay/www und erstellen Sie dort mit ng new ein neues Projekt. Als Projektnamen empfiehlt sich z.B. servbay-angular-app.

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Die Angular CLI stellt Ihnen einige Rückfragen zu den Projekteinstellungen. Folgen Sie dem Assistenten und wählen bzw. beantworten Sie die Prompts wie gewünscht:

   ? Would you like to add Angular routing? Yes  # Soll Routing eingebunden werden? Empfehlung: Yes
   ? Which stylesheet format would you like to use? CSS # Stylesheet-Format auswählen, z.B. CSS

   Nach Abschluss des Befehls liegt unter /Applications/ServBay/www ein neuer Ordner servbay-angular-app mit der Grundstruktur Ihres Angular-Projekts.

3. Projektabhängigkeiten installieren:
   Wechseln Sie nun ins soeben erstellte Projektverzeichnis und installieren Sie die lokalen Abhängigkeiten.

   cd servbay-angular-app
   npm install

   Der Befehl npm install liest die Abhängigkeiten aus der Datei package.json ein und installiert alle Module ins Verzeichnis node_modules.

2. Startseite von Angular ändern (optional)

Um zu testen, ob Ihr Projekt korrekt läuft, ändern Sie kurz die Startseite.

1. Bearbeiten Sie src/app/app.component.html:
   Öffnen Sie diese Datei mit Ihrem bevorzugten Editor im Pfad servbay-angular-app/src/app/app.component.html. Löschen oder ändern Sie den Inhalt zu folgendem einfachen Beispiel:

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Dies ist Ihre Angular-App, betrieben über ServBay!</p>
   </div>

3. Projekt im Entwicklungsmodus ausführen

Während der Entwicklung nutzen Sie typischerweise den Entwicklungsserver der Angular CLI (ng serve). Dieser ermöglicht zum Beispiel Hot Reloads. Über die Reverse-Proxy-Funktion von ServBay kann der Server dann unter einer lokalen Domain aufgerufen werden.

1. Angular-Entwicklungsserver starten:
   Wechseln Sie in das Projektverzeichnis (/Applications/ServBay/www/servbay-angular-app) und starten Sie den Dev-Server auf einem freien Port, z.B. 8585.

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Ihr Angular-Projekt wird kompiliert und auf http://localhost:8585/ bereitgestellt. Lassen Sie das Terminal geöffnet, solange der Server aktiv bleiben soll.

2. ServBay-Website als Reverse Proxy konfigurieren:
   Öffnen Sie das ServBay-Control-Panel und gehen Sie in den Bereich „Websites“ (ehemals „Hosts“). Legen Sie eine neue Website mit Reverse-Proxy-Konnektor an, der auf den dev-Server zeigt:

   • Name: z.B. My Angular Dev Site (interner Name, frei wählbar)
   • Domain: z.B. servbay-angular-dev.servbay.demo (empfohlen, .servbay.demo-Domains werden lokal auf 127.0.0.1 aufgelöst)
   • Website-Typ: Wählen Sie Reverse Proxy.
   • Proxy-Adresse: Eintragen: 127.0.0.1
   • Proxy-Port: Port-Nummer passend zum gestarteten Dev-Server, z.B. 8585

   Speichern Sie die Änderungen in ServBay und wenden Sie die Konfiguration an.

3. Zugriff auf Ihre lokale Dev-Domain:
   Öffnen Sie Ihren Browser und rufen Sie Ihre Domain auf, z.B. https://servbay-angular-dev.servbay.demo.

   Da der Zugriff durch ServBay läuft und lokale Websites dort automatisch mit SSL-Zertifikaten (von der ServBay User CA oder ServBay Public CA) versorgt werden, steht Ihnen das Projekt sofort sicher per HTTPS zur Verfügung. Das simuliert die echte Umgebung und hilft, potenzielle Fehler frühzeitig zu erkennen.

4. Produktionsbuild erstellen und ausliefern

Nach Abschluss der Entwicklung generieren Sie ein optimiertes Produktionsbuild. Die daraus entstehenden statischen Dateien werden mit ServBays Statischer-Website-Funktion bedient.

1. Produktionsbuild erstellen:
   Wechseln Sie ins Projektverzeichnis und bauen Sie das Projekt für die Produktion:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Oder bei neueren CLI-Versionen:
   # ng build

   Das Flag --prod (bei neueren Versionen Standard) aktiviert Produktionseinstellungen wie AOT-Kompilierung, Minifizierung und Tree-shaking. Nach dem Buildvorgang finden Sie alle statischen Dateien im Verzeichnis dist/servbay-angular-app (der Unterordner-Name richtet sich nach Ihrem Projektnamen und ggf. Ihrer Konfiguration).

2. ServBay-Website als statische Website konfigurieren:
   Legen Sie im ServBay-Control-Panel eine neue Website an, die auf Ihr Produktionsverzeichnis referenziert:

   • Name: z.B. My Angular Production Site
   • Domain: Empfohlen: servbay-angular-prod.servbay.demo
   • Website-Typ: Wählen Sie Static.
   • Root-Verzeichnis: Navigieren Sie in das Build-Output-Verzeichnis. Standardmäßig ist dies /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Achten Sie darauf, den Ordner zu wählen, der auch eine index.html enthält.

   Speichern und übernehmen Sie die Änderungen in ServBay.

3. Zugriff auf den Produktions-Build:
   Öffnen Sie Ihren Browser und navigieren Sie zu Ihrer Produktiv-Domain, z.B. https://servbay-angular-prod.servbay.demo.

   Sie sehen nun Ihre Angular-App im Produktivmodus, bereitgestellt vom leistungsfähigen Webserver von ServBay (Caddy, Nginx oder Apache, je nach Konfiguration). Auch hier sorgt ServBay automatisch für SSL und einen sicheren Zugriff.

Vorteile von ServBay bei der Angular-Entwicklung

• Integrierte Umgebung: Node.js-Versionen lassen sich im Handumdrehen installieren und verwalten – ohne aufwändige Konfiguration der Umgebungsvariablen.
• Flexibles Website-Management: Weisen Sie via GUI Domains zu, konfigurieren Sie Reverse Proxies oder statische Dateiserver und wechseln Sie blitzschnell zwischen Entwicklungs- und Produktionsumgebung.
• Automatisches SSL: Kostenlose, selbstkonfigurierte SSL-Zertifikate für alle lokalen Seiten – simulieren Sie HTTPS in Produktion und vermeiden Sie Browser-Warnungen.
• Multi-Stack-Support: Ob für Backend-APIs (Node.js/Express, Python/Django/Flask, PHP/Laravel/Symfony, Go/Gin/Echo, Java/Spring Boot) oder Datenbanken (MySQL, PostgreSQL, MongoDB, Redis) – ServBay vereint alles nahtlos. Noch fehlende oder früher eingeschränkt unterstützte Pakete sind inzwischen voll integriert.
• Backup & Wiederherstellung: Einfache Tools für Backup und Restore von Konfigurationen, Websites, Datenbanken und SSL-Zertifikaten schützen Ihre Entwicklungsarbeit.
• Zurücksetzen von Datenbankpasswörtern: Komfortables Resetten von Root-Passwörtern für MySQL, MariaDB oder PostgreSQL behebt ein klassisches Entwickler-Problem im Handumdrehen.

Häufige Fragen (FAQ)

• F: Ich bekomme beim Ausführen von ng new oder ng serve die Meldung command not found: ng. Was tun?
  A: Angular CLI ist entweder nicht installiert oder nicht im PATH. Installieren Sie @angular/cli global mit npm install -g @angular/cli und stellen Sie sicher, dass die von ServBay bereitgestellte Node.js-Umgebung korrekt im PATH liegt. Eventuell Terminal oder ServBay neu starten.
• F: ng serve startet nicht, Port belegt – was nun?
  A: Wahrscheinlich ist der Port (z.B. 8585) schon durch einen anderen Dienst belegt. Starten Sie Angular mit einem anderen, freien Port, z.B. ng serve --port 8586, und passen Sie die Portnummer auch im Reverse-Proxy der ServBay-Website entsprechend an.
• F: Die von mir konfigurierte ServBay-Website lädt nicht?
  A: Prüfen Sie:
  • Läuft ServBay?
  • Im Dev-Modus: Ist ng serve noch aktiv und stimmt der Port mit der Proxy-Einstellung?
  • Im Produktionsmodus: Stimmt das Root-Verzeichnis auf Ihre statischen Angular-Build-Dateien (dist/Projektname)?
  • Werfen Sie einen Blick in die ServBay-Logs, da finden Sie oftmals Details zum Fehler.
  • Kontrollieren Sie, ob die aufgerufene Domain exakt der konfigurierten Domain entspricht.
• F: Kann ich für die statische Auslieferung Caddy, Nginx oder Apache verwenden?
  A: Ja, ServBay unterstützt alle diese Webserver für statische Seiten. ServBay verwendet automatisch den derzeit aktivierten Server für die Auslieferung.

Zusammenfassung

Dank dieser Anleitung haben Sie erfolgreich ein Angular-Projekt in der ServBay-Umgebung erstellt und sowohl im Entwicklungs- als auch im Produktionsmodus betrieben. Sie wissen nun, wie Sie für die Entwicklung per Reverse Proxy und individuelle Domain auf den ng serve-Dev-Server zugreifen und wie Sie für die Auslieferung einen optimierten Produktion-Build mit statischem Dateiservice bereitstellen. Die Node.js-Integration, das komfortable Website-Management und das eingebaute SSL von ServBay sorgen für maximale Effizienz und beste Developer-Experience. Mit dem breiten Technologie-Stack von ServBay steht auch Full-Stack-Projekten nichts im Weg.