NPX vs NPM – what are the differences?

NPX was introduced to NPM in July 2017 (in version 5.2) and since then it has been very popular. It shouldn’t be a surprise, because npx is a very powerful and useful command. Despite this, people are still often confused npx and npm commands. In this blog post, we will try to compare NPX vs NPM and understand the similarities and differences between them to help you best utilize each tool in your JavaScript projects.

NPX vs NPM – what are the differences?

In short, npm is a command used to download and manage a JavaScript package from the packages repository, while npx is a command to execute this package without installing it. Undeneah npx is looking if the package is installed globally or locally and if not, it installs the package, invokes it, and then removes it from your hard drive.

Let’s assume that you want to create some React.js application. To do this you can create some directory, for example my-awesome-app, navigate to it, and use below npm command to create some boilerplate for your app:

npm install create-react-app

This command will download create-react-app package to node_modules directory, and use it to create a boilerplate for the app. This package will be also added to dependencies in package.json file.

On other hand, you can use below npx command to just execute create-react-app in any directory, without installing it and adding it as a dependency to package.json file:

npx create-react-app my-awesome-app

The result of this command will be almost the same, but when you use npx, then create-react-app package will not be installed as a dependency.

Some other example may be great NPM package used to kill process running on specific port number. When your application is using some specific port number, for example 3000, and you closed terminal in the incorrect way, you can use kill-port package to easily kill this process. Instead of installing this package globally in your system, you can use npx command to execute this package only for this one specific task:

npx kill-port 3000

It’s simple right? And everything without installing this NPM package on your hard drive.

Why NPX was introduced?

As you probably know, NPM packages can be installed globally and added to PATH to be easily invocable through simple commands in terminal. For example, if we have installed create-react-app, instead of invoking executable commands like this:

node ./node_modules/create-react-app/index.js my-awesome-app

we can just use simple command added to our PATH:

create-react-app my-awesome-app

There are two problems with this approach. First is maintaining the package installed globally. Often, we forgot about this, and we are using outdated packages. Second is having two independent packages installed in one environment. You may have one package installed globally on your system, and second one (in a different version) installed in node_modules directory of some specific application. This may cause version conflicts. On another hand, if we install packages only in node_modules directory, then we loose possibility to easily use their executable commands in terminal.

Here npx comes to the rescue. We can take profit with simple executable commands, without installing packages globally.

npx create-react-app my-awesome-app

For what more we can use NPX?

There are several ways to use npx command, not only for executing some funny packages without installing it 🐮:

npx cowsay NerdAnswers -g

Thanks to NPX you can easily test two different versions of some packages:

npx create-react-app@4.0.3 my-awsome-app

// or

npx create-react-app@latest my-awsome-app

You can also execute code directly from GitHub repository, but you need to be very careful here, to not execute some malicious code. Below code will run Github Gist code that prints a message in the console:

npx https://gist.github.com/qiqqq/afc15afe0a2f18b588b6c171457aadf7

I hope I helped you understand the main differences between NPX and NPM. While both NPX and NPM are essential tools in the Node.js ecosystem, they serve different purposes. NPX is mainly used to execute packages without installing them globally, while NPM is used to manage and install packages globally or locally within a project. Understanding the differences between these two tools can help you choose the right tool for the job and streamline your development process.