Homenas Landing Page — Wiki

Angular-basierte Homelab-Startseite für das lokale Netzwerk (neugasse.lan).
Zeigt Self-Hosted-Services aus Directus als Link-Karten an und ermöglicht die Steuerung von Tasmota-Steckdosen direkt aus dem Browser.

Seiten

Seite	Inhalt
Installation & Einrichtung	Node.js, Angular CLI, Clone, Ersteinrichtung
Lokale Entwicklung	ng serve, Dev-Proxy, Debugging
Deployment	ng build, rsync, Docker
Nginx Proxy Manager	Token-Injection, Konfiguration
Tasmota-Steckdosen	Konfiguration, neue Steckdosen ergänzen
Sicherheit	Token-Handling, .gitignore, Best Practices

Architektur

Browser (Angular SPA)
    │
    │  GET /api/items/landingpage    (kein Token im Frontend)
    │  GET /api/assets/<bild>
    │  GET http://stecker1.neugasse.lan/cm?cmnd=Power
    │  GET http://stecker2.neugasse.lan/cm?cmnd=Power
    ▼
Nginx Proxy Manager
    │  injiziert: Authorization: Bearer <token>  →  Directus
    │  Tasmota-Geräte werden direkt vom Browser angesprochen (LAN)
    ▼
Nginx-Container (Port 9999)
    └── dist/  (Angular Production Build)

Der Directus API-Token verlässt niemals den Browser — er wird ausschließlich im Nginx Proxy Manager als proxy_set_header konfiguriert.

Stack

Komponente	Technologie
Frontend	Angular 17.1, Bootstrap 5
CMS / API	Directus
Steckdosen	Tasmota (HTTP-API)
Webserver	nginx:stable-alpine (Docker)
Reverse Proxy	Nginx Proxy Manager
Node.js	20 LTS (via nvm)
Angular CLI	21.x