Multiple React apps in one shell

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. ;)


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()