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:
- NPM in a nutshell
- What is NPX? Is it a better version of NPM?
- NPM vs NPX – 3 main differences
- NPX or NPM – which one to choose?
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.
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.
NPX vs NPM – 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.
NPX vs 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?
