What is NPM?

NPM stands for Node Package Manager. It comes pre-installed with Node.js. NPM is used to install Node.js packages to use them in our application. It makes it easier for developers to share and reuse open source code by enabling them to be installed as modules. Modules are JavaScript packages that you can install in your system using NPM. NPM helps to manage packages in your projects as dependencies.

What is NPX?

NPX is an NPM package executor. Initially, NPX was launched in July 2017. NPX was just an NPM package that could be installed like other NPM packages. Currently, NPX is bundled with NPM when you install the NPM version 5.2.0 or higher.

How does NPM treat Node.js packages?

It sets up modules such that Node.js can locate the packages and manage the dependencies of that application.

When using NPM, there are two ways to install a package into your local computer.

• Locally: When a package is installed locally, it is installed in ./node_modules/.bin/ of the local project directory.

• Globally: A global package is installed in the user environment path. /usr/local/bin for Linux and AppData%/npm for Windows.

When you install executables using NPM, Node.js links them either from the local or global path. NPM does not execute a package directly.

To use and run an NPM installed package, you should specify the package in the package.json file. The package.json file is created automatically when you initialize your Node.js project with npm init -y.

To execute a locally installed package, it should be specified in the package.json scripts block as shown below.

"scripts": {
    "your-package":  "your-package-name"
},

Then, you can execute the package with:

npm run your-package-name

On the other hand, you can type the package path in a command-line tool.

./node_modules/.bin/your-package-name

For example, let’s say you have installed Eslint, a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. 

npm install eslint

To execute the package binaries, you have to point to the package path.

./node_modules/.bin/eslint --init

You should provide the file name as the argument to execute for the ESlint package.

./node_modules/.bin/eslint yourfile.js

NPX comes in to save a couple of keystrokes to make it easier to execute Node.js modules. It makes it easier to run and interact with executables hosted in the NPM registry and to execute NPM local binaries. It also comes with many added features. 

Using NPX

With NPX, you can run and execute packages without having to install them locally or globally.

When running NPM executables with NPX, if a package is installed, NPX will search for the package binaries (either locally or globally) and then run the package.

If the package was not previously installed, NPX will not install the package in your system; instead, it will create a temporary cache that will hold the package binaries. Once the execution is over, NPX will remove the installed cache binaries from the system.

This way, your globals stays clean. This saves disk space and allows you to run a package only when it’s needed. It also gives you the advantage of testing packages without having to install them.

Let’s go over some key use cases of NPX.

Run the following command to make sure you have NPX installed using which npx.

If it’s not installed, use npm install -g NPM@latest to update NPM to the higher version above 5.2 or later, and you will have the NPX CLI tool available. You can also install NPX as a stand-alone package. Run npm i npx to install the NPX runner.

To execute a package with NPX, run:

npx your-package 

Type npx --help to get a more detailed npx commands syntax.

Output:

npx [options] <command>[@version] [command-arg]...

npx [options] [-p|--package <package>]... <command> [command-arg]...

npx [options] -c '<command-string>'

Executing installed packages

When using NPM, you have to remember to type the path of the package in the command, as explained in the Eslint case.

It is tiresome to always add the node modules path, referencing them all over your files and commands.

With NPX, you can have your local packages installed and use NPX commands (instead of adding the whole path) to execute the package binaries.

npx eslint yourfile.js

This concept is commonly seen when executing NPM scripts. For example, let’s say you are using the Sequelize package to automate data migration and seed data from your project. For that case, you will need the Sequelize CLI. You will need to know where Sequelize is installed in your project in order to execute the package binaries.

For example:

node_modules/.bin/sequelize

Using NPM is pretty easy, as you just need to edit the package.json script and add the package path.

"scripts": {
    "db:migrate" 'node_modules/.bin/sequelize db:migrate'
},

To seed the database, execute the script by running:

npm run db:migrate

This may not be that hard. However, when you use NPX, things get much simpler.

Running the command below will be enough to seed the database.

npx sequelize db:seed

Why NPX over NPM scripts?

• No need to edit the package.json file with node_modules paths.

• You can directly execute the tool from the command line.

One-off commands

Global packages are commonly used for development purposes. For that reason, you don’t need them installed all the time. NPX helps execute these packages only when you need them. This comes in handy, as many global packages are one-off commands. You only need to run them once.

For example, to create a React boilerplate app with NPM, you need to install the Create React App module and then create an app with npm init react-app my-app.

This means that when you need to create another React app in features, chances are you will create an app using the executables that you installed previously. This rules you out of newly updated features under this package unless you update the package manually.

When using NPX, you will only run the command once without installing the package.

npx create-react-app my-sample-app

With NPX, one-off commands such as this are a lot more simple and straightforward. You need to run an NPX command once, and the app is created. When you need to create another React app, you just run the NPX command repeatedly without installing the package on your local computer.

You don’t need to worry about the package updates, as NPX will always fetch the latest version available in the NPM registry. With such approaches, you avoid clogging up your globals with packages that you use once in a blue moon.