CODEWITHSUNDEEP
javascriptreactjsimportreact-reduxaps
adnan tariq
adnan tariq

Reputation: 197

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

Upvotes: 6

Views: 8094

Answers (2)

zip27
zip27

Reputation: 91

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 component 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 component, you can do something like import { Button } from 'repo_name/dist/index' or reference whatever file you used to export your components.

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

  1. Create a folder called lib that stores all the components you want to bring to the other react app. Also define a file called index.js in this folder that exports these components.
  2. Create a repo for the components 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"
]
}
  1. 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";
  2. Run the command npm run build

Upvotes: 0

Anish Arya
Anish Arya

Reputation: 432

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

Upvotes: 5

Related Questions