# Frontend — Installation, Build & Deploy

React + Vite + TailwindCSS Web-Frontend, deployed als statische Dateien über Nginx.

## Eckdaten

| | |
|---|---|
| **Tech** | React 18, Vite, TailwindCSS, Recharts, Zustand, lucide-react |
| **Theme** | Dark mit Orange-Akzent, komplett deutsch |
| **Auth** | JWT Login (8h Token) |
| **Standard-Login** | `admin` / `Start!123` (beim ersten Backend-Start angelegt) |
| **Frontend-Server** | separater LXC / Debian-Server mit Nginx |
| **Backend-Verbindung** | direkter HTTPS-API-Call zu `https://BACKEND_IP:8443` |

---

## 1. Voraussetzungen (Frontend-Server: Debian/Ubuntu)

Build und Serving laufen auf demselben Linux-Server.

```bash
# Node.js 20+ über NodeSource-Repository installieren
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# Version prüfen
node -v   # → v20.x.x
npm -v    # → 10.x.x

# Repo klonen
git clone https://git.cynfo.net/christian/rmm2.git /opt/rmm
cd /opt/rmm/frontend

# Abhängigkeiten installieren (einmalig)
npm install
```

---

## 2. Backend-URL konfigurieren

**VOR dem Build** muss `frontend/src/config.js` angelegt werden.
Die Datei ist in `.gitignore` und wird nicht eingecheckt (enthält echte IP + API-Key).

```bash
cp frontend/src/config.example.js frontend/src/config.js
```

Dann `config.js` anpassen:

```js
// frontend/src/config.js
export const BACKEND_HOST = '<BACKEND-IP>'        // IP des Backend-Servers (für direkte Links, z.B. Tunnel-Ports)
export const BACKEND_URL = `https://${BACKEND_HOST}:8443`
export const API_KEY = 'DEIN_API_KEY'              // aus backend/config.yaml → api_keys[0]
```

> **Hinweis:** API-Calls laufen im Produktivbetrieb über den Nginx-Proxy (`/api/` → Backend).
> `BACKEND_HOST` wird nur noch für direkte Links verwendet (z.B. WebGUI-Tunnel-Ports).
> `BACKEND_URL` wird im Dev-Server-Modus (Vite) für direkte API-Calls verwendet.

Für die **lokale Entwicklung** (`npm run dev`) muss zusätzlich `vite.config.js` angepasst werden:

```js
// vite.config.js → server.proxy
proxy: {
  '/api': {
    target: 'https://<BACKEND-IP>:8443',  // Backend-IP anpassen
    changeOrigin: true,
    secure: false,
    ws: true,  // WebSocket-Proxy aktivieren (Web Terminal, Agent-WS)
  }
}
```

---

## 3. Build

```bash
cd frontend
npm run build
```

Erzeugt `frontend/dist/` mit:
- `index.html`
- `assets/index-[hash].js` (~330 KB)
- `assets/index-[hash].css` (~32 KB)
- `vite.svg`

---

## 4. Nginx auf dem Frontend-Server installieren

```bash
# Debian 12/13
apt update
apt install -y nginx

systemctl enable nginx
systemctl start nginx
```

---

## 5. Nginx konfigurieren

React Router benötigt ein Nginx-Config das alle Routen auf `index.html` umleitet. Zusätzlich proxyt Nginx alle `/api/`-Requests zum Backend — das löst zwei Probleme:
- **CORS** entfällt komplett (gleicher Origin)
- **WebSocket-Verbindungen** (Web Terminal, Agent-WS) funktionieren ohne Browser-Zertifikatswarning

> **Wichtig:** `proxy_ssl_verify off` ist nötig da das Backend ein selbstsigniertes Zertifikat verwendet.
> **Wichtig:** `proxy_read_timeout 86400` ist nötig für lang laufende WebSocket-Verbindungen (Terminal, Tunnel).

```bash
# Bestehende Default-Config ersetzen
cat > /etc/nginx/sites-available/rmm-frontend << 'EOF'
server {
    listen 80;
    server_name _;

    root /var/www/html;
    index index.html;

    # API Reverse-Proxy zum Backend (REST + WebSocket)
    location /api/ {
        client_max_body_size 50m;

        proxy_pass https://<BACKEND-IP>:8443;
        proxy_ssl_verify off;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket-Support (Web Terminal, Agent-WS, Tunnel)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }

    # React SPA — alle Routen auf index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Statische Assets mit Cache
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Kein Zugriff auf versteckte Dateien
    location ~ /\. {
        deny all;
    }
}
EOF

ln -sf /etc/nginx/sites-available/rmm-frontend /etc/nginx/sites-enabled/rmm-frontend
rm -f /etc/nginx/sites-enabled/default

