Angular-Projekte mit ServBay erstellen und ausführen

Überblick

Dieses Dokument erklärt, wie Sie ein Angular-Projekt in der lokalen Webentwicklungsumgebung von ServBay erstellen, konfigurieren und ausführen. Sie nutzen dabei die leistungsfähige Node.js-Umgebung von ServBay und die flexible Website-Verwaltung (“Hosts”) für eine einfache Einrichtung von Entwicklungs- und Produktionsumgebung mit eigenen Domains und SSL-Zertifikaten. ServBay integriert zahlreiche essentielle Softwarepakete (“Services”), darunter Node.js, PHP, Python, Go, Java und verschiedene Datenbanken – die ideale Basis für Fullstack-Entwicklung vor Ort.

Was ist Angular?

Angular ist ein von Google gepflegtes, quelloffenes Frontend-Framework zur Entwicklung von leistungsstarken, dynamischen Single-Page-Anwendungen (SPA). Es basiert auf TypeScript und bietet ein umfassendes Set an Tools sowie eine strukturierte Entwicklungsmethodik – optimal für komplexe Enterprise-Apps.

Zentrale Features & Vorteile von Angular

• Komponentenbasierte Architektur: Baue Benutzeroberflächen aus wiederverwendbaren Komponenten für bessere Wartbarkeit und Skalierbarkeit.
• TypeScript-Unterstützung: Statische Typisierung und mächtige objektorientierte Features heben Codequalität und Entwicklungsproduktivität.
• Dependency Injection: Erleichtert das Testen und Verwalten von Abhängigkeiten in Komponenten.
• Leistungsfähige CLI (Command Line Interface): Einfache Generierung von Projekten, Komponenten, Services und Modulen sowie Build- und Testvorgängen.
• Integrierte Lösungen: Routing, Formularhandling, HTTP-Client und mehr sind als Module direkt verfügbar.
• Performanceoptimierung: Dank AOT-Kompilierung (Ahead-of-Time), Tree-shaking und weiteren Technologien für schnelle Apps.

Kombiniert mit der stabilen ServBay-Umgebung können sich Entwickler voll auf die Umsetzung ihrer Geschäftslogik konzentrieren.

Voraussetzungen

Vor dem Start stellen Sie bitte Folgendes sicher:

1. ServBay installiert: ServBay muss installiert und gestartet sein (auf macOS und Windows).
2. Node.js Paket aktiviert: Installieren und aktivieren Sie über das ServBay Control Panel die gewünschte Node.js-Version. Sie können in ServBay mehrere Versionen installieren und bequem umschalten.

So richten Sie mit ServBay Ihr Angular-Projekt ein und führen es aus

Wir nutzen die Node.js-Umgebung von ServBay, um das Angular-Projekt zu erstellen und zu betreiben. Im Entwicklungsmodus wird per Reverse Proxy eine Domain auf den Angular-Entwicklungsserver weitergeleitet. Im Produktionsmodus hosten Sie die gebauten statischen Dateien direkt via ServBay.

1. Angular-Projekt erstellen

Zu Beginn wird das Projekt mit der Angular CLI angelegt.

1. Angular CLI installieren: Öffnen Sie Ihr Terminal und installieren Sie über ServBays Node.js-Umgebung die Angular CLI global. Sollte die Node.js-Umgebung nicht automatisch in Ihrem System-PATH eingebunden sein, wechseln Sie vorab ins ServBay-Node.js-Umfeld. Standardmäßig erledigt ServBay dies für Sie.

   npm install -g @angular/cli

   Damit steht Ihnen das ng-Kommando systemweit zur Verfügung.

2. Neues Angular-Projekt generieren: Wechseln Sie ins von ServBay empfohlene Website-Stammverzeichnis und erstellen Sie mit ng new Ihr Angular-Projekt. Empfehlenswert ist ein Name wie servbay-angular-app zur Wiedererkennung.

   macOS:

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

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   Die CLI stellt einige Fragen zur Projekterstellung. Vorgeschlagene Antworten:

   ? Would you like to add Angular routing? Yes  # Routing-Funktion hinzufügen, empfiehlt sich mit Yes
   ? Which stylesheet format would you like to use? CSS # Format für Stylesheets auswählen, z.B. CSS

   Nach Abschluss erhalten Sie einen neuen Ordner servbay-angular-app mit Projektstruktur und Basisdateien:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Projekt-Abhängigkeiten installieren: Wechseln Sie ins Projektverzeichnis und installieren Sie lokale Dependencies.

   cd servbay-angular-app
   npm install

   Das Kommando liest die im Projekt in der package.json aufgeführten Abhängigkeiten und lädt sie ins node_modules-Verzeichnis.

