test
This commit is contained in:
@ -1 +1,344 @@
|
||||
|
||||
# 🚀 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**
|
||||
Reference in New Issue
Block a user