344 lines
6.8 KiB
Markdown
344 lines
6.8 KiB
Markdown
# 🚀 MYP Frontend Build System
|
|
|
|
## Air-Gapped Build System für Mercedes-Benz TBA Marienfelde
|
|
|
|
Dieses Build-System ermöglicht die lokale Kompilierung und Optimierung aller Frontend-Assets für den **air-gapped Betrieb** (ohne Internetverbindung).
|
|
|
|
---
|
|
|
|
## 📋 **Schnellstart**
|
|
|
|
### **1. Initial Setup (einmalig mit Internet)**
|
|
|
|
```bash
|
|
# Im backend-Verzeichnis
|
|
cd backend
|
|
|
|
# Dependencies installieren
|
|
npm install
|
|
```
|
|
|
|
### **2. Build ausführen**
|
|
|
|
```bash
|
|
# Vollständiger Build
|
|
npm run build
|
|
|
|
# Entwicklungsmodus (Watch)
|
|
npm run dev
|
|
```
|
|
|
|
### **3. Air-Gapped Installation**
|
|
|
|
```bash
|
|
# Für Systeme ohne Internet
|
|
npm run install:air-gapped
|
|
```
|
|
|
|
---
|
|
|
|
## 🛠️ **Verfügbare Befehle**
|
|
|
|
| Befehl | Beschreibung |
|
|
|--------|-------------|
|
|
| `npm run build` | Vollständiger Production-Build |
|
|
| `npm run build:tailwind` | Nur Tailwind CSS kompilieren |
|
|
| `npm run build:css` | Alias für build:tailwind |
|
|
| `npm run build:js` | JavaScript minifizieren |
|
|
| `npm run watch` | Watch-Modus für Entwicklung |
|
|
| `npm run dev` | Entwicklungsmodus starten |
|
|
| `npm run clean` | Build-Artefakte löschen |
|
|
| `npm run optimize` | Build + Komprimierung |
|
|
| `npm run compress` | Assets mit gzip komprimieren |
|
|
| `npm run analyze` | CSS-Analyse und Debug-Output |
|
|
|
|
---
|
|
|
|
## 📁 **Dateistruktur**
|
|
|
|
```
|
|
backend/
|
|
├── package.json # Node.js Dependencies
|
|
├── tailwind.config.js # Tailwind CSS Konfiguration
|
|
├── postcss.config.js # PostCSS Setup
|
|
├── scripts/
|
|
│ └── compress-assets.js # Asset-Komprimierung
|
|
├── static/
|
|
│ ├── css/
|
|
│ │ ├── input.css # Tailwind Source
|
|
│ │ ├── tailwind.min.css # Kompilierte Ausgabe
|
|
│ │ └── *.css.gz # Komprimierte Versionen
|
|
│ └── js/
|
|
│ ├── *.js # JavaScript Source
|
|
│ └── *.min.js # Minifizierte Versionen
|
|
└── templates/ # HTML Templates
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 **Tailwind CSS Konfiguration**
|
|
|
|
### **Mercedes-Benz Design System**
|
|
|
|
Das Build-System enthält vordefinierte Mercedes-Benz Farben und Komponenten:
|
|
|
|
```css
|
|
/* Verfügbare CSS-Klassen */
|
|
.btn-mercedes /* Mercedes-Benz Button */
|
|
.mercedes-form-input /* Formulareingaben */
|
|
.dashboard-card /* Dashboard-Karten */
|
|
.glassmorphism /* Glassmorphism-Effekt */
|
|
```
|
|
|
|
### **Custom Farben**
|
|
|
|
```css
|
|
/* Mercedes-Benz Corporate Colors */
|
|
bg-mercedes-black /* #000000 */
|
|
bg-mercedes-blue /* #0073ce */
|
|
bg-mercedes-silver /* #aaa9ad */
|
|
bg-mercedes-gray /* #5e5e5e */
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 **Air-Gapped Setup**
|
|
|
|
### **Schritt 1: Online-Vorbereitung**
|
|
|
|
Auf einem System **mit Internet**:
|
|
|
|
```bash
|
|
# 1. Repository klonen
|
|
git clone <repository-url>
|
|
cd backend
|
|
|
|
# 2. Dependencies installieren
|
|
npm install
|
|
|
|
# 3. Initialen Build erstellen
|
|
npm run build
|
|
|
|
# 4. node_modules packen für Offline-Transfer
|
|
tar -czf node_modules_backup.tar.gz node_modules/
|
|
```
|
|
|
|
### **Schritt 2: Offline-Installation**
|
|
|
|
Auf dem **air-gapped System**:
|
|
|
|
```bash
|
|
# 1. Repository-Dateien übertragen
|
|
# 2. node_modules entpacken
|
|
tar -xzf node_modules_backup.tar.gz
|
|
|
|
# 3. Lokale Installation versuchen
|
|
npm run install:air-gapped
|
|
|
|
# 4. Build ausführen
|
|
npm run build
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 **Performance-Optimierung**
|
|
|
|
### **Asset-Komprimierung**
|
|
|
|
```bash
|
|
# Komprimiert alle CSS/JS-Dateien mit gzip
|
|
npm run compress
|
|
```
|
|
|
|
**Ergebnis:**
|
|
- `tailwind.min.css` (221KB) → `tailwind.min.css.gz` (28KB)
|
|
- Typische Einsparung: **70-85%**
|
|
|
|
### **Production-Build**
|
|
|
|
```bash
|
|
# Für Production-Deployment
|
|
NODE_ENV=production npm run build
|
|
```
|
|
|
|
**Optimierungen:**
|
|
- CSS Purging (entfernt ungenutzte Klassen)
|
|
- Minimierung und Komprimierung
|
|
- Autoprefixer für Browser-Kompatibilität
|
|
- Critical CSS Extraction
|
|
|
|
---
|
|
|
|
## 🚨 **Troubleshooting**
|
|
|
|
### **Problem: npm install schlägt fehl**
|
|
|
|
```bash
|
|
# Lösung 1: Cache leeren
|
|
npm cache clean --force
|
|
|
|
# Lösung 2: Offline-Modus verwenden
|
|
npm install --offline --no-optional
|
|
|
|
# Lösung 3: Registry auf lokal setzen
|
|
npm config set registry http://localhost:4873
|
|
```
|
|
|
|
### **Problem: Tailwind CSS wird nicht kompiliert**
|
|
|
|
```bash
|
|
# 1. Input-Datei prüfen
|
|
ls -la static/css/input.css
|
|
|
|
# 2. Tailwind Config validieren
|
|
npx tailwindcss --help
|
|
|
|
# 3. Manueller Build
|
|
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.min.css --minify
|
|
```
|
|
|
|
### **Problem: Assets werden nicht komprimiert**
|
|
|
|
```bash
|
|
# 1. Node.js Version prüfen
|
|
node --version # Sollte >= 18.0.0 sein
|
|
|
|
# 2. Skript-Berechtigungen setzen
|
|
chmod +x scripts/compress-assets.js
|
|
|
|
# 3. Manuell ausführen
|
|
node scripts/compress-assets.js
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 **Update-Prozess**
|
|
|
|
### **1. Dependencies aktualisieren (mit Internet)**
|
|
|
|
```bash
|
|
# Prüfe auf Updates
|
|
npm outdated
|
|
|
|
# Update alle Dependencies
|
|
npm update
|
|
|
|
# Oder spezifische Pakete
|
|
npm install tailwindcss@latest
|
|
```
|
|
|
|
### **2. Tailwind CSS erweitern**
|
|
|
|
**Neue Komponenten hinzufügen:**
|
|
|
|
```javascript
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
// ...
|
|
plugins: [
|
|
function({ addComponents }) {
|
|
addComponents({
|
|
'.neue-komponente': {
|
|
// CSS-Eigenschaften
|
|
}
|
|
})
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### **3. Custom CSS erweitern**
|
|
|
|
```css
|
|
/* static/css/input.css */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom Styles */
|
|
.meine-klasse {
|
|
/* Eigene CSS-Regeln */
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📈 **Monitoring & Analytics**
|
|
|
|
### **Build-Größe überwachen**
|
|
|
|
```bash
|
|
# CSS-Größe analysieren
|
|
npm run analyze
|
|
|
|
# Detaillierte Bundle-Analyse
|
|
npx bundlesize
|
|
```
|
|
|
|
### **Performance-Metriken**
|
|
|
|
```bash
|
|
# Komprimierungsstatistiken
|
|
npm run compress
|
|
|
|
# Dateigröße vor/nach
|
|
ls -lh static/css/tailwind.min.css*
|
|
```
|
|
|
|
---
|
|
|
|
## 🛡️ **Sicherheit**
|
|
|
|
### **Dependency-Scanning**
|
|
|
|
```bash
|
|
# Security-Audit
|
|
npm audit
|
|
|
|
# Automatische Fixes
|
|
npm audit fix
|
|
```
|
|
|
|
### **Air-Gapped Best Practices**
|
|
|
|
1. **Regelmäßige Updates** der node_modules auf Online-System
|
|
2. **Signatur-Verifizierung** der übertragenen Pakete
|
|
3. **Isolierte Build-Umgebung** verwenden
|
|
4. **Backup** der funktionierenden node_modules
|
|
|
|
---
|
|
|
|
## 📞 **Support**
|
|
|
|
### **Häufige Fragen**
|
|
|
|
**Q: Kann ich das System ohne Node.js verwenden?**
|
|
A: Nein, aber die kompilierten Assets funktionieren ohne Node.js.
|
|
|
|
**Q: Wie oft sollte ich das Build-System aktualisieren?**
|
|
A: Alle 3-6 Monate oder bei kritischen Sicherheitsupdates.
|
|
|
|
**Q: Funktioniert es auf Windows?**
|
|
A: Ja, vollständig Windows-kompatibel.
|
|
|
|
### **Technische Spezifikationen**
|
|
|
|
- **Node.js**: ≥18.0.0
|
|
- **npm**: ≥9.0.0
|
|
- **Tailwind CSS**: 3.4.4
|
|
- **PostCSS**: 8.4.38
|
|
- **Komprimierung**: gzip Level 9
|
|
|
|
---
|
|
|
|
## 🎯 **Nächste Schritte**
|
|
|
|
1. ✅ Führen Sie `npm install` aus
|
|
2. ✅ Testen Sie `npm run build`
|
|
3. ✅ Prüfen Sie die generierten Assets
|
|
4. ✅ Konfigurieren Sie Ihren Webserver für `.gz`-Dateien
|
|
5. ✅ Implementieren Sie das Build-System in Ihren CI/CD-Pipeline
|
|
|
|
---
|
|
|
|
**Mercedes-Benz TBA Marienfelde - Frontend Build System v1.0.0** |