Why should you prefer npx over npm

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:

# 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:

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:

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:

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:

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 :

--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

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

npm run env | grep npm_

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

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.

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

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:

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.