presseportale/_docs/VITE-SETUP.md
Kevin Adametz 5b8bdf4182
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
12-05-2026 Frontend dev
2026-05-12 18:32:33 +02:00

145 lines
4 KiB
Markdown

# 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)
```bash
npm run dev:all
```
Startet beide Vite-Server parallel mit `concurrently`
### Option 2: Nur Backend (Portal)
```bash
npm run dev:portal
```
- Port: 5177
- HMR-Host: assets.presseportale.test
- Domain: presseportale.test
### Option 3: Nur Frontend (Web)
```bash
npm run dev:web
```
- Port: 5178
- HMR-Host: assets-web.presseportale.test
- Domains: presseecho.test, businessportal24.test
## Production Build
### Alle Builds erstellen
```bash
npm run build
```
Erstellt beide Builds nacheinander
### Einzelne Builds
```bash
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
```bash
# 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.