Multiple React apps in one shell

Question

I have to develop React app architecture with one Main App (Shell) and multiple Child Apps inside.

Requirements

1) Main App has to provide users authentication and maybe some other core features.

2) Each Child App should be developed by autonomous teams in parallel. Each team will be totally independent with zero knowledge about other teams. Child App won't connect to each other.

3) (Optional) Main App should run Child App in the runtime, it means if Child App was updated, Main App checks it and run a new actual version of Child App. The main goal is to rebuild Main App as little as possible.

4) Backend is a wide range of microservices.

Questions

It's possible? Can you please give me some advice on how to do it?

It should be multiple react apps? I understand how to render one react app into another, but can't imagine how to connect redux actions between them.

Maybe Child Apps will be just independent modules, but how it will be started? Maybe someone saw a similar project on GitHub or useful links?

Thanks for the advice.

Answer 1

Yes, what you want to do is a new buzzword: micro frontends, to be paired with microservices.

I haven't found one single, community supported or highly popular solution, but some sure do exist - based on WebComponents unfortunately for your case.

Some posts to get your research started, I'm sure you'll find your way around from here:

Microfrontends: an approach to building scalable web apps

Building microfrontends with React and Node

Some "frameworks" from big companies are also available, like this one from Zalando: https://www.mosaic9.org/

I don't think however any ready-to-use solution will have you covered, because this frontend solution would affect so many layers of your product (from repository modes, to CI/CD, your Nginx/CDN setup,your dev environment with Docker probably...) that any "framework" would probably make assumptions not valid in your case.

I find it however very interesting and I'm following up the news. Hope this helps you find your way around. ;)

Answer 2

I'm working on something similar. single-spa (https://single-spa.js.org/) looks like the most flexible and most mature solution out there at this time.

Also you can look into simply using dynamic imports (es6 import function), or react-loadable to load components child apps at runtime. Unfortunately, JS web frameworks and tools don't favor loading things at runtime, but it's not difficult.

I'm considering an "app shell" with nextJS for fast SSR page load and then loading "child apps" dynamically with import()