0Pricing
Micro Frontends Architecture with Module Federation · Lektion

Ihre föderierte App lokal ausführen und debuggen

Lernen Sie, Host- und Remote-Apps gemeinsam zu starten, föderierte Module im Browser zu untersuchen und typische Probleme während der lokalen Entwicklung zu debuggen.

Ihre föderierte App lokal ausführen und debuggen ist eine kostenlose Micro Frontends Architecture with Module Federation-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Micro Frontends Architecture with Module Federation-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Local Development Setup

A federated app is really several apps. To develop, you run each remote and the host at the same time, each on its own port.

Assigning Ports

Give every app a fixed dev-server port so the host can reliably reference each remote during development.

devServer: { port: 3001 } // remote
devServer: { port: 3000 } // host

Running Everything at Once

Manually opening many terminals is tedious. A tool like concurrently starts all dev servers with one command.

"scripts": {
  "dev": "concurrently \"npm:dev:host\" \"npm:dev:remote\""
}

Pointing the Host at Remotes

During development the host references each remote by its dev-server URL plus the exposed entry file.

remotes: {
  cart: "cart@http://localhost:3001/remoteEntry.js"
}

Inspecting remoteEntry.js

Every remote exposes a remoteEntry.js manifest. Open it directly in the browser to confirm the remote is running and to see what modules it exposes.

Using Browser DevTools

In the Network tab, watch for remoteEntry.js and the exposed module chunks loading. A 404 here is the most common federation error.

Common Error: Module Not Found

The error Cannot find module cart/Widget usually means the exposed path in the remote config does not match what the host imports. Names must match exactly.

exposes: { "./Widget": "./src/Widget" } // remote
import Widget from "cart/Widget";       // host

Common Error: Shared React Twice

If React hooks throw Invalid hook call, two React copies are loading. Confirm singleton: true on React in every app config.

Hot Reload Limitations

Changes inside a remote may not hot-reload in the host automatically. Refresh the host, or restart the remote dev server, after editing exposed modules.

Logging Federation Resolution

Set verbose webpack stats or add console logs in your bootstrap to confirm which remote and shared versions resolved at run time.

console.log("loading remote cart...");
import("cart/Widget").then(m => mount(m.default));

A Local Debug Checklist

When something breaks, check in order:

  • Are all dev servers running?
  • Does remoteEntry.js load (no 404)?
  • Do exposed names match imports?
  • Is React a singleton everywhere?

Quick Check

Test your local debugging knowledge.

Recap

You learned to run and debug federated apps locally:

  • Run host and remotes together on fixed ports
  • Use concurrently for one-command startup
  • Inspect remoteEntry.js and the Network tab
  • Fix module-not-found and double-React errors
  • Follow a quick debug checklist

Smooth local debugging speeds up MFE development.

Häufig gestellte Fragen

Ist die Lektion „Ihre föderierte App lokal ausführen und debuggen“ kostenlos?

Ja — der vollständige Text von „Ihre föderierte App lokal ausführen und debuggen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Micro Frontends Architecture with Module Federation-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ihre föderierte App lokal ausführen und debuggen“?

Lernen Sie, Host- und Remote-Apps gemeinsam zu starten, föderierte Module im Browser zu untersuchen und typische Probleme während der lokalen Entwicklung zu debuggen. Du übst Micro Frontends Architecture with Module Federation mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Micro Frontends Architecture with Module Federation zu starten?

Keine Vorkenntnisse erforderlich. Micro Frontends Architecture with Module Federation auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Ihre föderierte App lokal ausführen und debuggen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Micro Frontends Architecture with Module Federation-Lektion Code schreiben und ausführen?

Ja. Jede Micro Frontends Architecture with Module Federation-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Projekteinrichtung und Konfiguration
  2. Module und Komponenten gemeinsam nutzen
  3. Eine einfache föderierte App entwickeln
  4. Ihre föderierte App lokal ausführen und debuggen
← Zurück zu Micro Frontends Architecture with Module Federation