first commit
This commit is contained in:
commit
405df0a122
3083 changed files with 69203 additions and 0 deletions
285
ZUSAMMENFASSUNG-VITE-SETUP.md
Normal file
285
ZUSAMMENFASSUNG-VITE-SETUP.md
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
# 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 │ │
|
||||
│ └──────────────────┘ └──────────────────┘ │
|
||||
│ ↓ ↓ │
|
||||
│ ┌──────────────────┐ ┌──────────────────┐ │
|
||||
│ │ pr-copilot.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.pr-copilot.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.pr-copilot.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://pr-copilot.test | 5177 | portal | ✅ |
|
||||
| https://presseecho.test | 5178 | presseecho | ❌ |
|
||||
| https://businessportal24.test | 5178 | businessportal24 | ❌ |
|
||||
|
||||
## HMR (Hot Module Replacement)
|
||||
|
||||
- **Portal:** `wss://assets.pr-copilot.test` → Port 5177
|
||||
- **Web:** `wss://assets-web.pr-copilot.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.pr-copilot.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.pr-copilot.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 pr-copilot.test
|
||||
127.0.0.1 presseecho.test
|
||||
127.0.0.1 businessportal24.test
|
||||
127.0.0.1 assets.pr-copilot.test
|
||||
127.0.0.1 assets-web.pr-copilot.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://pr-copilot.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`
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue