What? What is a micro-frontend?

Did you ever heard of micro-service architecture? Where a backend application is broken into some semi-independent services, and then developed by different team may be using different technologies. Micro-frontend is the same but it is for frontend of an application. This is a new pattern where web application UIs (front ends) are composed from semi-independent fragments that can be built by different teams using different technologies. Ok! Enough talking. You want to learn more? Check these out:

Let’s get into work now. Let’s assume that you’re building a large website and different parts of your web app is built using ReactJS separately. You want to combine them in a way that, they can be developed further as independent applications. And it should be easy to add a sub application, or remove any part from your beautiful web app.

Suppose there are three parts of your application:

And you want to combine them in a way that route /first will open the first-app, route /second will open the second-app and the navbar will be shown in every page. Both the first-app and second-app was created using create-react-app. So we have to convert it to a single-spa application. Btw, single-spa is a javascript framework that made implementing micro-frontend so easy (not always). To learn more about single-spa check the doc.

The steps for combining these applications and adding a nav bar to move from one app to another:

  1. Converting both of our create-react-app sub applications to single-spa applications
  2. Creating a root application (root-config)
  3. Registering our sub applications to the root application
  4. Fix routes inside our react applications
  5. Make the application easily build and deploy

Converting a create-react-app to a single-spa application

This one may be the hardest and confusing part of the full process. I tried all of the four processes mentioned in the official documentation, but they didn’t work. So I had to make some tweaks. Let’s get started.