Micro Frontends Hands-On Example Using React, Webpack 5, and Module Federation: Adding a third React Micro Frontend

This article is a continuation of the previous article

Micro-Front-Ends: Hands-On Project

The final code can be found at

ranyelhousieny/micro-front-ends

So far, we have not used React. In the following article, we will add a third micro frontend, react-microfrontend-3

npx create-react-app react-microfrontend-3

Now, let get into the newly created folder cd react-microfrontend-3

cd react-microfrontend-3

and then open VSCode using code .

When Visual Studio code opens, navigate to react-microfrontend-3/src/index.js and rename it to bootstrap.js as shown, below

Now copy container/src/index.js to react-microfrontend-3/src/index.js as shown, below:

In react-microfrontend-3/src/App.js replace everything with the following

This is the simplest React App component. Let’s start small so that we can grow slowly

Save the file

Copy micro-front-end-2/webpack.config to react-microfrontend-3/

Change the names in the file and the port as follows:

Save the file

Now, let’s come to the tricky part. We will need some rules to be able to translate JSX to JavaScript ES5 that can be understood by any browser. We did not have to do this in the previous two components because they were plain JavaScript.

1. Add a loader for babel

it is a module object

module{}

This module object contains a list of rules

rules:[]

inside this array, we will have object

First item in the object is is test: /\.js?$/, this line simply asks babel to compile the files with extension .js to ES5

Then we exclude node_modules directory from babel. Babel will not compile any files in this directory

Here is the full file

Add serve to the script in package.json

Make sure to save

Install dependencies for react-microfrontend-3

Start a terminal (ctrl + ` )

runt the following command

npm install webpack webpack-cli webpack-server html-webpack-plugin

Run npm install to make sure everything is installed

npm run webpack

and browse http://localhost:8083/

For a full step by step project, please follow the following article

https://www.linkedin.com/pulse/micro-frontends-hands-on-example-using-react-webpack-rany/