Build Microfrontend App Using React.

We will first create a react application “table-app” which will show some data in tabular form.

npx create-react-app table-app

We will create a JS file called “Table/Table.js” and “Table/Table.css”. This is how the files will look like:

We will now build the app:

npm run build

For consuming this app in our container-app we will use the asset-manifest.json which gets created when we build the app. This is how our asset-manifest.json looks like:

{
"files": {
    "main.css": "/static/css/main.9d5b29c0.chunk.css",
    "main.js": "/static/js/main.be943bff.chunk.js",
    "main.js.map": "/static/js/main.be943bff.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.0ff1d8ff.js",
     "runtime-main.js.map": "/static/js/runtime-main.0ff1d8ff.js.map",
    "static/js/2.51e1c9ae.chunk.js": "/static/js/2.51e1c9ae.chunk.js",
    "static/js/2.51e1c9ae.chunk.js.map": "/static/js/2.51e1c9ae.chunk.js.map",
    "static/js/3.5798dea5.chunk.js": "/static/js/3.5798dea5.chunk.js",
    "static/js/3.5798dea5.chunk.js.map": "/static/js/3.5798dea5.chunk.js.map",
    "index.html": "/index.html",
    "static/css/main.9d5b29c0.chunk.css.map":  "/static/css/main.9d5b29c0.chunk.css.map",
    "static/js/2.51e1c9ae.chunk.js.LICENSE.txt": "/static/js/2.51e1c9ae.chunk.js.LICENSE.txt",
    "static/media/logo.6ce24c58.svg": "/static/media/logo.6ce24c58.svg"
},
"entrypoints": [
    "static/js/runtime-main.0ff1d8ff.js",
    "static/js/2.51e1c9ae.chunk.js",
    "static/css/main.9d5b29c0.chunk.css",
    "static/js/main.be943bff.chunk.js"
]
}

Taking a closer look at this file, we can see that there are multiple chunks of JS. We would need to bundle all of this in one JS file. For this we will use react-app-rewired package.

First install the package:

npm add react-app-rewired

Then create config-overrides.js in the root level of table-app application and add the following content.

The next step is to instruct package.json to use this override. Update the scripts section as follows. Then you will notice that it has removed all the chunks and bundle everything to main.js.

"scripts": {
     "start": "set PORT=8080 && react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
}

This is how the asset-manifest.json will look like after bundling:

{
  "files": {
    "main.js": "/static/js/main.js",
    "main.js.map": "/static/js/main.js.map",
    "index.html": "/index.html"
  },
  "entrypoints": [
    "static/js/main.js"
  ]
}

One more problem that we will face is CORS issue when trying to access asset-manifest.json from our container-app. To bypass CORS in our development environment we will create src/setupProxy.js and add the following content.

NOTE: src/setupProxy.js only works in development environment. To bypass CORS in production environment, you need to host it on a proxy server.

The final modification we need for the table-app is to update its index.js with the render function (which will be used for adding the table-app to DOM)and unmount function (which will be used for unloading it from DOM). To do this, edit the index.js with the following content

We will then start the app:

npm start

This is how our table-app will look like:

Integration

We will create a container app called “container-app” which will consume the “table-app” we created above.

npx create-react-app container-app

Create a .env file at the root level of the project which will contain url for the hosted “table-app” and add the below content.

REACT_APP_TABLE_HOST=http://localhost:8080

Now that we know where to get the microfrontend “table-app” from, we will have to add this to the relevant section of the container app. We will do this via “asset-manifest.json” that was created by the build scripts above.

We will create a component called MicrofrontEnd in our container app and add the below content:

Here I have used Cam Jackson’s Microfrontend component.

Then we will modify our App.js as follows:

Now all that we have to do is build the application and start it.

We will use below commands to build and start:

npm run build
npm start

This is what our final application will look like:

GitHub Repo: https://github.com/AbhiAgarwal192/MicrofrontEnd/tree/master/React

Happy Coding!!