Configuring Host and Remote React Apps
Set up exposes, remotes, and shared dependencies in webpack.config.js for a host shell and two React remotes.
Remote webpack.config.js: ModuleFederationPlugin
The remote application adds ModuleFederationPlugin to its webpack config with three key properties: name (unique identifier, e.g., "buttonApp"), filename ("remoteEntry.js" — the manifest output), and exposes (a map from public name to source file path).
Exposing Components from the Remote
The exposes configuration maps a public module path to a local file: { './Button': './src/Button' }. This means the host can import 'buttonApp/Button' and receive the component from ./src/Button.tsx. You can expose multiple components, utilities, or even entire pages.
All lessons in this course
- Module Federation: Dynamic Runtime Imports
- Configuring Host and Remote React Apps
- Sharing State and Routing Between Remotes
- Versioning, Deployment, and Orchestration