Before reading this guide, please first read the Setting Up Environment. This guide will lead you step by step to learn how to use Module Federation. We will build two independent Single Page Applications (SPAs) that will share components using Module Federation. If you encounter unfamiliar terms in the following text, please refer to the Glossary.
Note: You can also use Nx to rapidly scaffold Module Federation projects for React and Angular.
Module Federation provides the create-module-federation
tool to create projects. You don't need to install it globally; you can directly use npx
to run it on-demand.
You can use create-module-federation
to create a Module Federation project by running the following command:
Just follow the prompts step by step. During the creation process, you can select the project type, role type, etc.
When creating a project, you can choose from the following templates provided by create-module-federation
:
Template | Description |
---|---|
provider-modern | A provider using Modern.js |
provider-rsbuild | A provider using Rsbuild |
provider-rslib | A provider using Rslib |
provider-rslib-storybook | A provider using Rslib with the storybook feature enabled |
consumer-modern | A consumer using Modern.js |
consumer-rsbuild | A consumer using Rsbuild |
create-module-federation provides some CLI options. By setting these CLI options, you can skip the interactive selection steps and create a project with one click.
For example, to create a Modern.js provider project named provider
in the my-project
directory with one click:
The complete CLI options for create-module-federation
are as follows:
Execute the create-module-federation
command, select the required framework and type according to your needs, and select the role type as provider to create a project.
Here we take creating an rsbuild provider project as an example:
Execute the create-module-federation
command, select the required framework and type according to your needs, and select the role type as consumer to create a project.
Here is an example of creating an rsbuild consumer project:
The default consumer project created will consume a published provider. If you want to replace the provider, you need to modify the remotes
configuration in module-federation.config.ts
.
If you want to integrate Module Federation
into an existing project, you can refer to docs.
Through the above process, you have completed the export of a component from a 'provider' for use by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and shared in the Module Federation plugin.
If you wish to learn how to directly export and consume remote modules on Webpack and Rspack build tools, you can refer to: Rspack Plugin, Webpack Plugin
You may want to:
Feature Navigation
Learn about all the features provided by Module Federation
Review Configuration
Learn how to configure Module Federation
Glossary of Terms
Understand the concepts related to Module Federation