The Startup
Published in

The Startup

Deploying Micro Frontends to AWS Step by Step Using React, Webpack 5, and Module Federation

In my previous article (https://www.linkedin.com/pulse/micro-frontends-hands-on-example-using-react-webpack-rany/), we built together a Micro-Frontend Host (MFE2) that renders a component from Micro-Frontend 1 (MFE1).

If you are new to Microfrontends, you may start with the following article:

In this article, we will deploy MFE1 and MFE2 to AWS and access them from the internet, instead of LocalHost. I will try to use the bare minimum and simplest steps so that you can follow along and then explain, later how things work together, as usual. I hope you enjoy the journey.

The final result can be viewed at http://mfe1.s3-website-us-east-1.amazonaws.com/

If you inspected network traffic you will note that we are calling two different sites

Final Code at Github:

git clone https://github.com/ranyelhousieny/react-microfrontends.git

Webpack Config for Deployment

One of the main differences between dev environment and production, Webpack configuration. Let’s start with that.

1 — For both MFE1 and MFE2, copy webpack.config.js to webpack.prod.js

2 — In both webpack.prod.js, change the mode from development to production as follows

3 — remove the code for the devServer and the port from both files

Here is what you should have aside from module (We will explain the module later but it is needed for React compilation to js)

And here the full file:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
mode: 'production',
plugins: [
new ModuleFederationPlugin(
{
name: 'MFE1',
filename:
'remoteEntry.js',
exposes: {
'./Button':
'./src/Button',
},
}
),
],
module: {
rules: [
{
/* The following line to ask babel
to compile any file with extension
.js */
test: /\.js?$/,
/* exclude node_modules directory from babel.
Babel will not compile any files in this directory*/
exclude: /node_modules/,
// To Use babel Loader
loader:
'babel-loader',
options: {
presets: [
'@babel/preset-env' /* to transfer any advansed ES to ES5 */,
'@babel/preset-react',
], // to compile react to ES5
},
},
],
},
};

4 — Let’s build and validate locally

on the terminal from inside mfe1 directory, run the following command

yarn webpack --config webpack.prod.js

It should succeed and create a dist folder with both main.js and remoteEntry.js as follows

The main idea is to move the dist folder in a place that the host (MFE2) can remote to it. The nice part, you can still deploy a stand alone React version of mfe1

final webpack.prod.js can be found at https://github.com/ranyelhousieny/react-microfrontends/blob/main/mfe1/webpack.prod.js

5 — Copy the content of mfe1/dist to S3

Of course, you have to have a configured S3 with Web hosting. Follow the steps in my following article to create a Website on S3

Also you need to configure your AWS-CLI to copy files. Follow the following article

Here is the command I used to copy to my existing site

aws s3 sync dist s3://rany.tk/mfe/mfe1/dist/2021Feb27/

Validate that the file is there

Rany>aws s3 ls s3://rany.tk/mfe/mfe1/dist/2021Feb27/
2021-02-27 10:45:33 396 165.js
2021-02-27 10:45:33 7210 921.js
2021-02-27 10:45:33 294 921.js.LICENSE.txt
2021-02-27 10:45:33 129851 935.js
2021-02-27 10:45:33 788 935.js.LICENSE.txt
2021-02-27 10:45:33 2650 main.js
2021-02-27 10:45:33 3280 remoteEntry.js
Rany>
Rany>aws s3 ls s3://rany.tk/mfe/mfe1/dist/2021Feb27/remoteEntry.js
2021-02-27 10:45:33 3280 remoteEntry.js

6 — Now, change the remote place in mfe2/Webpack.config.js and mfe2/Webpack.prod.js as follows

Everything else will stay the same

7 — Start the Host (MFE2)

from the directory of mfe2 run “yarn webpack serve”

Rany>cd ..
Rany>cd mfe2
Rany>yarn webpack serve
yarn run v1.22.10

browse http://localhost:8082/

If you inspect network traffic, it will look as follows:

As you can see, it is bringing remoteEntry.js from https://rany.tk

install the following plugin to be able to read JavaScript files in a readable format:

Try to browse https://rany.tk/mfe/mfe1/dist/2021Feb27/remoteEntry.js

You should see the following if you installed the previous plugin.

So, all that happened here is that webpack created a pure javascript from our react component and made it available for any host to remote to it. S3 did the trick to allow remote to it through HTTP link

8 — Deploy MFE2

All we need to do for MFE2 is to build it and upload the content of the dist directory to the S3 bucket that is configured for static web hosting

on the directory of mfe2 run the following command to build mfe2

yarn webpack --config webpack.prod.js

9 — Copy dist directory to S3 root

I created an S3 bucket and configured it as Static Web site at

In the coming article, I will explain how to deploy the host mfe2

Final code at http://mfe1.s3-website-us-east-1.amazonaws.com/

copying using AWS CLI

aws s3 sync dist s3://mfe1/

Browse into http://mfe1.s3-website-us-east-1.amazonaws.com/

and you will receive the following

If you inspected network traffic you will note that we are calling two different sites

Final code at

This article is also explained in the following video:

I published, originally on LinkedIn:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rany ElHousieny

Rany ElHousieny

https://www.linkedin.com/in/ranyelhousieny Commercial software development manager offering 25+ years of technical experience. Certified Solutions Architect