Micro-frontend E2E to Production

Hi coders! After working in React for 4 years I realize that creating UI apps and shipping to production becoming soo mainstream whereas Monolithic services are following different micro-services patterns. Why not one UI can be split into different projects and build by multiple teams with different testing and build pipelines🤔. Actually this type of thinking may come when app becoming-

• Complex- Your UI app becoming too complex to handle by one team
• Redundant- Same UI components can be reused by other UIs (say no to iFrame 😜)
• Big- App becoming kitty🐈 to dinosaurs 🦖

Monolithic vs Micro-frontend

Monolithic Frontend:

Source: https://micro-frontends.org/

Micro Frontend:

Source: https://micro-frontends.org/

This blog is intended for creating a sample project not describing full micro frontend patterns. I will attach some useful links end of the tutorials 🙌🏼.

Let’s build a Micro frontend app. In this tutorial, I am using two React micro apps and one React aggregator app. Though you can also use Vue.js or Angular.js as well. The micro-frontend pattern should be framework independent.

React micro apps: These are micro UI app and can be plug into another aggregator app or can be run independently. This app will build static .js & .css and we can put it on CDN or S3 Bucket, so these are very cost effective.

React Aggregator app: This is one UI app which will aggregate other small micro frontends.

You need to know a few things before starting

Building Micro UIs:

1. react-app-rewired- To build the Mico-UIs I am using “react-app-rewired”

timarney/react-app-rewired

2. We can locally start Micro UIs independently without an aggregator.

npm start

3. Build .js and .css files with following command

sh Run.sh

4. We can put main.js and main.css build files on any public static location. Generally, we can put it to any S3 bucket CDN.

5. Micro UI all environment configs can be accessible through env.config.json

For other environments except for local (QA, STAGING, and PROD), aggregator UI will provide the config url in the window object.

6. For different Micro UI communications, I am using CustomEvents.

example:

Note: I have tried Redux for Micro UI communications but every time new Micro UI loads on the aggregator, it replacing the old reducers. That’s why I am using CustomEvents and it can be used in every browsers without any third party library. If you have any suggestions regarding Redux please comment on me.

7. Every Micro UI app should be export as unique name

In public/index.html, add a root micro UI div with the unique app name

For ‘todo-micro-ui-header’ micro UI app I have used ‘todo_header_app’ app name

<div id="todo_header_app"></div>

and in HeaderApp.js I have used

customElements.define('todo_header_app', HeaderApp);

Building Aggregator UI

Building an aggregator UI, you don’t have to change much. You can easily use your old legacy React app with some small changes

1. Add React DOM in public/index.html

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

2. public/config.json add your configs, it will change based on your environment.

3. Import Micro UI .js and .css files when component mount

Micro Frontend Demo

Github Links:

APP 1 [todo-micro-ui-header micro ui]:

kousikpaul4u/todo-micro-ui-header

APP 2 [todo-micro-ui-signup micro ui]:

kousikpaul4u/todo-micro-ui-signup

AGGREGATOR APP [todo-aggregator-ui]:

kousikpaul4u/todo-aggregator-ui

I hope this tutorial blog is helping you to build Micro Frontend. If you have any issues and suggestions please let me know in comment.

Cheers 🍻and happy coding 🙌🏼

Useful Links-

Micro Frontends

Micro Frontends