# Lokale Entwicklung – Nicht per file:// öffnen

**Problem:** Wenn du HTML-Dateien direkt aus dem Dateisystem öffnest (Doppelklick oder `file:///D:/contentcreators/...`), meldet der Browser **CORS**- und **Origin-null**-Fehler. Viele Features funktionieren dann nicht.

---

## Ursache

- **Origin:** Bei `file://` ist die Origin `null`.
- **Unterstützt werden nur:** `http:`, `https:`, `chrome-extension:`, etc.
- **Folgen:** ES-Module (`type="module"`), `fetch()` zu relativen URLs, Service Worker, PWA-Manifest, WebSocket/Socket.IO werden blockiert oder schlagen fehl.

---

## Lösung: Lokalen Webserver nutzen

Im Projektordner (z. B. `D:\contentcreators`) einen der folgenden Befehle ausführen:

### Option 1: npx serve (Node)

```bash
npx serve .
```

Dann im Browser öffnen: **http://localhost:3000** (oder die angezeigte Port-Nummer).

### Option 2: Python

```bash
python -m http.server 8000
```

Dann: **http://localhost:8000**

### Option 3: PHP

```bash
php -S localhost:8000
```

Dann: **http://localhost:8000**

---

## Betroffene Dateien / vergleichbare Fehler

| Datei / Bereich | Art des Fehlers | Grund |
|-----------------|-----------------|--------|
| **portal-dashboard.html** | Service Worker, Manifest blockiert | SW/Manifest nur über http(s). |
| **portal-dashboard.html** | fetch zu `/api/health` etc. | Relative URLs werden zu `file:///api/...`. |
| **atelier/index.html** | CORS bei `./js/atelier.js`, `./js/versions.js`, … | ES-Module (`type="module"`) von file:// blockiert. |
| **playground.html** | `socket.io.js` net::ERR_FILE_NOT_FOUND, fetch zu `/api/*` | Socket.IO und API laufen nur mit laufendem Server (z. B. `node whatsapp-like-server.js`) und http(s). |
| **index.html** | Manifest blockiert | Wie oben, nur über http(s). |
| **manifest-portal.html**, **manifest-forum.html** | Kein SW/Manifest von file:// | Gleich wie Portal-Dashboard. |
| **test_frontend.html**, **test_complete_workflow.html**, **test_error_scenarios.html** | fetch('/api/...') | API-Tests erwarten Backend + http(s). |
| **bewerbung.html** | `type="module"` src=./src/main.js | ES-Module von file:// blockiert. |

---

## Kurz-Checkliste

1. **Nie** die HTML-Dateien per Doppelklick (file://) öffnen, wenn du PWA, Service Worker, Module oder API testen willst.
2. **Immer** im Projektroot einen lokalen Server starten (`npx serve .` oder `python -m http.server 8000`).
3. **Im Browser** `http://localhost:PORT/...` aufrufen (z. B. `http://localhost:3000/portal-dashboard.html`, `http://localhost:3000/atelier/`).
4. **Playground / API-Tests:** Zusätzlich den passenden Backend-Server starten (z. B. `node whatsapp-like-server.js`), damit `/api/` und Socket.IO erreichbar sind.

---

## Hinweis im UI

- **portal-dashboard.html** zeigt oben einen gelben Hinweisbalken, wenn die Seite per `file://` geöffnet wurde, mit Verweis auf diese Anleitung und den Befehl zum Starten eines lokalen Servers.