Use react app inside another react app

[Vadorequest]

I have an existing react app, which is currently used like a traditional a react app: Basically load the bundled JS version in a HTML page and get going.

I want/need to keep using it this way.

But as my needs are growing, I also need to use it within another react app and I wonder about how I should do it properly. Based on my current usage, I already have a CDN with the bundled versions.
But I don't think I can use it this way inside another react app.

I read about #1492 but didn't really find any good solution so far. I've thought about releasing a npm version, which would allow me to use it as a component (I guess), but would also be more work to deal with, with versioning and releasing both the bundled and npm version at every update. What are my options?

[Grsmto]

I don't think you will find a better solution than using somethin like npm for this, as you suggested it.
To make it as simple as possible, you could use an npm script for that. With a single command (your build command potentially npm run build), your project could build your bundle and publish your shared components to npm at the same time.

• First you will have to create a package.json file in the folder you want to share across projects (let's say it's src/components/).
• Then you can alter you CRA build script with something like this:
  "build": "cd ./src/components && npm version patch && npm publish && cd / && npx react-scripts build"

Once your shared components are published on npm, you can just npm install them like any package. Check the npm doc to publish them privately.

[Vadorequest]

How would you provide attributes the same way between those two ways? (bundle and npm)

My current workflow is to provide those settings through a global window variable. But that would be cleaner to instantiate the component properly with such settings given in attributes.

I wonder about a common way of doing it whether using the module as a component (npm package) or as a bundled js file injecting itself into a dom element (CRA's way)

[Timer]

2.x will have monorepo support, you can search and find more about in the 2.0 roadmap issue!