01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Member-only story

How to Use Webpack Module Federation in

React
Build micro-frontend architectures with ease

Oskari Rautiainen · Follow

Published in Better Programming
5 min read · Jun 17, 2022

Listen Share More

Photo by Valery Fedotov on Unsplash

Module Federation is an excellent tool for constructing a micro-frontend

architecture in React applications. I will show you how to use it in a step-by-step
guide to building a Host-Remote pattern micro-frontend in React.

Why a Micro Frontend?

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 1/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Micro-frontends help us break large frontend applications into smaller independent

applications or modules that can be built and deployed at their cadence.

Doing this using Module Federation allows us to combine the applications at run
time in the client’s browsers and eliminate build-time dependencies and
coordination, allowing the teams building these applications to develop at scale.

Getting started
You can follow along with the final code found here: https://github.com/rautio/react-
micro-frontend-example

We are building two applications: host and remote .

The host app is the “main” app and remote is a sub-app plugging into it.

Module Federation does support treating the host as a remote and making the
architecture peer-to-peer if it fits your use case. More on this later.

We’re going to use create-react-app to simplify the initial steps.

In your root directory:

npx create-react-app host

npx create-react-app remote

This will create two apps for you:

host/

remote/

Dependencies
Within each host/ and remote/ run:

npm install --save-dev webpack webpack-cli html-webpack-plugin

webpack-dev-server babel-loader

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 2/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

This will install wepback and the dependencies we need for our webpack
configuration. Open in app

Search is only available in version 5 and above of webpack.

Webpack Module Federation

Host App
We are going to start with our webpack configuration

Create a new webpack.config.js file at the root of host/ :

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 3/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 // host/webpack.config.js
2 const HtmlWebpackPlugin = require("html-webpack-plugin");
3
4 module.exports = {
5 entry: "./src/index",
6 mode: "development",
7 devServer: {
8 port: 3000,
9 },
10 module: {
11 rules: [
12 {
13 test: /\.(js|jsx)?$/,
14 exclude: /node_modules/,
15 use: [
16 {
17 loader: "babel-loader",
18 options: {
19 presets: ["@babel/preset-env", "@babel/preset-react"],
20 },
21 },
22 ],
23 },
24 ],
25 },
26 plugins: [
27 new HtmlWebpackPlugin({
28 template: "./public/index.html",
29 }),
30 ],
31 resolve: {
32 extensions: [".js", ".jsx"],
33 },
34 target: "web",
35 };

host.webpack.config.js hosted with ❤ by GitHub view raw

This is a basic webpack example to get our js and jsx code transpiled using babel-

loader and injected into an html template.

Update package.json scripts

Next, we need a new start script that utilizes our webpack config:

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 4/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 "scripts":{
2 "start": "webpack serve"
3 }

react-mf-host-package.json hosted with ❤ by GitHub view raw

Now we can get to the meat of the host app.

index.js
First, we need the index.js entry to our app. We are importing another file
bootstrap.js that renders the React app.

We need this extra layer of indirection because it gives Webpack a chance to load all
of the imports it needs to render the remote app.

Otherwise, you would see an error along the lines of:

Shared module is not available for eager consumption

1 // host/src/index.js
2 import("./bootstrap");
3
4 // Note: It is important to import bootstrap dynamically using import() otherwise you wi

host-index.js hosted with ❤ by GitHub view raw

bootstrap.js
Next, we define the bootstrap.js file that renders our React application.

1 // host/src/bootstrap.js
2 import React from "react";
3 import ReactDOM from "react-dom/client";
4 import App from "./App";
5
6 const root = ReactDOM.createRoot(document.getElementById("root"));
7 root.render(
8 <React.StrictMode>
9 <App />
10 </React.StrictMode>
11 );

host-bootstrap.js hosted with ❤ by GitHub view raw

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 5/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

App.js
Now we are ready to write our App.js file where the app’s main logic happens. Here
we will load two components from remote which we will define later.

import("Remote/App") will dynamically fetch the Remote app’s App.js React

component.

We need to use a lazy loader and an ErrorBoundary component to create a smooth

experience for users in case the fetching takes a long time or introduces errors in
our host app.

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 6/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 // host/src/App.js
2 import React from "react";
3 import ErrorBoundary from "./ErrorBoundary";
4 const RemoteApp = React.lazy(() => import("Remote/App"));
5 const RemoteButton = React.lazy(() => import("Remote/Button"));
6
7 const RemoteWrapper = ({ children }) => (
8 <div
9 style={{
10 border: "1px solid red",
11 background: "white",
12 }}
13 >
14 <ErrorBoundary>{children}</ErrorBoundary>
15 </div>
16 );
17
18 export const App = () => (
19 <div style={{ background: "rgba(43, 192, 219, 0.3)" }}>
20 <h1>This is the Host!</h1>
21 <h2>Remote App:</h2>
22 <RemoteWrapper>
23 <RemoteApp />
24 </RemoteWrapper>
25 <h2>Remote Button:</h2>
26 <RemoteWrapper>
27 <RemoteButton />
28 </RemoteWrapper>
29 <br />
30 <a href="http://localhost:4000">Link to Remote App</a>
31 </div>
32 );
33 export default App;

