Written by Fimber Elemuwa✏️
When working with JavaScript or Node.js, chances are you’ve come across npm, the Node Package Manager. It’s the go-to tool for managing packages, installing dependencies, and making sure your project stays up-to-date with the libraries it needs. But then there’s npx, another tool bundled with npm, which often sparks the question: what is the difference between the two?
At first glance, both npm and npx seem to help you interact with Node.js packages, but they serve different purposes. In this article, we’ll break down the key differences between npm and npx, show you how they work, and explore when to use each one.
Whether you’re setting up a new project, running a script, or simply curious about when to use npm versus npx, this guide will help you make sense of both tools and how they can fit into your development workflow.
What is npm?
npm stands for Node Package Manager, and it’s exactly what it sounds like — a tool for managing Node.js packages. Every time you need a new “package” for your project, you’ll turn to npm to help you install it. These packages can range from small utility functions to full-fledged frameworks and libraries.
But npm isn’t just for installing libraries. It’s also great for managing project dependencies and scripts. If you need to lock specific versions of a library to prevent breaking changes, npm has you covered. It also lets you define scripts in your package.json file to automate common tasks like testing or building your project.
How npm works
Think of npm as a digital store for software components. When you start a new Node.js project, you’ll need various tools and libraries to build it. Instead of reinventing the wheel, you can use npm to fetch and install these pre-built packages. It works by maintaining a vast online registry of packages, each with its unique name and version.
When you use the npm install command, npm downloads the specified package and its dependencies, placing them in a local directory named node_modules, a central place where all project dependencies and versions are tracked. A local installation means that the package will be available only within the project where you install it. The command looks like this:
npm install <package-name>
For example, if you want to add the cowsay library to your project, you would type:
npm install cowsay
This directory is then accessible to your project, allowing you to use the package’s functionalities in your code. A global installation makes a package available to your entire system, so you can use it for any project. This is useful for command-line tools that you want to run from anywhere.
Beyond simple package installation, npm also offers version control for each package, which lets you specify the exact versions you want. This is critical for avoiding potential issues caused by breaking changes in newer versions.
Additionally, npm provides a way to define scripts within package.json — these are commands that automate tasks like starting a server, running tests, or building a project. In your package.json, you might define a script like this:
{
"scripts": {
"start": "node index.js",
"test": "jest"
}
}
What is npx?
npx was introduced with npm v 5.2.0. While npm is all about installing and managing packages, npx is about running them.
Think of npx as a quick command runner that lets you execute Node.js packages without installing them. npx is particularly useful when you want to use a package just once or test it out without permanently adding it to your system.
Before npx, if you wanted to use a command-line tool from a package, you’d have to install it globally first. npx simplifies this by allowing you to run the tool directly from the npm registry without the need for a global installation.
How npx works
When you run a command with npx, it first checks your local node_modules directory. If the package is found there, it’s executed. If not, npx temporarily installs the package, runs it, and then removes it. This means you can use a wide range of tools without cluttering your system.
Let’s say you want to use create-react-app to start a new React project. Normally, you’d have to install it globally first:
npm install -g create-react-app
Then, you’d run:
create-react-app my-app
But with npx, you can skip the global installation and run it directly:
npx create-react-app my-app
This command downloads create-react-app, runs it, and discards it when you’re done. It’s fast and convenient and keeps your system from getting cluttered with global packages you might only use once.
If you’ve already installed a package locally in your project, npx can help you run it without needing to specify the full path to node_modules. For instance, if you’ve installed Jest locally for testing, you can run it with npx like this:
npx jest
npx automatically finds the package in your local node_modules folder and runs it, saving you time and hassle.
I think npx’s coolest feature is its ability to figure out which package or command you’re trying to run. It follows a three-step process to decide how to execute any command:
- Check locally: npx first checks if the package is installed locally in your project’s node_modules folder. If it finds the package, it runs it from there
- Check globally: If the package isn’t found locally, npx checks if it’s installed globally on your system. If it finds the package globally, it runs it
- Fetch from npm registry: Finally, if npx doesn’t find the package either locally or globally, it fetches the package from the npm registry, runs it, and then removes it after execution
N.B., by default, npx will run the latest version of a package but if you need a specific version, you can also tell it which version to run.
Key differences between npm and npx
npm and npx are both crucial tools in the Node.js ecosystem, but they have different roles on different levels:
| Feature | npm | npx |
| Purpose and functionality | Primarily used for installing packages from the npm registry and managing dependencies in Node.js projects. It helps in adding, removing, and updating packages, and maintaining package versioning | Designed to execute Node packages directly without needing to install them globally. It allows users to run packages without cluttering the global or project-specific `node_modules` |
| Package installation | Installs packages locally or globally | Executes packages temporarily without installing them permanently |
| Temporary usage | Installation with npm persists until explicitly removed. Packages remain in `node_modules` or globally installed paths | Runs packages temporarily and discards them after execution unless otherwise specified |
| Usage | `npm install ` | `npx ` |
| Script setup | Requires modifications to `package.json` to create custom scripts | No modifications needed in `package.json` for running commands |
| Execution of CLI tools | Must install CLI tools globally or locally before using them | Can run CLI tools directly from the npm registry without prior installation |
| Project setup | Typically used for project setup involving multiple dependencies and versions. | Ideal for quick project scaffolding or one-time command execution, like `create-react-app` |
| Node.js compatibility | Bundled with Node.js for general project and package management | Included with Node.js starting from v 8.2.0, streamlining the execution of packages |
Conclusion: When should you use npm vs. npx?
Deciding when to use npm or npx depends on the task and your project's needs.
You should use npm when you need to install and manage project dependencies that are crucial for development or production. Because npm ensures packages are listed in package.json, you get total control over versioning and consistency within your project. It’s also the go-to tool for running scripts defined in package.json, making it ideal for tasks like building, testing, or running your server.
On the other hand, npx is best for quick, one-off commands or testing tools without the commitment of a global installation. If you want to use a tool just once — like create-react-app for bootstrapping a React project — npx lets you run it directly without cluttering your system. It’s also handy for running locally installed packages without typing out the full path, simplifying your workflow. In short, use npm for long-term dependency management and npx for temporary tasks or running packages on the fly.
200’s only ✔️ Monitor failed and slow network requests in production
Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third party services are successful, try LogRocket.
LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.
LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.
Top comments (0)