How to include react app inside another app?

I am making two seprate react application and both are combined as single application at the end.

Consider two apps,

  • Sub App
  • Main App

Here the main app consists of all sub apps.

Code for Sub App:

function App() { 
 return (
   <h1> Here is the code of Sub App</h1>
 )
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Code for Main App:

function App() { 
 return (
   <h1> How to implement the stepper here in this Main App?</h1>
 )
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Requirement:

The requirement is we need to include the Sub App inside Main App like,

App.js:

import {ComponentName} from "sub-app"

function App() { 
 return (
   <ComponentName />
 )
}

Real world:

Consider the real world example as that I am having a big app and dashboard is part of it (Sub App), So we are about to create that dashboard as a separate react app and include the same inside Main App.

Things I tried:

  • Both Sub App and Main App are different git repos.
  • So thought of including the following code in package.json of Main App.

And tried the following,

"dependencies": {
   "sub-app": "https://git@myorganisation.com:<user>/sub-app.git"
 }

But unfortunately this doesn't work.. I think I am doing something wrong here..

I kindly request you to please help me to include the Sub App inside Main App.



Read more here: https://stackoverflow.com/questions/67394332/how-to-include-react-app-inside-another-app

Content Attribution

This content was originally published by Maniraj Murugan at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: