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 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
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
"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!") ||
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
Original source: A better alternative to npm/yarn link for the front-end