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.jsIt 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.10browse 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.js9 — 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:
