How to render a React app in a React app (nested React apps)

Question

So the question is if it is possible to split a React app into two different separate apps hosted on two different hosts, where the app A is a kind of a frame which controls the app B and C in the future. I have a problem, where I would like to make a common fundament for both apps (the A app) and then load two other as a content of it. It would be as if I had lazy loading with a bundle fetched from a different place. I was thinking about three main possibilities:

• Iframe
• Single SPA project from github
• using ReactDOM.render method

I am not sure if it is possible at all, beacuse there still may be a problem with React Router - does the inside app have access to manipulate the browser routing?

Erna

You mean like a react lib providing a container component? Where is the difficulty? – Casabonne

I could split the app B and C as libs, and then I could load them via package.json and webpack, but what I would like to do is that I have a big app split into bundles A, B and C, where bundle B and C are being loaded from different sources (using rests?). How can I include a built React app into a container React app? – Jaw

Hey, buddy did you solve this problem? – Broughton

Not at all. I tried iframes, but it takes out a lot of possibilities. I am also going to try out Single SPA, but right now, I don't have enough time. :/ I was able to host a react app inside a react app via inserting a div with root2 id and adding a scripts section, but it fell apart when it had router and redux stuff inside (maybe I should have deleted the inititalization). Still - a complex problem to solve. – Jaw

I am currently attempting this react app nesting with ReactDom.render and it seems to be working. It doesn't use router as of yet. An additional problem I'm anticipating is parent react app having different versions of dependencies i.e. different version of react etc as they are loaded into the same window and could foreseeably break either the parent or child react apps. Can anyone suggest a method for managing dependencies? I'm thinking of putting the shared dependencies in the child as peer dependencies and therefor inheriting from the parent app. Dependencies still could go out of sync ... – Choreography

Answer 1

It is quite possible to split your react Application into multiple smaller react applications.

Suppose you have a react application such as an e-commerce platform . You can choose to write the cart Page using a separate react-App and the products page using another separate react app and integrate them together using Module Federation Plugin webpack/lib/container/ModuleFederationPlugin.

A good reason to do something like that would be to develop different parts of your application in isolation ..and they can be taken care by different teams altogether.

There is a udemy course that teaches you exactly that. Very much recommended. You can make react dependency as singleton to avoid several installs of react.

Berliner

Answer 2

All 3 of these options you've stated are valid and can be used to share components but there are few disadvantages to each one, for example- iFrames makes it hard to create responsiveness, ReactDOM splits your app so that the different parts won't have the same global scope...

Module-Federation is the best and most efficient way to share remote components that i know of, here is a github link to a basic project. The MF plugin makes use of webpack's abilities, which means that the shared components are being consumed as runtime objects of the app's scope, rather then as a promise of an iframe.

NOTE: Debugging and updating a Module Federation project is a much deeper task then debugging a create-react-app application, you'll need to share dependencies correctly and remember to update desired changes at all the right places all the time.

Abagail

Answer 3

This is not possible. Each react app can only have a single package.json in the hierarchy. if you nest it, the app will fail and say you have several installs of react. what you should do is think more react minded and objecty. You can have a folder for common components to share inside src/. You can also have src/A which is one "app". src/B which is another.

What you described in your question is exactly what you should do, just dont think of it as a react app separation, rather a seperation of component and app inside the src folder. App A can be comprised of components from /components as well as App B.

Ricoricochet