2. Projektinhalte anpassen (optional)

Zur Überprüfung, ob das Projekt korrekt läuft, können Sie die Startseite einfach anpassen:

1. Bearbeiten Sie die Datei src/app/app.component.html: Öffnen Sie servbay-angular-app/src/app/app.component.html mit einem Editor und ersetzen oder löschen Sie den Inhalt, z. B. durch eine Überschrift "Hello ServBay!".

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

3. Projekt im Entwicklungsmodus ausführen

Während der Entwicklung nutzen Sie den Angular-Entwicklungsserver (ng serve) mit Hot Reloading. Über ServBays Reverse-Proxy-Funktion besuchen Sie die App dann unter einer lokalen Domain.

1. Angular-Entwicklungsserver starten: Im Projektstammverzeichnis starten Sie den Server – z. B. über Port 8585, um keine Konflikte mit ServBays Standard-Webserver-Port zu riskieren.

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Das kompiliert Ihr Angular-Projekt und startet einen lokalen Webserver unter http://localhost:8585/. Das Terminalfenster sollte geöffnet bleiben.

2. ServBay-Website als Reverse Proxy konfigurieren: Im ServBay Control Panel unter “Websites” (früher “Hosts”) fügen Sie eine neue Website hinzu, die per Reverse Proxy auf den Entwicklungsserver zeigt.

   • Name: z. B. My Angular Dev Site (dient der internen Anzeige)
   • Domain: Nutzen Sie eine ServBay-Testdomain wie servbay-angular-dev.servbay.demo. ServBay routet .servbay.demo automatisch auf 127.0.0.1.
   • Website-Typ: Wählen Sie Reverse Proxy.
   • Proxy-Adresse: Geben Sie 127.0.0.1 ein.
   • Proxy-Port: Der im Angular-Server verwendete Port, z. B. 8585.

   Änderungen speichern und übernehmen.

3. Die Entwicklungswebsite aufrufen: Öffnen Sie Ihren Browser und besuchen Sie die Domain https://servbay-angular-dev.servbay.demo.

   Da der Zugriff via ServBay läuft und ServBay automatisch SSL-Zertifikate konfiguriert (ServBay User CA oder ServBay Public CA), können Sie Ihr Entwicklungsprojekt direkt über HTTPS nutzen – wie später im produktiven Betrieb. So lassen sich SSL-spezifische Probleme frühzeitig erkennen.

4. Produktionsversion bauen und bereitstellen

Sobald das Angular-Projekt bereit für die Auslieferung ist, wird eine optimierte Produktionsversion erstellt. Die statischen Dateien werden dann über ServBay gehostet.

1. Produktionsversion bauen: Im Projektverzeichnis führen Sie:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Ab neuerer Angular CLI-Version genügt:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Ab neuerer Angular CLI-Version genügt:
   # ng build

   Das Flag --prod (bei neuen CLIs Standard) aktiviert Optimierungen wie AOT-Kompilierung, Minifizierung und Tree-shaking. Die erstellten Dateien finden Sie im Ordner dist/servbay-angular-app (ggf. mit abweichendem Namen je nach Projekt).

2. ServBay-Website für statische Dateien konfigurieren: Im Control Panel legt man eine neue Website an, die auf das Output-Verzeichnis der Produktionsversion zeigt.

   • Name: z. B. My Angular Production Site

   • Domain: Empfohlen ist eine andere Testdomain: servbay-angular-prod.servbay.demo

   • Website-Typ: Static auswählen.

   • Root-Verzeichnis: Navigieren Sie zum Output Ordner aus dem vorherigen Schritt, typischerweise:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Das Verzeichnis muss die index.html enthalten.

   Speichern und Änderungen übernehmen.

