Splitting out a React js project for code reuse - The easy way

We like React, and we run a few projects on it: Good-Loop's portal, SoGive, and some internal tools. So we wanted to reuse code between these projects.

One way would be to make separate npm packages. But this is a painful solution: The compilation setup is painful, and you lose source-code maps (so you end up debugging from babelled code).

Instead, we found a simple solution using symlinks:

1. Just sym-link the "packages" in, using ln -s (for Linux or Mac; I don't know what the equivalent is for Windows).
2. Set webpack's resolve.symlinks property to false. In our setup that meant editing webpack.config.js to have resolve: {symlinks: false }}.

Then your code is split out -- but as far as the build process is concerned, or your code editor, nothing has changed.

You can also unit test with tests in each "package".

E.g. your project folders might end up looking something like this:

• myapp
  • src
    • subpackage: a symlink to subpackage/src
  • webpack.config.js, package.json, etc.
• subpackage
  • src
  • test: unit tests for src files
  • webpack.config.js for the unit tests

This is easy and it works.