presseportale/_docs/VITE-SETUP.md

Vite Multi-Domain Setup

Übersicht

Dieses Projekt verwendet 2 separate Vite-Ports für unterschiedliche Domain-Bereiche:

Bereich	Port	Vite Config	Tailwind Config	Domains	FluxUI
Backend (Portal)	5177	vite.portal.config.js	tailwind.portal.config.js	presseportale.test	✅ Ja
Frontend (Web)	5178	vite.web.config.js	tailwind.web.config.js	presseecho.test, businessportal24.test	❌ Nein

Warum 2 Ports?

Ein Port reicht NICHT aus, weil:

• Vite kann nur eine Konfiguration gleichzeitig ausführen
• Backend nutzt FluxUI (flux-pro/flux), Frontend nicht
• Unterschiedliche Build-Verzeichnisse (build/portal vs build/web)
• Unterschiedliche Tailwind-Konfigurationen

Frontend-Domains teilen sich einen Port, weil:

• Beide nutzen die gleichen Views/Components
• Unterschiede nur in CSS-Variablen (Theme-Farben)
• ThemeServiceProvider entscheidet zur Laufzeit welches Theme geladen wird

Development Server starten

Option 1: Beide Server gleichzeitig starten (empfohlen)

npm run dev:all

Startet beide Vite-Server parallel mit concurrently

Option 2: Nur Backend (Portal)

npm run dev:portal

• Port: 5177
• HMR-Host: assets.presseportale.test
• Domain: presseportale.test

Option 3: Nur Frontend (Web)

npm run dev:web

• Port: 5178
• HMR-Host: assets-web.presseportale.test
• Domains: presseecho.test, businessportal24.test

Production Build

Alle Builds erstellen

npm run build

Erstellt beide Builds nacheinander

Einzelne Builds

npm run build:portal  # Nur Backend
npm run build:web     # Nur Frontend

Port-Übersicht

Port	Service	Beschreibung
5177	Vite Portal	Backend Dev Server mit FluxUI
5178	Vite Web	Frontend Dev Server (Presseecho & Businessportal24)
33069	MySQL	Datenbank
6382	Redis	Cache
8027	Mailpit	E-Mail Dashboard

Build-Verzeichnisse

public/
├── build/
│   ├── portal/          # Backend Assets
│   │   ├── manifest.json
│   │   └── assets/
│   └── web/             # Frontend Assets (beide Domains)
│       ├── manifest.json
│       └── assets/

Theme-System

Backend (Portal)

• Domain: presseportale.test
• Theme: portal
• CSS: resources/css/portal.css
• Views: resources/views/portal/**
• FluxUI: Ja (flux-pro/flux)

Frontend (Presseecho)

• Domain: presseecho.test
• Theme: presseecho
• CSS: resources/css/web/theme-presseecho.css
• Views: resources/views/web/**
• Farben: Über CSS-Variablen in theme-presseecho.css

Frontend (Businessportal24)

• Domain: businessportal24.test
• Theme: businessportal24
• CSS: resources/css/web/theme-businessportal24.css
• Views: resources/views/web/**
• Farben: Über CSS-Variablen in theme-businessportal24.css

Traefik / HMR-Setup

Beide Vite-Server laufen intern auf HTTP (https: false), Traefik übernimmt SSL-Terminierung:

• Portal HMR: wss://assets.presseportale.test → Port 5177
• Web HMR: wss://assets-web.presseportale.test → Port 5178

Troubleshooting

HMR funktioniert nicht

1. Prüfe ob beide Vite-Server laufen: npm run dev:all
2. Prüfe Traefik-Routing für HMR-Hosts
3. Browser-Console checken für WebSocket-Fehler

Styles werden nicht geladen

1. Prüfe ob der richtige Vite-Server für die Domain läuft
2. Prüfe ThemeServiceProvider Konfiguration
3. Build-Manifest prüfen: public/build/portal/manifest.json oder public/build/web/manifest.json

Port bereits belegt

# Port-Nutzung prüfen
lsof -i :5177
lsof -i :5178

# Prozess beenden
kill -9 <PID>

Deprecated Files

Diese Dateien werden nicht mehr verwendet:

• ❌ vite.config.js (alt)
• ❌ tailwind.config.js (alt)

Sie bleiben nur als Referenz erhalten.