3. Produktionswebsite aufrufen: Besuchen Sie im Browser https://servbay-angular-prod.servbay.demo.

   Nun wird Ihre gebaute Angular-App als statische Website über ServBays performanten Webserver (z. B. Caddy oder Nginx – je nach Konfiguration) ausgegeben. Auch hier wird SSL automatisch eingerichtet.

Vorteile von ServBay für Angular-Entwickler

• Integrierte Umgebung: Node.js-Versionen lassen sich bequem installiert und verwalten – keine mühsame PATH-Konfiguration.
• Flexible Websiteverwaltung: Über die übersichtliche Oberfläche können Reverse Proxies und statische Dateiserver schnell für Entwicklungs- und Produktionsmodus eingerichtet werden.
• Automatische SSL-Unterstützung: Kostenlos und automatisch für lokale Projekte – ideal, um HTTPS-Verhalten wie im Live-Betrieb zu prüfen, ohne Mixed-Content-Warnungen.
• Multi-Stack-Fähigkeit: Falls Ihr Projekt auch Backend-APIs (z. B. mit Node.js/Express, Python/Django/Flask, PHP/Laravel/Symfony, Go/Gin/Echo, Java/Spring Boot) oder Datenbanken (MySQL, PostgreSQL, MongoDB, Redis) benötigt, ist ServBay bestens geeignet und laufend aktualisiert. Vorher teils fehlende Features sind mittlerweile vollständig integriert.
• Datensicherung und Restore: Einfaches Backup für Konfiguration, Webseiten, Datenbanken und SSL-Zertifikate – Sicherheit für Ihre Entwicklungsdaten.
• Datenbank-Passwortreset: Komfortfunktionen zum Zurücksetzen von Root-Passwörtern für MySQL, MariaDB und PostgreSQL – ein echter Problemlöser für Entwickler.

FAQ – Häufige Fragen

• Q: Beim Ausführen von ng new oder ng serve erscheint command not found: ng. Was tun? A: Vermutlich ist die Angular CLI nicht korrekt installiert oder fehlt im PATH. Installieren Sie @angular/cli global (npm install -g @angular/cli) und stellen Sie sicher, dass ServBays Node.js auch im PATH liegt. Notfalls Terminal oder ServBay neu starten.
• Q: ng serve läuft nicht, weil der Port schon belegt ist. Was tun? A: Der gewünschte Port (z. B. 8585) wird bereits von einem anderen Dienst verwendet. Wählen Sie mit --port einen freien Port, z. B. ng serve --port 8586, und aktualisieren Sie den Port auch in Ihrer ServBay-Konfiguration.
• Q: Nach Konfiguration der ServBay-Website lädt die Seite nicht unter der gewünschten Domain. Was prüfen? A: Folgende Punkte checken:
  • Läuft ServBay?
  • Im Entwicklungsmodus: Ist ng serve aktiv und nutzt den korrekten Port für den Reverse Proxy?
  • Im Produktionsmodus: Zeigt das Root-Verzeichnis von ServBay auf das finale Output-Verzeichnis mit index.html (dist/Projektname)?
  • In ServBays Logdateien finden sich ggf. weitere Hinweise auf Fehler.
  • Stimmt die aufgerufene Domain exakt mit jener in der ServBay-Einstellung überein?
• Q: Kann ich Angular-Produktionsversion auch mit verschiedenen Webservern (Caddy/Nginx/Apache) über ServBay hosten? A: Ja, ServBay unterstützt Caddy, Nginx und Apache als statische Dateiserver. Bei der Einrichtung wird automatisch der aktivierte Server verwendet – alle bieten performantes Hosting für statische Webprojekte.

Fazit

Mit dieser Anleitung haben Sie Ihr Angular-Projekt erfolgreich in ServBay erstellt und ausgeführt. Sie wissen nun, wie Sie im Entwicklungsmodus per Reverse Proxy und Domain auf den Angular-Server zugreifen, und wie die gebaute Produktionsversion via statischem Dateiserver bereitgestellt wird. Dank ServBays Node.js-Integration, Websiteverwaltung und automatischer SSL-Unterstützung steigern Sie die Effizienz und Qualität Ihrer lokalen Angular-Entwicklung erheblich. Die breite Technologieunterstützung von ServBay bietet darüber hinaus die perfekte Plattform für Fullstack-Projekte.