host-src-app.js hosted with ❤ by GitHub view raw

Add Module Federation

We’re not ready to run the app just yet. Next, we need to add Module Federation to
tell our host where to get the Remote/App and Remote/Button components.

In our webpack.config.js we introduce the ModuleFederationPlugin :

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 7/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 // host/webpack.config.js
2 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 const { dependencies } = require("./package.json");
4
5 module.exports = {
6 //...
7 plugins: [
8 new ModuleFederationPlugin({
9 name: "Host",
10 remotes: {
11 Remote: `Remote@http://localhost:4000/moduleEntry.js`,
12 },
13 shared: {
14 ...dependencies,
15 react: {
16 singleton: true,
17 requiredVersion: dependencies["react"],
18 },
19 "react-dom": {
20 singleton: true,
21 requiredVersion: dependencies["react-dom"],
22 },
23 },
24 }),
25 //...
26 ],
27 //...
28 };

host-module-federation.webpack.config.js hosted with ❤ by GitHub view raw

Important things to note:

name is used to distinguish the modules. It is not as important here because we

are not exposing anything, but it is vital in the Remote app.

remotes is where we define the federated modules we want to consume in this

app. You’ll notice we specify Remote as the internal name so we can load the
components using import("Remote/<component>") . But we also define the location
where the remote’s module definition is hosted:
Remote@http://localhost:4000/moduleEntry.js . This URL tells us three important
things. The module’s name is Remote , it is hosted on localhost:4000 , and its
module definition is moduleEntry.js .

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 8/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

shared is how we share dependencies between modules. This is very important

for React because it has a global state, meaning you should only ever run one
instance of React and ReactDOM in any given app. To achieve this in our
architecture, we are telling webpack to treat React and ReactDOM as singletons,
so the first version loaded from any modules is used for the entire app. As long
as it satisfies the requiredVersion we define. We are also importing all of our
other dependencies from package.json and including them here, so we
minimize the number of duplicate dependencies between our modules.

Now, if we run npm start in the host app we should see something like:

This means our host app is configured, but our remote app is not exposing anything
yet. So we need to configure that next.

Remote App
Let’s start with the webpack config. Since we now have some knowledge of Module
Federation, let’s use it from the get-go:

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 9/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 // remote/webpack.config.js
2 const HtmlWebpackPlugin = require("html-webpack-plugin");
3 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
4 const path = require("path");
5 const { dependencies } = require("./package.json");
6
7 module.exports = {
8 entry: "./src/index",
9 mode: "development",
10 devServer: {
11 static: {
12 directory: path.join(__dirname, "public"),
13 },
14 port: 4000,
15 },
16 module: {
17 rules: [
18 {
19 test: /\.(js|jsx)?$/,
20 exclude: /node_modules/,
21 use: [
22 {
23 loader: "babel-loader",
24 options: {
25 presets: ["@babel/preset-env", "@babel/preset-react"],
26 },
27 },
28 ],
29 },
30 ],
31 },
32 plugins: [
33 new ModuleFederationPlugin({
34 name: "Remote",
35 filename: "moduleEntry.js",
36 exposes: {
37 "./App": "./src/App",
38 "./Button": "./src/Button",
39 },
40 shared: {
41 ...dependencies,
42 react: {
43 singleton: true,
44 requiredVersion: dependencies["react"],
45 },
46 "react-dom": {
47 singleton: true,
48 requiredVersion: dependencies["react-dom"],
https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 10/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming
48 requiredVersion: dependencies[ react dom ],
49 },
50 },
51 }),
52 new HtmlWebpackPlugin({
53 template: "./public/index.html",
54 }),
55 ],
56 resolve: {
57 extensions: [".js", ".jsx"],
58 },
59 target: "web",
60 };

remote webpack config js hosted with ❤ by GitHub view raw

The important things to note are:

Our webpack dev server runs at localhost:4000

The remote module’s name is Remote

The filename is moduleEntry.js

Combining these will allow our host to find the remote code at
Remote@http://localhost:4000/moduleEntry.js

exposes is where we define the code we want to share in the moduleEntry.js file.
Here we are exposing two: <App /> and <Button /> .

Now let’s set up those components and our Remote app so it can run independently.

index.js
Similar to the host app, we need a dynamic import in our webpack entry.

1 // /remote/src/index.js
2 import("./bootstrap");

remote.index.js hosted with ❤ by GitHub view raw

bootstrap.js

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 11/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

