What Is Npx? Npx vs Npm - They Are Different!
What Is Npx? Npx vs Npm - They Are Different!

In this post you will learn about such tool which is called Npx. And actually when a lot of people see how you write in console npx they think that you did a typo and you really wanted to write npm install just like they used to.

But actually Npm and Npx are two different things. What is Npx at all?

Npx is a powerful command which is available starting from npm 5.2

When I write

npm --version

I get 8.1.0. So Npx command was already there available quite some time. So I can write

npx --version

and we also get 8.1.0 but this is a completely different command.

Do we have a problem?

Now the question is "Why do we need Npx at all?".

Just to remind you we have 2 different ways to install packages. We either install packages locally with usage of package.json and requiring them inside our project or we install these packages globally.

Only after global installation we can use them directly inside console

For example let's say that I want to use lint-staged from the terminal. I have 2 different possibilities.

If we install it locally with npm install lint-staged we want use this binary directly from terminal. We must write

./node_modules/lint-staged/bin/lint-staged.js

But nobody want to write something like this this is why all people create a script in package.json.

{
  "scripts": {
    "lint-staged": "lint-staged"
  }
}

Essentially it will call a binary which is installed locally inside node_modules. Now we can simply write

yarn lint-staged

It was the best possible variant because you had a local dependency which is written inside your package.json.

Why global dependency is bad? For different projects you will install different versions of the same module. For example in other project we might have lint-staged of another version. And it might be not compatible between versions.

By installing package globally you will have versions collisions between projects

This is why it was always better to use local version.

NPX for the win

Which brings us to Npx. It allows us to omit full path to the binary file inside node_modules. We can simply write

npx lint-staged

I directly see the output No staged files found from the binary which is a correct output. It happens because we have lint-staged installed locally inside our project. Npx finds this binary inside node_modules and uses it.

Npx is just a sugar to use a binary from node_modules inside terminal without long path

Auto install

But it is not all. If you will run some command which is not installed on your machine. Then you will get a message about installation.

Auth install

After hitting yes it will be directly installed and executed. Now inside terminal we can use npx prettier and it is directly available because it is already installed.

For example to generate a new React application you can write

npx create-react-app project-name

This command will generate for us a new project. Typically in all frameworks you must install some CLI tools and only then with that tool you can generate your new project. You don't need to do that with npx because here you simply of create-react-app by using this create-react-app generator.

Npx minimizes global packages that you must install on your machine

Delete your nvm

Also previously a lot of developers used tools like nvm or n to switch versions of NodeJS on your machine. For example you have some old project with version 8 or 10 and you need to switch between that project and some newer project because you have another Node version.

You don't need to use NVM for this anymore

You can simply write here

npm node@10 -v

And as you can see we will install this Node on our machine but it will be isolated. In this case here we can write all commands just with npx node@10 and we are sure that we will use correct Node version and not the latest.

Shell scripts

And the last feature that we get from Npx is a possibility to download shell scripts and use them directly in the terminal.

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

For example here we call npx with a url to Github. After hitting enter this script will be downloaded and executed.

And actually if you are interested to learn how to build API with NestJS for real project from start to the end make sure to check NestJS - Building an API for Real Project From Scratch.