presseportale/_docs/ZUSAMMENFASSUNG-VITE-SETUP.md

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

{
  "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)

npm run dev:all

Startet:

• Portal auf Port 5177
• Web auf Port 5178

Option 2: Nur Backend

npm run dev:portal

Option 3: Nur Frontend

npm run dev:web

Production Builds

# 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:

# 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:

@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

# 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