5

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. Like this

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)

Bjoern Urban
  • 328
  • 4
  • 14
  • 1
    It seems to me a complicated approach. Maybe you could use `react-router` dynamic routing to stop loading all your modules while you make server-side rendering, and create components in separate git repositories that you link in your package.json with some __Git URLs as Dependencies__. You can also have a look in [lerna](https://github.com/lerna/lerna) to define several components in one repo. Finally, I think that exposing frontend in microservices is quiet an anti-pattern. Microservices should be as dumb as possible (not aware of the client frontend, for sure). – DoubleCompil Nov 23 '17 at 11:15
  • lerna seems like a cool thing. I will definetly check that out. I thought it would make sense to split them like this so that each microservice is self contained but if its to complicated, I will persue the approach of bundling them upfront – Bjoern Urban Nov 23 '17 at 14:37

2 Answers2

1

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.

Bjoern Urban
  • 328
  • 4
  • 14
0

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!

AdamKniec
  • 1,607
  • 9
  • 25
  • 1
    Do you have examples how the martin fowler/cam jackson example that you've linked would work with microfrontend-wide code-splitting, e.g. multiple chunks per micro-frontend? Which chunks would have to be loaded up front? Would the delayed loading of additional chunks still work? – Codepunkt Jun 29 '20 at 13:12
  • @Codepunkt, have you found an answer to your question by any chance? Currently I'm looking to configure react to compile everything into single js file. Looks like that's what they did in the demo. – zeroed Jul 02 '20 at 03:56
  • @Codepunkt I used this as a temporary solution: https://www.npmjs.com/package/react-app-rewire-disable-chunks – zeroed Jul 02 '20 at 04:26
  • I did the same thing with React-app-rewired – AdamKniec Jul 02 '20 at 06:29