Build micro-frontend architectures with ease
Module Federation is a great 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 build a Host-Remote pattern micro-frontend in React.
Micro-frontends help us break large frontend applications into smaller independent applications or modules that can be built and cover at their own 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.
The final configuration can be found here: https://github.com/rautio/react-micro-frontend-example
We are building two applications:
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 make 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 hostnpx create-react-app remote
This will create two apps for you:
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader
This will install webback and the dependencies we need for our webpack configuration.
Webpack Module Federation is only available in version 5 and above of webpack.
We are going to start with our own webpack configuration
Create a new
webpack.config.js file at the root of
This is a basic webpack example to get our
jsx code transpiled using
babel-loader and injected into an
Next, we need a new
start script that utilizes our webpack config:
Now we can get to the meat of the host app.
First we need the
index.js entry to our app. We are importing another file
bootstrap.js which renders the React app.
The reason we need this extra layer of indirection is 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
Next, we define the
bootstrap.js file that renders our React application.
Now we are ready to write our
App.js file where the main logic of the app happens. Here we are going to load 2 components from the
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.
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
webpack.config.js we introduce the
Important things to note:
nameis used to distinguish the modules. It is not as important here because we are not exposing anything but it is very important in the
remotesis where we define the federated modules we want to consume in this app. You’ll notice we specify
Remoteas 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
Remoteit is hosted on
localhost:4000and its module definition is
sharedis how we share dependencies between modules. This is very important for React because it has a global state which means you should only ever run one instance of React adn ReactDOM in any given app. To achieve this in our architecture we are telling webpack to treat React and ReactDOM as
singletonso the first version loaded from any of the modules is used for the entire app. As long as it satisfies the
requiredVersionwe define. We are also importing all of our other dependencies from
package.jsonand 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 fully configured but our
remote app is not exposing anything yet. So we need to configure that next.
Let’s start with the
webpack config. Since we now have some knowledge of Module Federation let’s use it from the get-go:
The important things to note are:
- Our webpack dev server runs at
- The remote module’s name is
Combined these together will allow our host to find the remote code at
exposes is where we define the code we want to share in the
moduleEntry.js file. Here we are exposing two:
<App /> and
Now let’s set up those components and our Remote app so it can run on its own.
Similar to the Host app we need a dynamic import in our webpack entry.
The Remote app is much simpler than the Host:
And we also want to expose a
<Button /> component
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.”
Now if we run
npm start in both the
remote/ directories we should see the Host app running on
localhost:3000 and the remote app running on
The host app would look something like this:
Congratulations! You’ve now configured a Micro Frontend app using React.
You can simplify the development flow by configuring yarn workspaces at the root level: https://classic.yarnpkg.com/lang/en/docs/workspaces/
We only covered running the Micro Frontend locally. If you want to deploy them you would deploy each app separately to their own CDN or hosting service and configure the webpack definitions to use environment variables or some other way to dynamically update the URLs in the
An example of this can be found in my more advanced example app: https://github.com/rautio/micro-frontend-demo
Code for this example:
A more advanced example:
Webpack’s example app for peer-to-peer structure: