Different approaches to testing your own packages locally: Relative Deps
Tags: npm, node, tutorial, webdev
Published: 2023-06-13 06:53:59

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](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-1kdg)
> 2. [npm link](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-npm-link-4hoj)
> 3. [npm yalc](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-npm-yalc-3l97)
> 4. [Verdaccio](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-verdaccio-5hd8)
> 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:

![tree view of the project folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js3ij994nibqwtwh5fkv.png)

```
/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.

```json
{
  "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.

```json
{
  "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