NPM Link
Dear Dev Diary,
Today, I want to share how we handle reusable React components across multiple projects—because who doesn’t love a good “library story”?
We’ve set up our projects with a shared component library that’s published to our private npm registry. This library is installed as a dependency in our main React projects, making it easy to reuse components. When developing components, we use Storybook as our dev server to style and mock functionality. So far, so good.
But here’s the catch: integrating the components into the main project for testing is tricky. Publishing a test version to npm and then installing it every time? Definitely not the way to go. That’s where NPM Link comes to the rescue!
NPM Link is a Node.js feature that lets you symlink a local package for development. This creates a symbolic link between the globally installed package and your local project. Essentially, it allows your project to use the local version of the package as though it were fetched directly from the npm registry. A true lifesaver!
Here’s the workflow we use:
After linking, the main project automatically uses the files from the dist folder of the component-library. We rely on Rollup to build our library, ensuring everything is production-ready.
This setup has been a game-changer for us. It keeps our workflow smooth and makes integrating and testing new components a breeze.
Until next time, happy coding! 🎉