What Is npx and How Do I Use It?

If you’ve never used npm, you’re probably unfamiliar with npx. Simply put, npx is an npm command line input command allowing you to run an arbitrary node package without specifying it in your .json file. That sentence might make sense to experienced JavaScript programmers, but it may appear unwieldy to the newcomer. Let’s examine it in detail.

What Is a Node?

A Node in JavaScript is a package that allows the program to run JavaScript scripts outside of a browser environment, allowing server-side JavaScript usage.

JavaScript was initially developed as a client-side browser language designed to dynamically manipulate HTML and CSS in web development. It also helps provide controllers and containers for multimedia, animate images, and more.

If you imagine webpages like a Matryoshka doll, JavaScript is the outermost doll. HTML is the first layer, providing the structural details of the webpage, such as defining what is and isn’t a paragraph. CSS is the second layer, providing stylistic choices like fonts and colors. JavaScript is the outer layer, performing all the dynamic changes, such as real-time updates, interactive images, and controlling media presentation.

Nodes are the packages that Node.js uses to allow programmers to use JavaScript on a server-side environment outside of the browser.

What Is npm?

It’s important to understand that npm is a software registry allowing open-source developers worldwide to share, borrow, and use JavaScript programs and packages in their projects. The acronym npm stands for “Node Package Manager.” It can adapt packages to your specific programs and projects, download standalone tools, run packages without downloading, share code, and more.

There are three main components to npm: its website, the command-line interface, and the registry. These three parts comprise the whole npm system, each with unique systemic usage within the organization.

You’ll do most of your research and discovery on the npm website. Here, you can browse the packages you can employ within your projects. If you want to use npm, you’ll make an account that you can share with others using your unique URL. You can also find others’ accounts using their URLs.

The command line interface (CLI) is where you’ll do most of your work as a programmer. It runs from a terminal and allows you to interact with the npm database.

The registry is the database itself. It contains all the meta-data surrounding the JavaScript programs users have added for others to download and use. This aspect of npm is what you access when you’re using one of the programs; when your program calls npm or npx, it references the registry.

What Is npx?

While npm is the node package manager, npx is the “Node Package Execute.” You can’t always use the “npm run” command when specifying packages through npm’s CLI. Unless you install the package and specify it in the .json file, using that command will fail to execute.

You can often use npx instead of npm run to install and run the packages you need for your program. When using npx, you can execute the package whether installed or not; if you haven’t installed it already, the program will install it when you execute it.

Using npx is an excellent choice to retrieve and execute packages your program needs as dependencies, since it calls the internet to find and install them. It’s fantastic for grabbing packages you want to try and testing them with a temporary install. It’s also suitable for packages that want to ensure they’re using the latest possible version since it installs the repository on the spot. Finally, you can use npx for packages that you expect to run only once in a program’s lifespan, such as create-react-app.

npx vs. npm: Side-by-Side Comparison

How to Use npx

You need to do the following steps to run a package using the npm run command. First, specify the local installation path of the package you want to run.

$ ./node_modules/.bin/example-package

Then you need to go to package.json and add the package to the scripts portion of the file.

{
    "name": "Example App"
    "version":  "1.0.0"
    "scripts":  {
            "package-name":  "example-package"
     }
}

Once you’ve completed those tasks, you can run the package using the following command.

$ npm run example-package

As long as you install npm 5.2.0 or later, npx comes preinstalled with it. You don’t have to install npx globally or locally — npx can run any package from the npm registry; You can check if you have npx on your system by running this command:

$ npx -v

If you don’t have npx because your npm version is too low, you can install it separately by running the following command:

$ npm install -g npx

Then you can call and execute a package using the npx command, such as the following:

$ npx create-react-app app-name

Running this command will install React and generate a React boilerplate in the path the command ran from. Once you’ve created a React environment for your app using npx, you can use the library to create your user environment. 

What Is npm exec?

Note that npx requires the programmer to set all options and flags before positional arguments. You’ll see npm exec allows you to use a double hyphen to suppress npm’s parsing of options and switches sent to the command you’re executing.

 --

Let’s take the following expression.

$ npx example-package@latest example-command --package=@npmcli/example-package

This expression will first globally download and install the latest version of “example-package” and run it with the command “command.” “–package=npmcli/example-package” tells the computer to install the @npmcli/example-package before executing example-command, designating it as the official package for example-command.

When we compare it to the same code written with npm exec instead:

$ npm exec example-package@latest example-command --package=@npmcli/example-package

Since npm exec will ignore the positional arguments, it will resolve “–package=@npmcli/example-package” first, then execute example-package with the example-command argument. Functionally, this code is the same as the following:

$ npm exec -- example-package@latest example command --package=@npmcli/example-package

What Is npx Wrap-Up

While npm is the node package manager, npx is the “Node Package Execute.” So, you can execute the package whether installed or not. If you haven’t installed it already, the program will install it for you when you execute it.

The image featured at the top of this post is ©photovibes/Shutterstock.com.