A better alternative to npm/yarn link for front-end web development

Here at Teselagen I work developing code that helps biologists design, build and optimize biological products. Our platform has evolved from a single repository to many smaller focused repositories, both private and public. We use JavaScript across the stack and React JS + webpack to power our user interfaces.

In our main apps we have around 8 or 9 local repositories that we might need to link together at any time. Our old workflow was essentially this:

cd openVectorEditor #a helper module
yarn link 
yarn run build #time consuming but necessary to compile react code
cd ../lims #one of our apps
yarn link open-vector-editor#we would do this for every helper module we wanted to run locally
#and don't forget to yarn link react and react dom so you don't have multiple copies :facepalm

We would spend a ton of time cd’ing into different repo’s and yarn linking and building and yarn unlinking our different apps and re-installing our local node modules. I looked all over the internet for a better solution but didn’t really see anything that could solve this pain point for us. Until.. I thought about webpack aliases.

Webpack aliases are usually used to help alleviate the pain of deeply nested local dependencies. Instead of requiring `someModule from “../../../../utils”` you can use webpack aliases to shorten that path to `someModule from “localUtils”`. Essentially webpack will reference your local folder and resolve to it instead of node_modules.

I wondered if we could use that same mechanism to link our local packages temporarily and override the node_modules. It turns out you can! Here’s what we added to our webpack.config.js:

resolve: {
  alias: {
    "open-vector-editor": path.resolve(__dirname, "../../openVectorEditor/src/"),
   
    "teselagen-react-components": path.resolve(__dirname, "../../teselagen-react-components/src/"),    ...any other local repo's we want to link here
   
    react: path.join(__dirname, "node_modules/react"),    "react-dom": path.join(__dirname, "node_modules/react-dom")  }
}

Now our local modules resolve to their local folders where we can edit them. We don’t have to rebuild them anymore! HMR even works out of the box (we use nwb with all our repos). And we don’t have to keep linking/unlinking react and react-dom.

When you’re done just remember to comment those lines out of your webpack.config.js. We use linting and a no-console rule to make sure we remember to do this:

"open-vector-editor":console.log("comment me back out!") ||
path.resolve("../../openVectorEditor/src/"),

This is a godsend! We save so much time and headaches by being able to locally link our modules and not have to rebuild them or deal with manually running yarn link/unlink all the time.

One thing to note, you’ll need to have your local dependencies installed as they’ll resolve to the nearest node_modules folder (instead of to the node_modules of your main app).

Let me know if this works for you or if you have any more questions through here! Cheers and happy coding!

P.S. a real live version of this can be seen here (in the nwb.config.js file).

Original source: A better alternative to npm/yarn link for the front-end