Is it possible to import one React app(built using create-react-app) into another pletely different React app. We all have imported ponents 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 mon reducers. These mon 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 presses all our ponents into "chunks" which are basically js files.

Thank you, for any tips/suggestions/hints

Is it possible to import one React app(built using create-react-app) into another pletely different React app. We all have imported ponents 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 mon reducers. These mon 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 presses all our ponents into "chunks" which are basically js files.

Thank you, for any tips/suggestions/hints

• javascript
• reactjs
• import
• react-redux
• aps

2 Answers 2

You can use npm pack mand.

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 ponents you want and use it in other apps.

Hope this helps.

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

One way that worked for me is to bring the CRA to Github and npm install it as a dependency. I highly encourage you to check out this resource which explains in detail how to prepare a React ponent for this process. Follow the steps in the linked tutorial up to #3, then bring everything (including the /dist folder) to Github. Then, do npm install org_name/repo_nameand install it as a dependency in your second React app. Then, to import a specific ponent, you can do something like import { Button } from 'repo_name/dist/index' or reference whatever file you used to export your ponents.

In case the link doesn't work, here are the steps in the article:

1. Create a folder called lib that stores all the ponents you want to bring to the other react app. Also define a file called index.js in this folder that exports these ponents.
2. Create a repo for the ponents on Github
3. Install Babel and build the dist folder.(npm install --save-dev @babel/core @babel/cli @babel/preset-env and npm install -save @babel/polyfill)
4. Add the following config file to the top-level folder of your project:

{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}

5. In package.json, replace the build script with the following: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
6. Run the mand npm run build