This article is the continuation of the first one that can be found here. However if you’re an experienced developer — feel free to start from this one.

In this part we’ll showcase how to turn an app that uses React router into Micro Frontend that works with Isomorphic Layout Composer.

A bit of theory…

One of the first questions that you need to solve when applying micro frontends architecture is routing. It comes from the fact that you no longer have a single React/Vue.js/etc app that handles all the route transitions. Now you have multiple apps working simultaneously on the web page, and you somehow need to understand which apps should be active on the page for the current URL.

We, in Isomorphic Layout Composer (ILC), solve this by using so-called “2-tiered routing” approach.

“2-tiered routing” approach

In this example the user opened a page at /news/latest URL. It correlates to the /news/* route configured in ILC, this route contains information about apps that should be loaded on the page and props they need to receive. When we load and mount the application to its container DOM node — we also pass basePath property which should be used by application’s router during its work.

But enough theory — let’s see some real code.

#micro-frontends #microservices #web-development #react #javascript