Run npm outdated to check old packages
Tags: webdev, react, angular, beginners
Published: 2022-05-02 17:21:19

There are things we might skip while learning web development from scratch. 

Knowing the ins and outs of npm while learning HTML, CSS, JavaScript, and a framework is probably not a good idea. 

And that's normal.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgh30sr715u7t7nh0hvs.png)
 

We should focus on the 20% that produces 80% of the outcome rather than spending time on everything else. If you are not familiar with this concept, check out [Pareto's priciple](https://en.wikipedia.org/wiki/Pareto_principle).

However, here is a quick tip that could speed up your work when you need to check and update the npm dependencies in a project... that stuff in package.json.

Here is a quick tip to quickly check and update the npm dependencies in our project... that stuff in package.json.

## Check for outdated packages

Here is the tip: run `npm outdated` from the terminal in your project folder to see if the installed packages are outdated.

`npm outdated` is a built-in npm command and you don't have to install any additional packages for it.

You'll get something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mvzlr3fccvj4ogzw1sk.png)
 
I run `npm outdated` on some code that I am using for an [Angular tutorial](https://www.vitainbeta.org/2022/04/29/angular-tutorial-and-posts/), so the outcome for your project might be very different.

However, let's understand the color-coding because it will be the same disregarding the framework you will use.

### npm outdated color coding in simple words

**Long story short:**
- Red: you should update now.
- Yellow: there is a newer update


**Short story long:**
Despite the outcome of `npm outdated` you may want to postpone the update. Often, the choice is not black or white, especially in big and complex apps with other priorities.

Also, the [npm documentation](https://docs.npmjs.com/cli/v8/commands/npm-outdated#description) is a bit more specific on the colors:
- _Red means there's a newer version matching your semver requirements, so you should update now_.
- _Yellow indicates that there's a newer version above your semver requirements (usually new major, or new 0.x minor) so proceed with caution_.

### Wait, what's a **semver**???
Semver stands for semantic versioning.

According to [semver.org](https://semver.org/):
Given a version number MAJOR.MINOR.PATCH, the:

- MAJOR version has incompatible changes,
- MINOR version has new backward-compatible features 
- PATCH version includes backward-compatible bug fixes

**Quick Example:**
Version number: 3.10.3.

If there is a new version available and the first number in the version number is different e.g. **4**.10.3 I would expect possible incompatibilities.

If the second or third number in the new version number is different e.g. 3.10.**6** I don't expect big problems. If anything, it could be a bug fix.

This is all beautiful and nice however you might be surprised by the number of issues you might encounter "for only a small update" in more complex apps.



## Update outdated packages

If you are looking for an easy way, here you go: `npm update`.

Should you use it? It depends!

### Wild approach

Small apps updated frequently can benefit from `npm update`. You might not get any issues and you are done.

Be aware that npm update doesn't update to MAJOR versions.

Check the tips at the end of the post to see how to update all dependencies, including MAJOR version changes, with a single command.  


### Stepped approach

If you are working on bigger apps that didn't get updated recently, you may want to be careful.
Let's use a stepped approach starting from:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mvzlr3fccvj4ogzw1sk.png)


1. We check the package column and find the first package in red. In my case, it is `@types/jasmine`.  
2. Under the "Current" column, we see that the current version of `@types/jasmine` is 3.10.3. 
3. Under the "Wanted" column we see that the wanted version is 3.10.6. 
4. Under the "Latest" column we have 4.0.3.

#### What do "wanted" and "latest" mean? 

- **Wanted**: the highest version of the package that can be fetched according to what **you** declared in package.json. 
- **Latest**: the latest version available on the npm’s registry.

Let's have a look at my package.json:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rr5fhnzuutpklyg295f.png)

Notice the ~ symbol before the version number of `@types/jasmine` on line 29:

```
"@types/jasmine": "~3.10.0",
``` 

The tilde (~) symbol indicates that 
- if we run an update 
- or install the packages (e.g. when you run `npm install` after you cloned a repository), 

npm will look for the latest PATCH version (the third number in the version number e.g. 3.10.**6**) available in the npm registry and install it.

Basically, the tilde declares that "the max npm can update or install is the third number, e.g. the PATCH version". Npm must ignore any minor or major upgrades, respectively the second and the first number.

We know that the latest version of this package is 4.0.3 but that is a major version upgrade and the tilde specifies that npm will ignore that.

Let's proceed and update only `@types/jasmine` to the wanted version.
The command to update a single dependency is:

```
npm update package-name
```

in my case:

```
npm update @types/jasmine

```

the outcome:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53c370lwpdoh74wr3gvc.png)

and if I run npm outdated again:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ogjtldllncat3368mm2.png)
 
we see that the current version of `@types/jasmine` corresponds to the wanted version. Good.

Let's have another example with the `tslib` package.
This time, package.json shows:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dfmwhkwpxy9fljjzs.png)

Line 22 shows:
```
"tslib": "^2.3.0",
``` 

The caret (^) symbol indicates that 
- if we run an update 
- or install the packages (e.g. when you run `npm install` after you cloned a repository), 

npm will look for the latest MINOR and PATCH version (the second and third numbers in the version number e.g. 2.4.**0**) available in the npm registry and install it.

Basically, the caret (^) declares that "the max npm can update or install is the second and third number, e.g. the MINOR and PATCH version". Npm must ignore any major upgrades, the first number.

In other words, since the version in package.json is “^2.3.1“, it can update until version “2.x.x“, where x is the highest minor and patch version available.

The Major version number remains the same.

The command to install a new MINOR or MAJOR version of a single dependency is:

```
npm install package-name
```

in my case:

```
npm install tslib

```

Since the current version of the `tslib` package is the same as the wanted and the latest, we won't see this package in the list anymore.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6so208e3lc7hgen31kul.png)


The last thing you need to know is that if the version number has no prefix e.g. `"zone.js": "0.11.4"` it means that you are declaring the specific version number you want and nothing else.

## Summary
- `npm outdated` shows the outdated packages
- `npm update` update everything
- `npm update package-name` update a specific package to the latest PATCH version
- `npm install package-name` update a specific package to the latest version. This could even be the latest MAJOR version
- the tilde (~) declares an update to the latest PATCH
- the caret (^) declares an update to the latest MINOR version or PATCH

## Tip 1
You may want to check out a tool called [npm-check-updates](https://github.com/raineorshine/npm-check-updates). 

From the documentation on GitHub: "_npm-check-updates upgrades your package.json dependencies to the latest versions, **ignoring specified versions**_".


## Tip 2 
List of [npm commands](https://docs.npmjs.com/cli/v8/commands/npm-install)