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:
create-react-app
sub applications to single-spa
applicationsroot-config
)create-react-app
to a single-spa
applicationThis 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.