How to update npm dependencies to latest version
Tags: npm, node
Published: 2023-04-06 11:57:59

## The versioning system

Consider _React version 16.8.3_. Have you ever wondered what are these numbers?
Are they some random numbers or do they have any meaning?

NPM uses [semantic versioning](https://semver.org/) to version the packages. Here's what the three numbers (from left to right) indicate:

- **Major version**: The first number indicates a major release, which potentially can include breaking changes.
- **Minor version**: The second number indicates a minor release, which contains enhancements and does not contain any breaking changes.
- **Patch version**: The last number indicates a patch release, which is mainly done for fixing bugs.

So if we are migrating to a newer major version, then it can be called as an **upgrade** and
if it involves only a minor or a patch version, we can call it an **update**.

## What are ! and ~

Have you seen packages named as `react@^16.8.3`, `axios@~0.27.2` in `package.json`? and wanted to know what the symbols ~ and ^ indicate.

- ~ represents that while updating the package, the latest patch version can be safely installed.
  That is, for `axios@~0.27.2`, we can safely install `v0.27.X`.
- ^ represents that while updating the package, the latest minor version can be safely installed,
  That is, for `react@^16.8.3`, we can safely install `v16.X.X`.

## Which version does the `npm install` install?

There are 2 scenarios:

- When the `package-lock.json` exists: It will install the exact same version mentioned in `package-lock.json`.
- When the `package-lock.json` doesn't exist: It will install the latest safe version of the respective package.

## Listing outdated packages

To know which all packages are outdated and need to be updated, you can run the following command in your project:

```bash
npm outdated
```

In the output, _Wanted_ indicates the version to which we can safely update. The _latest_ shows the latest version available in the registry.

![npm outdated output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8xwja0dw94vk10eruf0.png)

## Updating packages

If you need to update the packages that can be safely updated, then you can run the following command to update them.

```
npm update
```

If you want to update individual packages then specify their name next to the command:

```
npm update react react-dom
```

## Updating the package to the latest available version

To update to the latest version, you can run:

```
npm i <package>@latest
```

Eg: `npm i react@latest`

If you want to update all the packages to their latest available version in one go, then you can use the package
[npm-check-updates](https://github.com/raineorshine/npm-check-updates) as follows:

```bash
npx npm-check-updates -u
```

The above command will update the `package.json` with the latest versions of the packages.

Now running `npm install` will update the packages to the latest version

> It is always recommended not to upgrade the packages in one go since most probably you might end up breaking the application and
> will spend a lot of time fixing it. So, always upgrade one package, test the app, then upgrade the next.