How to Work with NPM Packages Locally Using .tgz Files

Working with NPM packages locally can feel a little bit overwhelming at first. Over the last year, we have transitioned some of our infrastructure at RIMdev into several NPM packages that we can use across various projects. This has been a boon for us, but it also came with its own challenges. How do you test changes to one of these NPM packages locally without having to publish and then install in the project you’d like to test in? Do you have to publish any change you want to test? Luckily, it’s very easy to work with NPM packages locally thanks to a couple of handy features!

The workflow steps fairly simple:

1. Run your build command from the directory of your application that gets published as an NPM package. This will ensure that what would get included in a usual publish process will be what you package up to install locally.
2. Run npm pack from the same directory. This will generate a .tgz file at the directory’s root with a structure like this: {name}-{version}.tgz and print the name of the generated file in your console. You can then copy the name of that newly created file.
3. In the directory of the project that you want to test your NPM package, just run an npm install with the path to your .tgz file. Something like: npm install ../../my-package/my-package-1.1.0.tgz.
4. Run the project you want to test in and see your changes!

If you want to adjust anything in your package as you work through and test things, just run through those same steps again! It might be a little bit more work than changing things directly in the same project and enjoying hot reload, but it’s much easier than publishing something you aren’t sure about just so that you can test.