1 // remote/src/bootstrap.js
2 import React from "react";
3 import ReactDOM from "react-dom/client";
4 import App from "./App";
5
6 const root = ReactDOM.createRoot(document.getElementById("root"));
7 root.render(
8 <React.StrictMode>
9 <App />
10 </React.StrictMode>
11 );

remote.bootstrap.js hosted with ❤ by GitHub view raw

App.js
The Remote app is much simpler than the Host:

1 // remote/src/App.js
2 import React from "react";
3
4 export const App = () => {
5 return <div>Hello from the other side</div>;
6 };
7 export default App;

remote.app.js hosted with ❤ by GitHub view raw

Button.js
And we also want to expose a <Button /> component

1 // remote/src/Button.js
2 import React from "react";
3
4 export const Button = () => <button>Hello!</button>;
5
6 export default Button;

remote.button.js hosted with ❤ by GitHub view raw

Now the Remote app is fully configured, and if you run npm start you should see a
blank page with “Hello from the other side.”

Putting it all together

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 12/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Now if we run npm start in both the host/ and remote/ directories, we should see
the Host app running on localhost:3000 and the remote app running on
localhost:4000 .

The host app would look something like this:

Congratulations! You’ve now configured a Micro Frontend app using React.

Development
You can simplify the development flow by configuring yarn workspaces at the root
level: https://classic.yarnpkg.com/lang/en/docs/workspaces/

Deployment
We only covered running the Micro Frontend locally. If you want to deploy them,
you would deploy each app separately to their CDN or hosting service and configure
the webpack definitions to use environment variables or some other way to update
the URLs in the ModuleFederationPlugin definitions.

You can find an example of this in my more advanced example app:

https://github.com/rautio/micro-frontend-demo

If you enjoyed this article, please follow me on Medium for more stories about
micro frontends and Webpack Module Federation.

Resources
https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 13/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Code for this example:

GitHub - rautio/react-micro-frontend-example: Simple example

of using React in a micro-frontend…
Example of using React in host-remote micro-frontend pattern with
Webpack Module Federation Run the following commands…
github.com

A more advanced example:

GitHub - rautio/micro-frontend-demo: Demo repo for

showcasing a micro frontend architecture
A sample repo for demoing a micro frontend architecture setup.
Main Host App: http://localhost:9001/ Products Remote…
github.com

React Micro Frontends Webpack JavaScript Programming

Follow

Written by Oskari Rautiainen

476 Followers · Writer for Better Programming

UI Architect focused on web development and data problems. Building products and sharing as I learn in the
process. https://oskari.io/

More from Oskari Rautiainen and Better Programming

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 14/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Oskari Rautiainen in Better Programming

Zustand in a Micro Frontend

State management made simple

Jun 3, 2022 183 1

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 15/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Benoit Ruiz in Better Programming

Advice From a Software Engineer With 8 Years of Experience

Practical tips for those who want to advance in their careers

Mar 20, 2023 17.3K 304

Emily Dresner in Better Programming

Why an Engineering Manager Should Not Review Code

When discussing team organization, I am often asked: “Why don’t you have the tech lead
manage the team?” My response is to hiss like a…

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 16/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

May 11, 2023 4.5K 50

Oskari Rautiainen in Better Programming

4 Ways to Use Dynamic Remotes in Module Federation

How you can configure URLs for your federated remote modules dynamically.

Jul 11, 2022 219

See all from Oskari Rautiainen

See all from Better Programming

Recommended from Medium

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 17/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

François Roget

How to build a dynamic micro-frontend architecture in React?

First of all, what is this Micro-frontend thing?

Feb 24

Lester Sconyers

Dynamic Module Federation with Vite

There are several scenarios where dynamic module federation would be helpful like A/B
Testing. Let’s build a React app that does just that.

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 18/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

May 14 56 2

Lists

General Coding Knowledge

20 stories · 1436 saves

Stories to Help You Grow as a Software Developer

19 stories · 1238 saves

Coding & Development

11 stories · 718 saves

ChatGPT
21 stories · 738 saves

Nitsan Cohen in Bits and Pieces

How To Share States Between React Micro-Frontends using Module-

Federation?
Share states between React Micro-Frontends using Module-Federation and Bit!

Dec 1, 2023 875 6

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 19/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Anahit Vardevanyan in Octa Labs Insights

Reduce Ant Design Bundle Size Multiple Times

Large bundle sizes can lead to slower page load times and decreased performance, impacting
user experience. To fix this problem, we suggest…

Mar 27 28

Ekinzdaviz

Implementing Micro Frontends in React

Introduction

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 20/21
01/08/2024, 09:46 How to Use Webpack Module Federation in React | by Oskari Rautiainen | Better Programming

Mar 29

Akhshy Ganesh

Create a React, MFE webpack Module Federation

Hi, welcome to this DIY project,

Jun 14

See more recommendations

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0 21/21