title: How to include react app inside another app?
body: <p>I am making <strong>two seprate react application</strong> and both are combined as single application at the end.</p>
  <p>Consider two apps,</p>
  <ul>
  <li>Sub App</li>
  <li>Main App</li>
  </ul>
  <p>Here the main app consists of all sub apps.</p>
  <p><strong>Code for Sub App:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() { 
   return (
     &lt;h1&gt; Here is the code of Sub App&lt;/h1&gt;
   )
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Code for Main App:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() { 
   return (
     &lt;h1&gt; How to implement the Sub App here in this Main App?&lt;/h1&gt;
   )
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Requirement:</strong></p>
  <p>The requirement is we need to include the <code>Sub App</code> inside <code>Main App</code> like,</p>
  <p><strong>App.js:</strong></p>
  <pre><code>import {ComponentName} from &quot;sub-app&quot;
  
  function App() { 
   return (
     &lt;ComponentName /&gt;
   )
  }
  </code></pre>
  <p><strong>Real world:</strong></p>
  <p>Consider the real world example as that I am having a big app and dashboard is part of it (<code>Sub App</code>), So we are about to create that <code>dashboard</code> as a separate react app and include the same inside <code>Main App</code>.</p>
  <p><strong>Things I tried:</strong></p>
  <ul>
  <li>Both <code>Sub App</code> and <code>Main App</code> are different git repos.</li>
  <li>So thought of including the following code in <code>package.json</code> of <code>Main App</code>.</li>
  </ul>
  <p>And tried the following,</p>
  <pre><code>&quot;dependencies&quot;: {
     &quot;sub-app&quot;: &quot;https://git@myorganisation.com:&lt;user&gt;/sub-app.git&quot;
   }
  </code></pre>
  <p>But unfortunately this doesn't work.. I think I am doing something wrong here..</p>
  <p>I kindly request you to please help me to include the <code>Sub App</code> inside <code>Main App</code>.</p>