WittCode💻

What is npx?

By

Learn what npx is, how npx is used, npx vs npm, and how execute a package with npx.

Table of Contents 📖

What is npx?

Node package execute, or npx, is an npm package runner, meaning it executes npm packages. Npx can even execute npm packages from the npm registry, meaning we don't even need to install the package to run it with npx.

Why was npx Made?

Npx makes using CLI tools and executables hosted on npm easier to use. For example, there are CLI tool packages, such as create-react-app, that don't need to be installed and only need to be run once to get started. Npx gives us the ability to run the package without having to install it. This makes npx great for testing packages before installing them, testing out different versions of a package, and working with executable npm packages.

How to Install npx

Npx is installed automatically with npm version 5.2.0 and higher. We can check if npx is installed by running the following command.

npx -v

The argument -v is checking for the version of npx. If npx is not installed, it can be installed globally with npm by using the following command.

npm install -g npx

Initialize an npm Project

To get a hands on lesson with npx, lets create a directory called npx-demo and then turn it into an npm package with npm init.

mkdir npx-demo
cd npx-demo
npm init -y

We now have an npm project with a package.json file.

Executing Packages without npx

To better understand the usefullness of npx, lets see what it takes to execute npm packages without npx. To do this, we have to first install the package we want to execute with npm. For example, lets install create-react-app.

npm i create-react-app

When executables are installed locally with npm (without -g), they are placed inside ./node_modules/.bin. For example, we can look at the create-react-app executable in there.

cd node_modules/.bin
ls

This should give an output similar to the following.

create-react-app  envinfo  mkdirp  node-which  rimraf  semver

From above, we can see the presence of create-react-app. We can then execute the executable by just typing in ./create-react-app.

./create-react-app my-react-app

This will run the create-react-app executable and create a react app called my-react-app. Another way we could run this is by adding the executable to package.json. Add the following under scripts in package.json.

"react": "create-react-app my-react-app"

Now, we can run this executable by using the command npm run react.

npm run react

However, we can see that this seems to be a lot of steps for a package that we really just want to run once and then have nothing to do with. This is where npx comes in.

Executing Packages with npx

To skip all this installation and configuration, we can just use npx.

npx create-react-app my-react-app

Besides the simplicity, this is also nice because this command will run the create-react-app executable against the latest version of create-react-app from npm (if create-react-app is not installed locally or globally). Specifically, npx will first check whether the create-react-app command exists locally, then globally, before checking npm. It will execute it from the first place it is found.

Summary

But there we have it! Npx is a great tool that makes working with npm easier. If this article was helpful, please consider donating at the top of the page, sharing this article, and subscribing to my YouTube channel WittCode.