# Production Setup - emailsorter.webklar.com

## Probleme und Lösungen

### 1. Appwrite CORS-Konfiguration

**Problem:** Appwrite blockiert Requests von `https://emailsorter.webklar.com` weil nur `https://localhost` als Origin erlaubt ist.

**Lösung:**
1. Gehe zu deiner Appwrite-Konsole: https://appwrite.webklar.com
2. Öffne dein Projekt
3. Gehe zu **Settings** → **Platforms** (oder **Web**)
4. Füge eine neue Platform hinzu oder bearbeite die existierende:
   - **Name:** Production
   - **Hostname:** `emailsorter.webklar.com`
   - **Origin:** `https://emailsorter.webklar.com`
5. Speichere die Änderungen

**Alternative:** Wenn du mehrere Origins brauchst, kannst du auch in Appwrite die CORS-Einstellungen anpassen, um mehrere Origins zu erlauben.

---

### 2. Backend-Server (502 Fehler)

**Problem:** Der Backend-Server läuft nicht oder ist nicht erreichbar.

**Lösung:**

#### Option A: Server auf demselben Server starten

1. **SSH zum Server:**
   ```bash
   ssh user@webklar.com
   ```

2. **Zum Projekt-Verzeichnis navigieren:**
   ```bash
   cd /path/to/ANDJJJJJJ/server
   ```

3. **Environment-Variablen setzen:**
   Erstelle oder bearbeite `.env`:
   ```env
   NODE_ENV=production
   PORT=3000
   BASE_URL=https://api.emailsorter.webklar.com
   FRONTEND_URL=https://emailsorter.webklar.com
   CORS_ORIGIN=https://emailsorter.webklar.com
   
   APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
   APPWRITE_PROJECT_ID=deine_projekt_id
   APPWRITE_API_KEY=dein_api_key
   APPWRITE_DATABASE_ID=email_sorter_db
   
   # ... weitere Variablen
   ```

4. **Server starten:**
   ```bash
   npm install
   npm start
   ```

#### Option B: Mit PM2 (empfohlen für Production)

```bash
npm install -g pm2
cd /path/to/ANDJJJJJJ/server
pm2 start index.mjs --name emailsorter-api
pm2 save
pm2 startup
```

#### Option C: Reverse Proxy konfigurieren (Nginx)

Falls der Server auf einem anderen Port läuft, konfiguriere Nginx:

```nginx
server {
    listen 80;
    server_name api.emailsorter.webklar.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

---

### 3. Frontend Environment-Variablen

Stelle sicher, dass das Frontend die richtige Backend-URL verwendet:

1. **Erstelle `client/.env.production`:**
   ```env
   VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
   VITE_APPWRITE_PROJECT_ID=deine_projekt_id
   VITE_API_URL=https://api.emailsorter.webklar.com
   ```

2. **Build das Frontend:**
   ```bash
   cd client
   npm run build
   ```

3. **Deploy den Build-Ordner** (`client/dist`) zu deinem Web-Server

---

### 4. Checkliste

- [ ] Appwrite CORS: `https://emailsorter.webklar.com` als Origin hinzugefügt
- [ ] Backend-Server läuft und ist erreichbar
- [ ] Backend `.env` konfiguriert mit Production-URLs
- [ ] Frontend `.env.production` konfiguriert
- [ ] Frontend gebaut und deployed
- [ ] Reverse Proxy (Nginx) konfiguriert (falls nötig)
- [ ] SSL-Zertifikat für beide Domains (Frontend + API)

---

### 5. Testing

Nach dem Setup, teste:

1. **Frontend:** https://emailsorter.webklar.com
2. **Backend Health:** https://api.emailsorter.webklar.com/api/health
3. **Login:** Versuche dich einzuloggen und prüfe die Browser-Konsole auf Fehler

---

### Troubleshooting

**CORS-Fehler weiterhin:**
- Prüfe, ob die Appwrite-Änderungen gespeichert wurden
- Warte 1-2 Minuten (Cache)
- Prüfe Browser-Konsole für genaue Fehlermeldung

**502 Bad Gateway:**
- Prüfe, ob der Backend-Server läuft: `pm2 list` oder `ps aux | grep node`
- Prüfe Server-Logs: `pm2 logs emailsorter-api` oder `tail -f server.log`
- Prüfe Firewall-Regeln
- Prüfe Reverse Proxy Konfiguration

**API nicht erreichbar:**
- Prüfe, ob der Port 3000 offen ist
- Prüfe, ob die Domain richtig auf den Server zeigt
- Prüfe DNS-Einträge