Lokaler Entwicklungsworkflow

Dieser Guide beschreibt den empfohlenen Workflow für die Entwicklung im xPulse-Ecosystem.

1. Voraussetzungen

• Node.js (v16+)
• Das Monorepo ist ausgecheckt.
• Wir nutzen das @xpulse/dev Kit für die Synchronisation und Orchestrierung.

2. Der Sync-Mechanismus (Dev-Kit)

Änderungen in components/* müssen in die node_modules der Test-Apps gespiegelt werden. Dies übernimmt das @xpulse/dev Paket automatisch.

Automatischer Sync & Watch

Wenn du eine App über das Dev-Kit startest, werden alle Komponenten automatisch überwacht und bei Änderungen synchronisiert:

1
cd dev-apps/meine-app
2
npm run dev

Dies führt intern npx xpulse dev:start aus, was:

1. Den initialen Sync aller Komponenten durchführt.
2. Einen Watcher auf components/ startet.
3. Die App im Development-Modus mit SSE-Live-Reload startet.

3. Development Modus (Live-Reload)

Wenn die App mit NODE_ENV=development gestartet wird, aktiviert @xpulse/app automatisch zusätzliche Features:

1. Template-Cache Clearing: Bei jedem Neustart wird der Cache von @xpulse/template geleert (über das Dev-Kit gesteuert).
2. Watcher: Überwacht src/, xpulse.json und src/templates/ (Node.js --watch) sowie das Framework (dev:start).
3. SSE-Live-Reload:
   • Der Server öffnet einen SSE-Endpoint /xpulse-watch.
   • In jede HTML-Antwort wird automatisch ein kleines Script injiziert.
   • Sobald der Server neu startet (durch den Watcher), erkennt der Browser den Verbindungsabbruch und lädt die Seite automatisch neu, sobald der Server wieder erreichbar ist.

Starten im Dev-Modus

1
cd dev-apps/meine-app
2
# Nutzt das in der package.json definierte 'dev' script (via @xpulse/dev)
3
npm run dev

Oder manuell:

1
NODE_ENV=development node --watch src --watch xpulse.json --watch src/templates src/index.js

4. Workflow-Beispiel: Eine Komponente ändern

1. Ändere Code in components/xpulse-http/src/server.js.
2. Das Dev-Kit (dev:start) erkennt die Änderung sofort.
3. Die Datei wird nach dev-apps/meine-app/node_modules/@xpulse/http/src/server.js kopiert.
4. Der App-Watcher bemerkt den Dateiwandel in node_modules (da das Dev-Kit dies triggert) und startet die App neu.
5. Der Browser lädt via SSE automatisch neu.

5. Tipps

• Logs: Nutze DEBUG=true für detailliertere Ausgaben beim Bootstrapping.
• Cache: Falls Templates nicht aktualisiert werden, prüfe ob NODE_ENV=development gesetzt ist.