Microfrontends React/Component based splitting

Question

Background: I am confronted with the task to modernize a tool and convert it to microservices with a react frontend. My idea was to have a general top-level component containing e.g. the Nav and a component for each microservice that contains the functionality.

Approaches:

• bundle the components locally so that it becomes effectively a monolithic frontend and the the forntend code is seperated just in the repo.

I think that would give up on the advantage of not having to redeploy your entire app for every change

• lazy-load a minified bundle of each of the components from the microservice by defining them in a config file

With this approach I could just webpack each component on their own and async import it from the Main Page but maybe there would be a huge overhead

I read about component based splitting with react-loadable and bundling react-router or webpack, but I can't find information on how to load small bundles form different URL-Endpoints.

Question: Is it possible to bundle react components on their own and import them from different Resource-URL's and how would one approach that ?(Or is React even suitable for that)

Answer 1

Take a look at the below link:

https://www.martinfowler.com/articles/micro-frontends.html

I've recently made a project based on that article and I think that it might be what You are looking for. I made the wrapper app which is rendering the microfrontends dynamically on the runtime based on the URL and routings. In the article above, there is a demo app showing the idea. Every microfrontend is the separate project with it's own code repo. https://demo.microfrontends.com/

Each app is hosted and js chunks are getting loaded on the runtime. This code might make it a little bit more clear what's going on there.

componentDidMount() { const { name, host } = this.props; const scriptId =micro-frontend-script-${name}`;

if (document.getElementById(scriptId)) {
  this.renderMicroFrontend();
  return;
}

fetch(`${host}/asset-manifest.json`)
  .then(res => res.json())
  .then(manifest => {
    const script = document.createElement('script');
    script.id = scriptId;
    script.src = `${host}${manifest['main.js']}`;
    script.onload = this.renderMicroFrontend;
    document.head.appendChild(script);
  });

}`

I hope You'll find that helpful :) Good luck!

Answer 2

So after quite some search and experiments I found the Project Mosaic of Zalando, which is what I wanted. It offers a great way of React Component Splitting to support Micro Frontends. Note however that it is probably not suitable for smaller projects as it takes some time to get into the material and setting up all necessary applications.