Learn Node.js : What is NPX? and What’s the Difference with NPM?

When Matob first saw npx, I thought it was typo from npm. Apparently not…

NPM and NPX are two tools that have different functions. What are the differences?

… and when should we use NPX?

Let’s discuss?

Learn Node.js : What is NPX? and What's the Difference with NPM?

NPM vs NPX

NPM stands for Node Package Manager. A text based program for Nodejs package management.

Whereas NPX is a Node Package Runner. Its function is to execute the Nodejs package.

npm-npx

NPX will execute binary files from the Nodejs package, both those that are already installed and those that are not.

Learn Node.js : What is NPX? and What's the Difference with NPM?

NPX can even help us to use certain versions of Nodejs without having to use nvm (nodejs version management), nave (nodejs vritual environment), and n (nodejs version management).

Learn Node.js : What is NPX? and What's the Difference with NPM?

NPX installation

NPX was added to NPM version 5.2.0. So, if you use this version of NPM, you don’t need to install npx.

But if your computer isn’t installed, you can install it with the command:

[sudo] npm install -g npx

Use sudo if you install Nodejs in the root directory.

How to use NPX

How to use NPX is almost the same as NPM.

Learn Node.js : What is NPX? and What's the Difference with NPM?

For a list of other options and arguments, you can see with the help of npx.

Please type the command:

npx --help

To see help.

Learn Node.js : What is NPX? and What's the Difference with NPM?

Let’s try using npx …

npx happy-birthday -u "Petani Kode"

Note, happy-birthday is the name of the package we will execute. Then -u “Petani Kode” is the argument for the happy-birthday package.

We can get this argument by reading the readme from this package on the npmjs website.

Happy-birthday package is a package that functions to display the text “Happy birthday” in various languages.

The result:

Learn Node.js : What is NPX? and What's the Difference with NPM?

When Should We Use NPX?

We can use NPX for several cases like this:

1. When You Want Execution Only Once

We might only need a nodejs package to be executed once.

Example:

Package create-react-app to create the React application project.

Then we can use the command:

npx create-react-app nama-project

2. When I Want to Execute a Script from Gist

We can use NPX to execute scripts from Gist.

Gist is a Github service for storing scripts like pastebin.

Let’s try executing the script from Gist with NPX.

I will use a script that has been prepared.

#!/usr/bin/env node

for(var i = 0; i < 10; i++){
console.log("Hello World!");
}
{
"name": "hello-world",
"version": "0.0.0",
"bin": "./hello-world.js"
}

Try typing the following command:

npx https://gist.github.com/ardianta/df9a4c8be44b5d5f4bb1b67cdd13f4ea

Then the result:

Learn Node.js : What is NPX? and What's the Difference with NPM?

3. When You Want to Use a Different Package Version

Now we are working on a project that uses a different version of pakacakge from the one installed on our computer.

Here we can use NPX to use package versions that match the project.

To determine the package version, we just need to add @ 1.2.3 after the package name. 1.2.3 is the package version that will be used.

Example:

At the moment Gulp has reached version 4.0.1, but I want to use Gulp version 3.9.0.

Then I have to type:

npx [email protected] --version

The –version argument is an argument for checking gulp versions.

Oh yes, Gulp is a build tool. You can read the Gulp tutorial here.

The result:

Learn Node.js : What is NPX? and What's the Difference with NPM?

4. When We Don’t Have Root Access

Sometimes we will find, the times when we are not given permission to install the Nodejs package globally.

For example, on a server. We are only given permission to use it as a normal user.

Then to install the Nodejs package globally there, we need root access.

But unfortunately we don’t have that access.

So this is where we can use npx.

Auto-fallback shell with NPX

Ever found it like this?

Learn Node.js : What is NPX? and What's the Difference with NPM?

We want to run the webpack command, but the command is not installed on the computer.

There I recommend to type the command:

sudo apt install webpack

This is a shell-auto fallback.

An auto-fallback shell is a command that will be done when a command is not found.

NPX has a shell-auto fallback feature. How to activate it:

For shell bash:

source <(npx --shell-auto-fallback bash)

For zsh shell:

source <(npx --shell-auto-fallback zsh)

For shell fish:

source (npx --shell-auto-fallback fish | psub)

Let’s try …

Learn Node.js : What is NPX? and What's the Difference with NPM?

First we register NPX as sehll-auto fallback on bash (because I use bash) with the command:

source <(npx --shell-auto-fallback bash)

Then I tried to execute the command [email protected] and happy-birthday.

Oh yeah, when I type in happy-birthday only …

… the auto-fallback shell doesn’t work.

This might be so as not to clash with other linux commands.

Actually, the command:

npx --shell-auto-fallback bash

Will generate a bash code for auto-fallback.

We can save this to a .bashrc file for permanent use.

Running a Server with NPX

We can also use NPX to run the server. You can try the nodejs package to create servers like nodemon, json-server, and so on.

 

The final word…

So far we are familiar with the npx function.

NPX is the nodejs package runner to execute the nodejs package. Whereas NPM is the node package manager for managing nodejs packages and projects.

If you like the article we can follow it through the Random Creative Blog Feed or subscribe to get information from us.