Quick Start Guide
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.
Creating a New Project
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:
npm create module-federation@latest
Just follow the prompts step by step. During the creation process, you can select the project type, role type, etc.
Templates
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 |
Quick Creation
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:
npx create-module-federation --dir my-project --template provider-modern --name provider
# Use abbreviations
npx create-module-federation -d my-project -t provider-modern -n provider
The complete CLI options for create-module-federation
are as follows:
Usage: create-module-federation [options]
Options:
-h, --help display help for command
-d, --dir create project in specified directory
-t, --template specify the template to use
-n, --name specify the mf name
-r, --role specify the mf role type: provider or consumer
--override override files in target directory
Templates:
provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
Create a provider
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:
➜ ~ ✗ npm create module-federation@latest
> npx
> create-module-federation
◆ Create Module Federation Project
│
◇ Please input Module Federation name:
│ mf_provider
│
◇ Please select the type of project you want to create:
│ Application
│
◇ Select template
│ Rsbuild
│
◇ Please select the role of project you want to create:
│ Provider
│
◇ Next steps ─────╮
│ │
│ cd mf_provider │
│ npm install │
│ npm run dev │
│ │
├──────────────────╯
│
└ Done.
Create a consumer
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:
➜ ~ ✗ npm create module-federation@latest
> npx
> create-module-federation
◆ Create Module Federation Project
│
◇ Please input Module Federation name:
│ mf_consumer
│
◇ Please select the type of project you want to create:
│ Application
│
◇ Select template
│ Rsbuild
│
◇ Please select the role of project you want to create:
│ Consumer
│
◇ Next steps ─────╮
│ │
│ cd mf_provider │
│ npm install │
│ npm run dev │
│ │
├──────────────────╯
│
└ Done.
Replace provider
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
.
module-federation.config.ts
import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
export default createModuleFederationConfig({
name: 'mf_consumer',
remotes: {
- 'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+ 'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
},
});
Create from existing project
Creating a Producer
1. Initializing the Project
Use Rsbuild to create a provider and call the following command:
npm create rsbuild@latest
Complete the project creation according to the prompts.
? Input target folder -> federation_provider
? Select framework -> React
? Select language -> TypeScript
2. Installing Module Federation Build Plugin
Following the steps above for initializing the project, we created a React
project named federation_provider
. Execute the following commands in sequence:
cd federation_provider
npm add @module-federation/enhanced
npm add @module-federation/rsbuild-plugin --save-dev
3. Exporting Modules by the Producer
Change the entry file to asynchronous
// Move src/index.tsx to a newly created src/bootstrap.tsx file
// src/index.tsx
import('./bootstrap');
// src/bootstrap.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
Add a Button Component
// src/button.tsx
export default function Button() {
return <div>Provider button</div>;
}
Export the Button component through Module Federation
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default defineConfig({
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'federation_provider',
exposes: {
'./button': './src/button.tsx',
},
shared: ['react', 'react-dom'],
}),
],
server: {
port: 3000,
},
});
4. Starting the Producer
➜ federation_provider npm run dev
> federation_provider@1.0.0 dev
> rsbuild dev --open
Rsbuild v0.5.1
> Local: http://localhost:3000/
> Network: http://10.94.55.204:3000/
> Network: http://10.4.255.21:3000/
start Compiling...
[ Module Federation Manifest Plugin ] Manifest Link: http://localhost:3000/mf-manifest.json
After the project starts, the Manifest Link: http://localhost:3000/mf-manifest.json
message appears, which is the manifest information link for Module Federation.
Creating a Consumer
1. Initializing the Project
Use Rsbuild to create a consumer and call the following command:
npm create rsbuild@latest
Complete the project creation according to the prompts.
? Input target folder -> federation_consumer
? Select framework -> React
? Select language -> TypeScript
2. Installing Module Federation Build Plugin
Following the steps above for initializing the project, we created a React
project named federation_consumer
. Execute the following commands in sequence:
cd federation_consumer
npm add @module-federation/enhanced
npm add @module-federation/rsbuild-plugin --save-dev
3. Consuming the Producer
Declare the Module Federation
type path in tsconfig.json
{
"compilerOptions": {
"paths":{
"*": ["./@mf-types/*"]
}
}
}
Add Module Federation plugin to consume remote modules
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default defineConfig({
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'federation_consumer',
remotes: {
federation_provider:
'federation_provider@http://localhost:3000/mf-manifest.json',
},
shared: ['react', 'react-dom'],
}),
],
server: {
port: 2000,
},
});
Change the entry to be asynchronous
// Move src/index.tsx to a newly created src/bootstrap.tsx file
// src/index.tsx
import('./bootstrap');
// src/bootstrap.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
Reference the remote module
import './App.css';
// The remote component provided by federation_provider
import ProviderButton from 'federation_provider/button';
const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p>
<div>
<ProviderButton />
</div>
</div>
);
};
export default App;
Summary
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
Next Steps
You may want to:
Follow Us