Different approaches to testing your own packages locally: Relative Deps

In this article, we will explore a practical solution for testing your own packages locally without the need to publish them to production and risking any potential issues.
By leveraging the power of relative-deps, we can easily link our libraries with our projects during development, ensuring that everything works seamlessly without impacting the production environment. Let's dive in and discover how this useful tool can simplify our testing process and make our coding experience even more enjoyable.

This is part of a series of articles:

1. Linking local files
2. npm link
3. npm yalc
4. Verdaccio
5. Relative deps

Relative deps

The official description says: Installs dependencies from a local checkout and keeps them in sync, without the limitations of npm link.

Imagine you are working on your awesome project and you need to check if your fancy library works with the new changes you just made but without publishing and pushing your changes to prod. You don’t want to test in production, right?

I've got you covered; relative-deps to the rescue!

With relative-deps you can link your library with a relative path to your project while developing and testing it locally, making sure you don’t break stuff in prod.

This package is super simple to use and easy to set up. Let’s get started!

Like the previous articles, we have the following folder structure:

/my-awesome-project
/my-fancy-library

Installing relative-deps

In the root of your project (my-awesome-project), you need to install relative-deps:

npx relative-deps init

Running this script will install relative-deps, add the prepare script and initialize an empty relativeDependencies section.

{
  "name": "my-awesome-project",
  "scripts": {
    ...
    "prepare": "relative-deps"
  },
  "devDependencies": {
    "relative-deps": "^1.0.7"
  },
  "relativeDependencies": {},
}

You will use the prepare script after changing something in your fancy library. This will update the project with the latest changes from your library.

Adding your library as a relative dependency

Now, you need to add your library as a relative dependency in your project. You can do this by running the following command:

npx relative-deps add ../my-fancy-library

After running this command, you will see that the relativeDependencies section has been updated with the path to your library.

{
  "name": "my-awesome-project",
  "scripts": {
    ...
    "prepare": "relative-deps"
  },
  "devDependencies": {
    "relative-deps": "^1.0.7"
  },
  "relativeDependencies": {
    "@ks/my-fancy-library": "../my-fancy-library"
  },
}

It's ready! 🎉 Now you can start using your library in your project as if it was published with the latest changes you just did without publishing it to prod.

Updating your library

After making changes to your library, you need to update your project with the latest changes.
To do that you need to run the build script in your library and then run the prepare script in your project.

npm run prepare

This will update your project with the latest changes from your library. Have you seen how fast it is? ⚡️

Removing your dependencies

If you want to remove your library from your project, just delete the entries created in the relativeDependencies section and in the devDependencies section. Delete the prepare script as well and you are good to go.

In conclusion, relative-deps provides a straightforward and efficient solution for local package testing. By allowing us to link our libraries with our projects using relative paths, it eliminates the need for publishing and deploying changes to production. With its speedy update process, it proves to be one of the best alternatives available. Embracing relative-deps can greatly enhance our development workflow, ensuring seamless integration and preventing potential issues in the production environment.

Give it a try and experience the convenience and speed it brings to your package testing endeavors.

🧑‍💻 Happy coding!

Useful links

• https://github.com/mweststrate/relative-deps
• https://www.npmjs.com/package/relative-deps