CONCEPT Cited by 1 source

Module Federation host / remote topology

Definition

Host / remote is the runtime bundle topology introduced by Webpack Module Federation:

• A host is a bundle (typically the application shell) that consumes modules from one or more remotes. At build time, it declares the remote names and URLs; at runtime, it fetches each remote's entry file (conventionally RemoteEntry.js) and dynamically imports the remote's exposed modules.
• A remote is an independently built bundle that exposes specific modules (components, routes, utilities) via an exposes: { "./Key": "./src/Impl" } declaration. It publishes a RemoteEntry.js manifest that lists its exposed modules and the versions of the libraries it expects to share.
• A bundle can be bidirectional — a host to its remotes and a remote to some higher-level host.

The topology is not a static dependency graph: the host only needs the remote's URL at build time; the actual module code is fetched over the network when the host dynamically imports an exposed key.

Why this shape

The host / remote split is what gives Module Federation its characteristic property — runtime code sharing without host rebuilds:

• Independent deploys. A remote can ship a new version by updating its own RemoteEntry.js at its URL. The host picks up the change on the next page load. No host rebuild, no shared-npm-package republish, no coordinated release.
• Shared dependency resolution. Both host and remote declare shared libraries. At runtime, Webpack's federation runtime reconciles the advertised versions and loads each shared library once (see concepts/shared-singleton-dependency).
• Per-team bundle URLs. The host's remotes map is the discovery contract — a mapping from remote name to URL. A higher-level layer often externalises this (see patterns/manifest-driven-micro-frontend-loading).

Canonical configuration shape

// Host
new ModuleFederationPlugin({
  name: "shell",
  remotes: { lastMile: "lastMile@/last-mile/remoteEntry.js" },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});

// Remote
new ModuleFederationPlugin({
  name: "lastMile",
  filename: "remoteEntry.js",
  exposes: { "./App": "./src/App" },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});

The host declares what to load (remotes) and what to share (shared). The remote declares what to expose (exposes) and what it expects to share — the two shared declarations must be compatible or federation falls back to loading duplicate versions, which is usually what you do not want for React.

Seen in

• sources/2024-10-16-zalando-building-a-modular-portal-with-webpack-module-federation — Zalando's Logistics Portal is a Module-Federation host loading 11 remotes (one per team application) at runtime, with shared React / React-DOM as singletons. The remotes' URLs are not hardcoded in the host; the /applications endpoint returns a permission-scoped list of apps, each pointing to a manifest.json that carries the bundlePath to the remote's RemoteEntry.js — a manifest-driven layer on top of Module Federation's host/remote topology.

Related

• systems/webpack-module-federation — the bundler feature implementing this topology.
• concepts/runtime-code-sharing — the distinguishing property of host/remote vs. static linking.
• concepts/shared-singleton-dependency — the singleton: true semantic that keeps shared libraries sane across host + remotes.
• concepts/micro-frontends — the architecture class that most commonly uses this topology.
• patterns/manifest-driven-micro-frontend-loading — discovery layer above the host/remote map.
• patterns/host-shell-prop-api-for-remotes — communication contract between host and remote.
• systems/zalando-logistics-portal — canonical wiki deployment.