Type for search...
codete NPX vs NPM Key Differences 1 main 57d8988ec1
Codete Blog

NPX vs NPM – 3 Key Differences

Szymon Oleszek 467db1354e

08/11/2021 |

6 min read

Szymon Oleszek

What would the IT project look like if we wrote everything from scratch? Well… most probably, quite OK if the app is easy or you have a lot of time to spend on designing it. But when it comes to delivering things fast and with good quality in mind, additional tooling is where you should look for help. 

It’s widely known that bigger projects frequently use things that already exist and you don’t need to reinvent the wheel. Every programming language ecosystem has its own source of these ready-to-use parts. Some of them include Maven, RubyGems, or the title NPM. But can we place NPX on this list? And what is the relationship between the NPX / NPM couple? Let's see.

 

Table of contents:

  1. NPM in a nutshell
  2. What is NPX? Is it a better version of NPM?
  3. NPM vs NPX – 3 main differences
  4. NPX or NPM – which one to choose?

1. NPM in a nutshell

NPM stands for Node Package Manager and is considered to be the largest software registry. However, the registry is only one part out of three NPM consists of. NPM has its own web app for viewing and managing pieces of software that are stored in the registry - which is nothing else than a public database of JavaScript software and related metainformation. 

Those pieces of software are commonly named and called packages. In addition to this, NPM gives you the possibility to create user accounts and cooperate with others to develop public or private packages. Last, but not least, part of NPM is the Command Line Interface (CLI). NPM’s CLI gives you plenty of commands, and each of them is very well described. Oftentimes, the documentation is enriched with short but very descriptive information.

Examples of NPM commands are as follows:

  • npm init” - a command to initialize a new npm package; after the invocation, the file named package.json appears in the directory in which this command was invoked
  • npm install <package-name>” - another commonly used command that installs a package and any packages that it depends on. All of those packages can be found in the node_modules folder that should appear following the installation of the first package.
  • npx <package-name>” - npx… it’s not a mistake - npx is another command of NPM CLI that allows us to run packages without downloading.

To get to know the rest of the NPM commands and see how powerful NPM is - see the documentation.

What’s also important, is that the prerequisite to use NPM CLI in a given terminal is to have Node installed on the machine. And NPM as a Node Package Manager comes with this installation.

2. What is NPX? Is it a better version of NPM?

We already know the answer to the second question from the last example of NPM commands. We cannot think of it as being the equivalent of NPM because it is one of its commands. However, this command is a bit different than others. It comes with NPM if we have a version of NPM that is 5.2 or higher.

The NPX stands for Node Package Execute. It can also be called the npm package runner that can execute packages that you want from the npm registry without installing it locally.

A very good and descriptive example of how NPX is used and how it works is a simple project that consists of an index.html file without any package.json and node_modules. To run this project to preview the result, you can use the package called “serve” that is published on the npm registry. 

To do this, you have two ways - the first one is to initialize the new package (npm init), then install the “serve” package locally (npm install serve), and next add a new npm script in the package.json file that can invoke the “serve” script. The second one is when NPX comes to play and you don’t need to invoke all of these commands except for the “npx serve” one. 

This simple example shows that we don’t need to install packages on our machine to use them. We can just run them by invoking “npx <package_name>” and we don’t need to worry about initializing or installing something additional.

3. NPM vs NPX – 3 main differences

Now that we have definitions of both tools, let’s compare them in some crucial aspects. What is difference between NPX and NPM?

 

Difference 1: Running packages as developer tools/dependencies (e.g. ESLint, Serve, Nodemon, etc.)

[NPM] NPM itself is not a package runner. If you want to run a package by npm command you need to specify this package in package.json or install it globally and then run it.

[NPX] NPX by definition is a package runner so you can simply use it to run any executable package from the NPM registry but not only from there as NPX gives you the possibility to run gists from Github, too.

 

Difference 2: Packages as dependencies of the web/server project

[NPM] allows us to install packages locally and store them in node_modules - which, with the additional help of other tools, makes packages visible and accessible in the project.

[NPX] NPX is not a tool for installing packages. It is not the purpose of NPX.

 

Difference 3: Testing different versions of executable packages

[NPM] Testing different versions of packages by installing them first and then executing them is possible but, in comparison to NPX, can be uncomfortable and ineffective in the long run.

[NPX] NPX is a good tool to test different versions of packages. We don’t need to worry about installing different versions, again and again, we can just simply run the “npx <package-name>” and specify its version.

4. NPX or NPM – which one to choose

If you still have doubts concerning the NPM NPX use, the answer is quite simple: use both, as both are handy and necessary. NPX is a very handy add-on to NPM, and there are some things we can do by using NPX, and some things we can do by using NPM. Good example that confirms this statement is the setup of the ReactJS project through the create-react-app package. We can simply run the “npx create-react-app <name-of-app>” command which generates the whole structure of the project with the required dependencies. In the case of most of the projects that need additional packages, the latter may be installed by the “npm install <package-name>” command.

With that being said, we’ve got knowledge about what NPM and NPX are and why, in real life, we use and need both of them. We’ve learned the common use cases of both of them, as well as how the basic commands look like. NPM is a very big and complex tool. It comes with plenty of different packages that have millions of downloads but certainly not every one is worth installing.

And what are your preferences in the NPX vs NPM competition? Do you have experience with utilizing any of these tools? To you, which one is more valuable and useful?

Rated: 5.0 / 1 opinions
Szymon Oleszek 467db1354e

Szymon Oleszek

Engineer passionate about building stuff displayed in the browser window but not only. Almost like Iron Man in software development, so maybe Software Man?

Our mission is to accelerate your growth through technology

Contact us

Codete Przystalski Olechowski Śmiałek
Spółka Komandytowa

Na Zjeździe 11
30-527 Kraków

NIP (VAT-ID): PL6762460401
REGON: 122745429
KRS: 0000696869

Offices
  • Kraków

    Na Zjeździe 11
    30-527 Kraków

  • Lublin

    Wojciechowska 7E
    20-704 Lublin

  • Berlin

    Wattstraße 11
    13355 Berlin

Copyright 2022 Codete