# Zusammenfassung: Multi-Domain Vite-Setup

## Antwort auf die Hauptfrage: Reicht ein Vite-Port?

### ❌ NEIN - Ein Port reicht NICHT aus!

Du benötigst **mindestens 2 Vite-Ports**:
- **Port 5177** für Portal (Backend mit FluxUI)
- **Port 5178** für Web (Frontend: Presseecho & Businessportal24)

## Begründung

### Warum 2 Ports?

1. **Unterschiedliche Vite-Konfigurationen**
   - Portal: Verwendet FluxUI (flux-pro/flux)
   - Web: Kein FluxUI, nur Tailwind CSS

2. **Unterschiedliche Tailwind-Konfigurationen**
   - Portal: `tailwind.portal.config.js` (mit FluxUI-Content-Paths)
   - Web: `tailwind.web.config.js` (ohne FluxUI)

3. **Unterschiedliche Build-Verzeichnisse**
   - Portal: `public/build/portal`
   - Web: `public/build/web`

4. **Vite-Limitierung**
   - Ein Vite Dev Server kann nur **eine Konfiguration** gleichzeitig ausführen
   - Für verschiedene Configs = separate Vite-Prozesse = separate Ports

### Warum können Presseecho & Businessportal24 einen Port teilen?

1. **Gleiche Views/Components**
   - Beide nutzen `resources/views/web/**`
   - Gleiche Blade-Templates und Livewire-Components

2. **Gleiche Vite-Konfiguration**
   - Beide laden die gleichen CSS-Input-Dateien
   - Beide bauen nach `public/build/web`

