Development CLI

Mit dem @dvag/mfe-portal CLI können MFEs lokal entwickelt und im Portal-Kontext getestet werden.

Installation

Das CLI kann direkt über npx genutzt werden, ohne vorherige Installation:

npx @dvag/mfe-portal <command>

Oder global installieren:

npm install -g @dvag/mfe-portal --registry https://npm.pkg.github.com

Befehl: `preview`

Findet alle mfe-manifest.json-Dateien im aktuellen Projekt, validiert und aggregiert sie, und stellt das Ergebnis über einen lokalen Server bereit. Das gehostete MFE Portal kann diese Daten live anzeigen.

npx @dvag/mfe-portal preview

Optionen

Flag	Beschreibung	Default
`--port <number>`	Port für den Preview-Server	`9999`
`--dev <mfeId>`	Dev-Mode für ein bestimmtes MFE aktivieren	—
`--wc <url>`	Lokale WebComponent-URL (mit `--dev`)	—
`--iframe <url>`	Lokale iFrame-URL (mit `--dev`)	—

Anwendungsfall 1: Manifest-Vorschau

Prüfe, wie dein Manifest im Portal-Katalog dargestellt wird:

npx @dvag/mfe-portal preview

Öffne dann: https://mfe-portal.entwicklung.dvag/preview

Der Preview-Server läuft auf localhost:9999 und stellt die aggregierten Manifest-Daten unter GET /api/manifests bereit. Das Portal lädt diese Daten automatisch, solange der Server läuft.

Anwendungsfall 2: Lokale Entwicklung

Teste dein MFE lokal mit voller Bridge-Unterstützung:

# 1. Dev-Server starten (z.B. Angular, Vite, etc.)
ng serve

# 2. Preview mit Dev-Mode starten
npx @dvag/mfe-portal preview \
  --dev ausgaben \
  --wc http://localhost:4200/bundle.js \
  --iframe http://localhost:4200/

Der --dev-Flag injiziert ein "local" Environment für das angegebene MFE und ersetzt dessen URLs durch die lokal angegebenen Werte. Mindestens --wc oder --iframe muss angegeben werden.

Der CLI-Output zeigt den direkten Link zur Interactive-Ansicht des MFEs.

Funktionsweise des Preview-Servers