Search code examples
node.jsreactjstypescriptwebpackyarnpkg

We share a yarn JS folder w/ client & server,

The situation:

  • client and server both share a folder shared
  • when we change shared in our development flow, we want the corresponding references to change in customer and server
  • server works because somehow with npm it seems to work, shared and server use npm
  • customer doesn't work and uses yarn
  • mixed typescript and js project

Code Structure:

root/
|- client/
   |- package.json
   |- src/
      |- ...
|- server/
   |- package.json
   |- src/
      |- ...
|- shared/
   |- package.json // we don't want to change version every change
   |- src/
      |- ...

What's been tried

  • 3 solutions proposed here

    • create a folder common under root and just require the files you need from your files. But you could end up with "long" require such as require("../../../../../common/file")

    • long require doesn't work with resolution with webpack - and isn't a nice solution

    • use module-alias to avoid that problem: https://github.com/ilearnio/module-alias

    • module-alias seems to be the same solution as the next one, in how it behaves.

    • you could make common a local module (using file:) and install it in package.json https://docs.npmjs.com/files/package.json#local-paths

    • we currently do this, but we still have to reinstall the shared folder on a change, we currently use yarn upgrade shared which takes a long time and still requires us to know when we need to run it.

  • in addition we've attempted to get yarn link working but doesn't seem to link properly

  • we've attempted to use a post-pull hook with husky to run yarn upgrade shared but it's too slow to run every pull especially since it's not needed often

  • we've considered a true mono-repo 'package' like Lerna but still don't think that it's necessary for the cost to migrate

  • link-module-alias to sym link folders on post install script, but this fails with typescript files

Goal

  • either
    • find a way to automatically sync these in dev environement
    • find a solution that installs/updates manually - but is fast and can be run on every pull
    • find a way to automate running yarn upgrade shared that runs (roughly) only when needed not all the time
    • I guess we could find a way to automate the version increment on any change of shared's version key, and then it's tracked, we could run yarn install and that work work.
Solution

  • The find solution was that we were using React-Native and therefore the normal steps for syncing would work for the IDE but not the React-Native app.

    Here is a great article describing how to get metro bundler working with it - however for Typescript we added it to the TSConfig and for the IDE we still needed to add it to our package using the file:../shared directive.