3. **Theme-Unterschiede nur in CSS-Variablen**
   - Presseecho: Grüne Farben (#345636, #6b8f71)
   - Businessportal24: Rote Farben (#cf3628, #f0834a)
   - Unterschiede werden durch CSS Custom Properties gesteuert

4. **Runtime-Entscheidung**
   - `ThemeServiceProvider` erkennt die Domain zur Laufzeit
   - Lädt automatisch die richtige Theme-CSS-Datei

## Architektur-Übersicht

```
┌─────────────────────────────────────────────────────────────┐
│                    Docker Container                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────┐         ┌──────────────────┐        │
│  │   Vite Portal    │         │    Vite Web      │        │
│  │   Port: 5177     │         │   Port: 5178     │        │
│  │                  │         │                  │        │
│  │  - FluxUI ✅     │         │  - FluxUI ❌     │        │
│  │  - portal.css    │         │  - presseecho    │        │
│  │  - build/portal  │         │  - businessp24   │        │
│  │                  │         │  - build/web     │        │
│  └──────────────────┘         └──────────────────┘        │
│          ↓                            ↓                    │
│  ┌──────────────────┐         ┌──────────────────┐        │
│  │  pressekonto.test │         │  presseecho.test │        │
│  │                  │         │  businessp24.test│        │
│  └──────────────────┘         └──────────────────┘        │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

## Vorgenommene Änderungen

### 1. Vite-Konfigurationen aktualisiert

#### ✅ `vite.portal.config.js`
- Port: **5177**
- Input: `resources/css/portal.css`
- Build: `public/build/portal`
- HMR: `assets.pressekonto.test`
- FluxUI: ✅ Ja

#### ✅ `vite.web.config.js`
- Port: **5178** (geändert von 5177!)
- Input: `theme-presseecho.css`, `theme-businessportal24.css`
- Build: `public/build/web`
- HMR: `assets-web.pressekonto.test`
- FluxUI: ❌ Nein

#### ❌ `vite.config.js` (deprecated)
- Als DEPRECATED markiert
- Wird nicht mehr verwendet

### 2. Tailwind-Konfigurationen aktualisiert

#### ✅ `tailwind.portal.config.js`
- Content-Pfade für Portal + FluxUI
- Dokumentation hinzugefügt

#### ✅ `tailwind.web.config.js`
- Content-Pfade für Web (ohne FluxUI)
- Dokumentation hinzugefügt

#### ❌ `tailwind.config.js` (deprecated)
- Als DEPRECATED markiert
- Wird nicht mehr verwendet

### 3. Neue CSS-Theme-Dateien erstellt

#### ✅ `resources/css/web/shared-styles.css`
- Gemeinsame Styles für beide Frontend-Themes
- Typography, Components, Utilities

#### ✅ `resources/css/web/theme-presseecho.css`
- Primary: #345636 (Grün)
- Secondary: #6b8f71 (Hellgrün)
- Font: Montserrat
- CSS-Variablen für HSL-Farben
- Dark-Mode-Support

#### ✅ `resources/css/web/theme-businessportal24.css`
- Primary: #cf3628 (Rot)
- Secondary: #f0834a (Orange)
- Font: Montserrat
- CSS-Variablen für HSL-Farben
- Dark-Mode-Support

### 4. `package.json` Scripts aktualisiert

```json
{
  "dev": "Hinweismeldung",
  "dev:portal": "vite --config vite.portal.config.js",
  "dev:web": "vite --config vite.web.config.js",
  "dev:all": "concurrently beide gleichzeitig",
  "build": "beide Builds nacheinander",
  "build:portal": "nur Portal",
  "build:web": "nur Web"
}
```

### 5. `devcontainer.json` aktualisiert

- Port **5178** zu forwardPorts hinzugefügt
- Port-Label aktualisiert

### 6. Dokumentation erstellt

- ✅ `VITE-SETUP.md` - Technische Vite-Dokumentation
- ✅ `THEME-INTEGRATION.md` - Integration in Blade-Templates
- ✅ `ZUSAMMENFASSUNG-VITE-SETUP.md` - Diese Datei

## So startest du die Dev-Server

### Option 1: Beide gleichzeitig (empfohlen)
```bash
npm run dev:all
```
Startet:
- Portal auf Port 5177
- Web auf Port 5178

### Option 2: Nur Backend
```bash
npm run dev:portal
```

### Option 3: Nur Frontend
```bash
npm run dev:web
```

## Production Builds

```bash
# Alle Builds erstellen
npm run build

# Nur Portal
npm run build:portal

# Nur Web
npm run build:web
```

## URLs für Development

| URL | Vite-Port | Theme | FluxUI |
|-----|-----------|-------|--------|
| https://pressekonto.test | 5177 | portal | ✅ |
| https://presseecho.test | 5178 | presseecho | ❌ |
| https://businessportal24.test | 5178 | businessportal24 | ❌ |

## HMR (Hot Module Replacement)

- **Portal:** `wss://assets.pressekonto.test` → Port 5177
- **Web:** `wss://assets-web.pressekonto.test` → Port 5178

⚠️ **Wichtig:** Traefik muss beide HMR-Hosts routen!

## Nächste Schritte

### 1. Traefik-Konfiguration prüfen
Stelle sicher, dass Traefik beide Vite-Ports routet:

```yaml
# docker-compose.yml oder traefik.yml
labels:
  # Portal Assets
  - "traefik.http.routers.vite-portal.rule=Host(`assets.pressekonto.test`)"
  - "traefik.http.routers.vite-portal.service=vite-portal"
  - "traefik.http.services.vite-portal.loadbalancer.server.port=5177"
  
  # Web Assets
  - "traefik.http.routers.vite-web.rule=Host(`assets-web.pressekonto.test`)"
  - "traefik.http.routers.vite-web.service=vite-web"
  - "traefik.http.services.vite-web.loadbalancer.server.port=5178"
```

### 2. DNS/Hosts-Datei aktualisieren

```
127.0.0.1 pressekonto.test
127.0.0.1 presseecho.test
127.0.0.1 businessportal24.test
127.0.0.1 assets.pressekonto.test
127.0.0.1 assets-web.pressekonto.test
```

### 3. Blade-Templates aktualisieren

Siehe `THEME-INTEGRATION.md` für Details zur Integration in Templates.

Beispiel für Web-Layout:

```blade
@if($theme === 'presseecho')
    @vite(['resources/css/web/theme-presseecho.css', 'resources/js/app.js'])
@elseif($theme === 'businessportal24')
    @vite(['resources/css/web/theme-businessportal24.css', 'resources/js/app.js'])
@endif
```

### 4. Alte Theme-Dateien aufräumen (optional)

Diese Dateien werden nicht mehr benötigt:
- `resources/css/web/theme-main.css`
- `resources/css/web/theme-landing1.css`
- `resources/css/web/theme-landing2.css`

### 5. Testen

```bash
# 1. Dev-Server starten
npm run dev:all

# 2. Browser öffnen
# - https://pressekonto.test (Backend)
# - https://presseecho.test (Frontend Grün)
# - https://businessportal24.test (Frontend Rot)

# 3. HMR testen
# - Datei ändern
# - Browser sollte auto-refresh
```

## Vorteile dieser Lösung

✅ **Saubere Trennung**: Backend und Frontend komplett getrennt
✅ **FluxUI isoliert**: Nur im Backend verfügbar
✅ **Effizient**: Frontend-Domains teilen Build-Pipeline
✅ **Flexibel**: Neue Themes einfach durch neue CSS-Dateien hinzufügbar
✅ **Developer-freundlich**: HMR funktioniert für alle Domains
✅ **Production-ready**: Separate Builds für optimale Performance

## Fragen?

- Technische Details → `VITE-SETUP.md`
- Blade-Integration → `THEME-INTEGRATION.md`
- Domain-Konfiguration → `config/domains.php`
- Theme-Provider → `app/Providers/ThemeServiceProvider.php`