nginx -t && systemctl reload nginx
```

> **Backend-IP anpassen:** `<BACKEND-IP>:8443` durch die tatsächliche Backend-Adresse ersetzen.

---

## 6. Deploy (auf dem Frontend-Server selbst)

```bash
cd /opt/rmm/frontend

# Alten Build löschen (Pflicht — Vite nutzt Hash-basierte Dateinamen)
rm -rf dist/ /var/www/html/assets/*

# Build erstellen
npm run build

# In Nginx-Webroot kopieren
cp -r dist/* /var/www/html/

# Nginx neu laden
nginx -s reload
```

**Wichtig:** `assets/*` MUSS vor jedem Deploy gelöscht werden — Vite generiert Hash-basierte
Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst liegen und der Browser
bekommt beim nächsten Laden 404-Fehler.

### Als Einzeiler (nach Änderungen am Code)

```bash
cd /opt/rmm && git pull && cd frontend && npm install && \
rm -rf dist/ /var/www/html/assets/* && npm run build && \
cp -r dist/* /var/www/html/ && nginx -s reload && echo "Deploy fertig"
```

---

## 7. Erster Login

```
URL:       http://FRONTEND_SERVER_IP
Benutzer:  admin
Passwort:  Start!123
```

Passwort sofort ändern unter **Einstellungen → Benutzer**.

---

## 8. Lokale Entwicklung (optional)

```bash
cd /opt/rmm/frontend
npm run dev
```

Startet Vite Dev-Server auf `http://FRONTEND_IP:5173` mit Hot-Reload.
API-Calls werden per Proxy an das Backend weitergeleitet — `vite.config.js` anpassen:

```js
// vite.config.js
proxy: {
  '/api': {
    target: 'https://<BACKEND-IP>:8443',  // Backend-IP anpassen
    changeOrigin: true,
    secure: false,
    ws: true,  // WebSocket-Proxy (Web Terminal, Agent-WS)
  }
}
```

---

## Seiten

| Seite | Route | Beschreibung |
|-------|-------|-------------|
| Login | `/login` | JWT Login |
| Dashboard | `/` | Status-Kacheln, Agent-Liste, AgentPanel per Klick |
| Firewalls | `/agents` | Suchbare Tabelle, AgentPanel mit Tabs, Hinzufügen/Löschen |
| Tunnel | `/tunnels` | Globale Tunnel-Übersicht über alle Firewalls |
| Firmware | `/firmware` | Multi-Plattform Upload, Agent-Update-Trigger |
| Kunden | `/customers` | CRUD Kundenverwaltung |
| Einstellungen | `/settings` | Benutzerverwaltung, Passwörter ändern |

## AgentPanel Tabs

| Tab | Inhalt |
|-----|--------|
| Übersicht | Hardware, OS, Uptime, CPU/RAM, Lizenz (Business Edition) |
| Interfaces | Netzwerk-Interfaces mit IP, MAC, Status, RX/TX |
| Dienste | Laufende Services mit Status-Badge |
| Tunnel | Quick-Buttons (WebGUI, SSH, Custom), aktive Tunnel |
| VPN | WireGuard-Instanzen mit Transfer-Statistiken |
| WireGuard | Peer-Management (CRUD), Client-Config mit Copy-Button |
| Routen | Routing-Tabelle |
| DHCP | Aktive Leases mit Suche (IP, MAC, Hostname) |
| Zertifikate | Karten-Layout mit Ablaufdatum und Fortschrittsbalken |
| Backups | Config-Backup erstellen, Liste, Download als XML |
| Agent | Version, Agent-ID, Update-Button, Remote-Befehle |

---

## Dateistruktur

```
frontend/
├── src/
│   ├── config.js              # NICHT im Git — vor Build anlegen (s.o.)
│   ├── config.example.js      # Vorlage mit Platzhaltern
│   ├── App.jsx                # Router + ProtectedRoute
│   ├── main.jsx               # Entry Point
│   ├── index.css              # TailwindCSS + Custom Styles
│   ├── api/client.js          # API Client (alle Endpoints)
│   ├── stores/auth.js         # Zustand Auth Store (JWT Token)
│   ├── layouts/AppLayout.jsx  # Sidebar Navigation + Outlet
│   ├── components/
│   │   ├── AgentPanel.jsx     # Side Panel mit 11 Tabs
│   │   └── StatusBadge.jsx    # Online/Offline/Stale Badge
│   └── pages/
│       ├── Dashboard.jsx      # Status-Kacheln + Agent-Liste
│       ├── Agents.jsx         # Firewall-Tabelle + Pre-Registration
│       ├── Tunnels.jsx        # Globale Tunnel-Übersicht
│       ├── Firmware.jsx       # Multi-Plattform Firmware + Updates
│       ├── Customers.jsx      # Kunden CRUD
│       ├── SettingsPage.jsx   # User-Management + Passwort
│       └── Login.jsx          # JWT Login
├── vite.config.js             # Vite Config (Proxy für Dev-Server)
└── package.json
```