You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Before reading this guide, please first read the [Setting Up Environment](./setting-up-env). 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](./glossary).
6
6
7
7
_<Badgetext="Note:"type="info" /> <small>You can also use [Nx](https://nx.dev) to rapidly scaffold Module Federation projects for [React](../../practice/frameworks/react/using-nx-for-react) and [Angular](../../practice/frameworks/angular/using-nx-for-angular).</small>_
8
8
9
-
## Creating a Producer
9
+
## Creating a New Project
10
10
11
-
### 1. Initializing the Project
11
+
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.
12
12
13
-
Use [Rsbuild](https://rsbuild.dev/)to create a producer and call the following command:
13
+
You can use `create-module-federation`to create a Module Federation project by running the following command:
14
14
15
+
<PackageManagerTabs
16
+
command={{
17
+
npm: 'npm create module-federation@latest',
18
+
yarn: 'yarn create module-federation',
19
+
pnpm: 'pnpm create module-federation@latest',
20
+
}}
21
+
/>
22
+
23
+
Just follow the prompts step by step. During the creation process, you can select the project type, role type, etc.
24
+
25
+
### Templates
26
+
27
+
When creating a project, you can choose from the following templates provided by `create-module-federation`:
| provider-modern | A provider using [Modern.js](https://modernjs.dev/)|
32
+
| provider-rsbuild | A provider using [Rsbuild](https://rsbuild.dev/)|
33
+
| provider-rslib | A provider using [Rslib](https://lib.rsbuild.dev/)|
34
+
| provider-rslib-storybook | A provider using [Rslib](https://lib.rsbuild.dev/) with the storybook feature enabled |
35
+
| consumer-modern | A consumer using [Modern.js](https://modernjs.dev/)|
36
+
| consumer-rsbuild | A consumer using [Rsbuild](https://rsbuild.dev/)|
37
+
38
+
### Quick Creation
39
+
40
+
[create-module-federation](https://www.npmjs.com/package/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.
41
+
42
+
For example, to create a Modern.js provider project named `provider` in the `my-project` directory with one click:
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.
73
+
74
+
Here we take creating an rsbuild provider project as an example:
75
+
76
+
```bash
77
+
➜ ~ ✗ npm create module-federation@latest
78
+
79
+
> npx
80
+
> create-module-federation
81
+
82
+
◆ Create Module Federation Project
83
+
│
84
+
◇ Please input Module Federation name:
85
+
│ mf_provider
86
+
│
87
+
◇ Please selectthetype of project you want to create:
88
+
│ Application
89
+
│
90
+
◇ Select template
91
+
│ Rsbuild
92
+
│
93
+
◇ Please selectthe role of project you want to create:
94
+
│ Provider
95
+
│
96
+
◇ Next steps ─────╮
97
+
│ │
98
+
│ cd mf_provider │
99
+
│ npm install │
100
+
│ npm run dev │
101
+
│ │
102
+
├──────────────────╯
103
+
│
104
+
└ Done.
105
+
```
106
+
107
+
### Create a consumer
108
+
109
+
Execute the `create-module-federation` command, selectthe required framework and type according to your needs, and selectthe role type as consumer to create a project.
110
+
111
+
Here is an example of creating an rsbuild consumer project:
112
+
113
+
```bash
114
+
➜ ~ ✗ npm create module-federation@latest
115
+
116
+
> npx
117
+
> create-module-federation
118
+
119
+
◆ Create Module Federation Project
120
+
│
121
+
◇ Please input Module Federation name:
122
+
│ mf_consumer
123
+
│
124
+
◇ Please selectthetype of project you want to create:
125
+
│ Application
126
+
│
127
+
◇ Select template
128
+
│ Rsbuild
129
+
│
130
+
◇ Please selectthe role of project you want to create:
131
+
│ Consumer
132
+
│
133
+
◇ Next steps ─────╮
134
+
│ │
135
+
│ cd mf_provider │
136
+
│ npm install │
137
+
│ npm run dev │
138
+
│ │
139
+
├──────────────────╯
140
+
│
141
+
└ Done.
142
+
```
143
+
144
+
#### Replace provider
145
+
146
+
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`.
147
+
148
+
```diff title="module-federation.config.ts"
149
+
import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
Use [Rsbuild](https://rsbuild.dev/) to create a provider and call the following command:
17
172
18
173
<PackageManagerTabs
19
174
command={{
@@ -33,7 +188,7 @@ import { PackageManagerTabs } from '@theme';
33
188
? Select language -> TypeScript
34
189
```
35
190
36
-
### 2. Installing Module Federation Build Plugin
191
+
#### 2. Installing Module Federation Build Plugin
37
192
38
193
Following the steps above forinitializing the project, we created a `React` project named `federation_provider`. Execute the following commandsin sequence:
39
194
@@ -62,7 +217,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
62
217
}}
63
218
/>
64
219
65
-
### 3. Exporting Modules by the Producer
220
+
#### 3. Exporting Modules by the Producer
66
221
67
222
> Change the entry file to asynchronous
68
223
@@ -118,7 +273,7 @@ export default defineConfig({
118
273
});
119
274
```
120
275
121
-
### 4. Starting the Producer
276
+
#### 4. Starting the Producer
122
277
123
278
<PackageManagerTabs
124
279
command={{
@@ -147,9 +302,9 @@ start Compiling...
147
302
148
303
After the project starts, the `Manifest Link: http://localhost:3000/mf-manifest.json` message appears, which is the manifest information link for Module Federation.
149
304
150
-
## Creating a Consumer
305
+
### Creating a Consumer
151
306
152
-
### 1. Initializing the Project
307
+
#### 1. Initializing the Project
153
308
154
309
Use [Rsbuild](https://rsbuild.dev/) to create a consumer and call the following command:
155
310
@@ -171,7 +326,7 @@ Use [Rsbuild](https://rsbuild.dev/) to create a consumer and call the following
171
326
? Select language -> TypeScript
172
327
```
173
328
174
-
### 2. Installing Module Federation Build Plugin
329
+
#### 2. Installing Module Federation Build Plugin
175
330
176
331
Following the steps above forinitializing the project, we created a `React` project named `federation_consumer`. Execute the following commandsin sequence:
177
332
@@ -201,7 +356,7 @@ bun add @module-federation/rsbuild-plugin --save-dev
201
356
/>
202
357
203
358
204
-
### 3. Consuming the Producer
359
+
#### 3. Consuming the Producer
205
360
206
361
> Declare the `Module Federation`type path in`tsconfig.json`
207
362
@@ -285,7 +440,7 @@ export default App;
285
440
286
441
## Summary
287
442
288
-
Through the above process, you have completed the export of a component from a 'producer' 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.
443
+
Through the above process, you have completed the export of a component from a 'provider'foruse by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and sharedin the Module Federation plugin.
289
444
290
445
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](../basic/rspack), [Webpack Plugin](../basic/webpack)
0 commit comments