javascriptreactjsimportreact-reduxaps

One react app imported into another react app?


Is it possible to import one React app(built using create-react-app) into another completely different React app. We all have imported components in our SPA, but is it possible to import a different app entirely? If so how?

Furthermore, both these react apps MIGHT share a few similar dependencies/files/libraries.. such as bootstrap/css/Redux stores/etc. Also, with a possibility of a few common reducers. These common reducers, might need to interact/listen to actions in-between these two react app.

Lets say we have:

ReactDOM.render(<Provider store={store}><MainApp /></Provider>, document.getElementById('root'));

Could i add another app like this(that was NOT built in this), and target another node in the dom???

ReactDOM.render(<Provider store={store}><ExternalAPP /></Provider>, document.getElementById('root22'));

Has this ever been done before? React compresses all our components into "chunks" which are basically js files.

Thank you, for any tips/suggestions/hints


Solution

  • You can use npm pack command.

    It creates a tarball (.tgz) file from your current app. Then move this file your other app folder then run:

    npm install app1 (assuming app1 is your first app name).

    After it is installed, you can see your app1 files inside the node_modules/App1/. Now your can import the files or components you want and use it in other apps.

    Hope this helps.

    Also Checkout this: https://docs.npmjs.com/cli-commands/pack.html