React
Harmony
NodeJS
Angular
VueA module federation solution requires at least two components: a host and a remote. Both are app components, as they are deployed and consumed in runtime.
This tutorial assumes prior knowledge of module federation and its concepts. If you are new to module federation, we recommend reading the official documentation.
Run the following to fork a host React app:
Run the following to make your host app loadable by your workspace:
Run the following to run your host app locally:
To learn how to deploy your app, see app deployment.
The host app uses a webpack transformer to add a module federation plugin to the app's default webpack config.
This plugin is configured with a single remote, and with a few shared dependencies.
Run the following to fork the host webpack transformer:
The host app component uses a custom React env to support component previewing. This env uses the same webpack transformer that's used for the app's production bundle.
Run the following to fork the host env:
Run the following to fork a remote React app:
Run the following to make your remote app loadable by your workspace:
Run the following to run your remote app locally:
The host app uses a webpack transformer to add a module federation plugin to the app's default webpack config.
This plugin is configured to expose a module, and is set with a few shared dependencies.
Run the following to fork the remote webpack transformer:
