Why should you prefer npx over npm
Published: 2020-02-06 06:44:51

---
title: "Why should you prefer npx over npm"
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c0la4dwk6vonr18e8w3u.png
published: true
description: "What are the benefits of npx over npm"
tags: 
---

I would like to show you, what are the benefits of `npx` over `npm`. Again, every developer has the way of working. Some would stick to `npm` but some are likely to upgrade themselves to `npx`. 

You can use `npx` and `npm` together, but for some cases, you might prefer `npx`. Here are some of the cases where you can achieve more with `npx`:

### 1. Run npm scripts easily with locally installed tools using npx

Traditionally we developers have used local dev-dependencies to run executables locally without installing them globally on any user's system for individual projects.
For Eg: If we want to run workin-hard in our project scope, we used to execute these following codes:

```shell
# to install workin-hard in local devDependencies
npm i -D workin-hard
# to execute workin-hard from local binaries
./node_modules/.bin/workin-hard --jackryan
```

Now we will see, how to accomplish same thing with npx without extra burden of writing more code:

```shell
npx workin-hard --jackryan
```

In above code, you can see that, I have removed workin-hard from devDependencies and just executed npx workin-hard --jackryan This will manage all - installing and running the command.
So from this example, I want to say that if you have locally installed devDependencies then npx will run that version, else it will install the package in your memory, somewhere, and then execute it, without adding it to any dependencies.

### 2. Running commands in one go

This is the part I love the working with npx. Let's expect that we are about to make a new React.js app using create-react-app, then in order to achieve that, we will run the code below:

```shell
npm i -g create-react-app
create-react-app my-app
```
now, if you want to try out this same scenario with npx, then you only need to run this single liner command:

```shell
npx create-react-app my-app
```


This single liner command execution is much simpler and shorter to use. While we can always use npm when we need, but to increase the productivity, npx can prove to be a worthy tool.

### 3. Run commands with multiple node.js versions

Developers who work on multiple projects have to switch their node.js versions constantly according to projects. Well, we have been using tools like version manager (for eg: `nvm`) to accomplish this.
While one of the npx options allows you to obtain the same functionality without installing a version manager. If you use  - package or -p flag, then you can specify the package name and package version to run a particular script or command in reference to that version.
There is a package named node which is already available in npm registry which contains the latest node binaries. So, we can ditch version managers by using this package to run our program by specifying node versions. The command you will be needed to run to achieve this is:

```shell
npx -p node@8 script.js
```

> Note: Please don't install node globally with npm 2. npm@2 immediately removes node, then you will not be able to use the current setup of npx and npm

this command will install node v8 and will execute script.js with that version. There are multiple options available with npx, you can see that by executing npx --help in your terminal. Some of the options are :
```shell
--userconfig           Path to user npmrc.                            
--call, -c             Execute string as if inside `npm run-script`
--shell, -s            Shell to execute the command with, if any.
--ignore-existing      Ignores existing binaries in $PATH, or in
the local project. This forces npx to do a temporary install and use the latest version.                      
--quiet, -q            Suppress output from npx itself. Subcommands will not be affected.                                  
--node-arg, -n         Extra node argument when calling a node binary.
```

### 4. Implement shell auto fallback with npx

In many cases, we don't need to use npx directly. Sometimes, we just need to call the binary directly which have been installed globally, like create-react-app my-app.

`npx` provides us an option to set our shell's auto fallback mechanism, in that case, if any user encounters command not found handler in their shell, then the shell will forward the call to npx. The catch is that, we need to use pkg@version syntax to call the binary. This save us from potentially-dangerous typo errors.

So, if we want to use this cool feature in our shell, we will need to complete these two steps:

Step 1: Configure your shell (bash, zsh, fish) for auto-fallback by executing __npx --shell-auto-fallback [shell]__, so if your shell is zsh, then run 
```shell
npx --shell-auto-fallback zsh
```

Step 2: If you want to configure it globally, then add the above line in your `~/.bashrc`, `~/.zshrc`, `~/.config/fish/config.fish` files, depending on what shell are you using.


#### 5. Run your scripts with Package Environments

I was surprised to see that, we can get environment variables using `npm run env | grep npm_`

If you'll run this command

```shell
npm run env | grep npm_
```

You'll see a bunch of `npm` environment variables on your console, similar to this.

![npm environment variables on console](https://dev-to-uploads.s3.amazonaws.com/i/jdlwxoo8nk3ng8h00azg.png)

The thing is when we run a `npm` script, we do not have access to these variables. But with `npx`, this is not the case, `npx` do have the access to package environment variables out of the box.

So, if we want to use our package environment variables while running a script, we can do it with `npx` without any extra effort.

For eg: In my case, I would like to print my package name and version with executing another script too.


```shell
npx -p cowsay \
-c 'echo "$npm_package_name@$npm_package_version" | cowsay'
```

It'll display my package name and version on the console, like this

![npx console output](https://dev-to-uploads.s3.amazonaws.com/i/ikp1h4t72tn8yyo7m46p.png)

This is just the tip of the iceberg, you can explore more than this with the package npx and environment variables


#### 6. Execute/Share your gists on the go with npx

This is one of things, I love using `npx`, that you can run the scripts using gist link in the CLI.

For Eg:

```shell
npx https://gist.github.com/ashwamegh/3f089382fb0ebb94200cbffd524b9b08
```

Run this and share the output!


Hope, I have explained it well. If you have any queries or would like to add something, you're more than welcome.