Bundle multiple apps together?

Where I work we are using create-react-app for all our applications. These apps are linked together so that one user may actually move from one to the other quite often.

It’s not optimal but this allowed us to have independent teams work on different apps and have them integrate with each-others.

Now we’d like to reduce the amount of data the user has to download to use all our applications. The problem we see is that each time the user switches from one app to the other, she will have to download all the dependencies again, even the ones she had downloaded to run the previous app (react, react-dom, and any common dependency).

I’m now wondering if there could be a way to have multiple create-react-app apps built together by the same webpack build, with one entry point for each app, and as output a set of index.html (one for each app), plus the bundles of each app, and the common dependencies bundled in other bundles that could be shared across them.

- applications
  - CRA1
  - CRA2
- builds
  - CRA1
    - index.html
    - bundle.js
  - CRA2
    - index.html
    - bundle.js
  - common.js

I tried to work on this in my time and the first problem I faced was that since we used the NODE_PATH env variable on all our apps, we needed a way to make webpack properly resolve those paths.

The result is this small custom resolver: https://github.com/FezVrasta/webpack-context-relative-resolver/blob/master/README.md

I was wondering what are your thoughts about this use case and if you’d like to see this progress.

[gaearon]

I don’t really see us supporting this directly.

The closest you can get to this with a CRA setup is to extract independent parts to have their own build system (e.g. using nwb. Then you can host them at some CDN, and put them into index.html of the CRA projects.

I don’t have a better solution that doesn’t also involve ejecting (and at that point it’s more of a webpack question so I direct you to them instead).

[bugzpodder]

Correct, It does not.