285 lines
8.9 KiB
Markdown
285 lines
8.9 KiB
Markdown
# 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 │ │
|
|
│ └──────────────────┘ └──────────────────┘ │
|
|
│ ↓ ↓ │
|
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
|
│ │ presseportale.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.presseportale.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.presseportale.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://presseportale.test | 5177 | portal | ✅ |
|
|
| https://presseecho.test | 5178 | presseecho | ❌ |
|
|
| https://businessportal24.test | 5178 | businessportal24 | ❌ |
|
|
|
|
## HMR (Hot Module Replacement)
|
|
|
|
- **Portal:** `wss://assets.presseportale.test` → Port 5177
|
|
- **Web:** `wss://assets-web.presseportale.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.presseportale.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.presseportale.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 presseportale.test
|
|
127.0.0.1 presseecho.test
|
|
127.0.0.1 businessportal24.test
|
|
127.0.0.1 assets.presseportale.test
|
|
127.0.0.1 assets-web.presseportale.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://presseportale.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`
|
|
|