In larger component-based projects, it’s common to have a published design system to hold reusable components that can be used anywhere across your main application—or other web apps you might control. These component libraries can hold things like buttons, search fields, CTAs, footers, links, frontend logic, you name it. It’s useful to have a published source of reusable components as it can reduce code duplication, standardize your team’s development and increase scalability.
Now let’s say you published a button from your project, fancy-button, to npm and you use it in your project fancy-store-page. You made some cool changes to your fancy button, but you want to test it in your project first to make sure it’s still compatible with the rest of the page. In order to do that, you have to bump your version and publish your package to npm every time you make a change—this can be viciously unproductive. Wouldn’t it be nice if you could just start up your fancy button app locally and see the changes you make instantly reflected on your page?
In comes npm link: the missing ingredient needed to efficiently test your shared packages, seamlessly, on your local before you publish.
What is npm link?
npm link is an npm CLI command that creates a symlink or ‘symbolic link’ between fancy-button and fancy-store-page. This link allows us to develop and test the fancy button component, live, locally, on our page without having to continuously rebuild and publish the dependent package.
How do you use it?
Using npm link is a two-step process:
- In the command line in your terminal, navigate to your
fancy-buttonproject. Runnpm link. This will create a global link allowing your component to be globally accessible by your parent project.
cd projects/fancy-button
npm link
- In another terminal, navigate to
fancy-store-page. In the root of this folder, runnpm link fancy-button. This is where you link your parent project to the dependent component. Note: The link name should be the dependency npm package name taken from the name property in package.json, not the directory name. In this case, they are both the same.
cd projects/fancy-store-page
npm link fancy-button
Now the packages are linked! Changes to your button in /projects/fancy-button will now automatically be reflected in /projects/fancy-store-page/node_modules/fancy-button. Just import the component into your app and use it as you would normally.
Once you’ve developed your changes and tested them to your heart’s desire, you can unlink your projects.
In your parent project terminal, go ahead and run npm unlink fancy-button to unlink the dependency.
* Inside /projects/fancy-store-page *
npm unlink fancy-buttonFinally, in your fancy-button directory, run npm unlink so that the package is no longer globally available.
* Inside /projects/fancy-button *
npm unlink
Just like that you’ve officially tested and developed your shared component locally and can publish confidently.
What Are You Waiting For?
The decoupling of components into a library is the foundation of a great design system. With npm link in your node tool belt, you’ll be able to make developing and testing components even more awesome.
