Sentry Answers>Node.js>

Difference between NPM and NPX in JavaScript

Difference between NPM and NPX in JavaScript

David Y.

The ProblemJump To Solution

What’s the difference between npm and npx in JavaScript?

The Solution

The command npm is used to download JavaScript packages from Node Package Manager, and npx is used to execute JavaScript packages downloaded this way.

This command will download the NPM package create-react-app to a subdirectory of the current working directory named node_modules:

Click to Copy
npm install create-react-app

This command will execute the NPM package create-react-app with the name argument myreactapp, creating a bare-bones React app in the subdirectory myreactapp:

Click to Copy
npx create-react-app myreactapp

To understand why both of these commands are needed, we need to consider npm’s approach to dependency management.

Most non-trivial projects require third-party libraries, commonly called packages, to extend their capabilities and speed up development. These packages must be locally installed and correctly versioned. Problems can arise when multiple versions of a single package are used on the same system. For example, you may have a user-facing web application and an API running on the same server which were developed at different times by different developers and are dependent on different versions of the same package.

A variety of solutions have been attempted to solve this problem, including version-numbered installation directories, virtual environments, and containerization (most famously Docker). The npm solution to the problem is to install all packages required by a given project in that project’s directory, in a subdirectory called node_modules. NPM can install packages globally, but this is not its default behavior. Installing packages per project prevents version conflicts from arising without the need for the added complexity of environments or containers, at the cost of disk space.

However, this approach means that packages are not installed in a way that adds them to the user’s PATH and thus they cannot easily be directly invoked. This is fine for packages that are only used in project code, but presents a problem for packages containing executable commands. Without an additional tool for invoking these executables, developers would need to dig through their project’s node_modules directory to find the right file.

Enter npx. Running npx with the name of a package will search node_modules for that package and run it. Packages that are not found will first be downloaded and then run. Let’s compare the process for creating a React app without npx and with npx.

Without npx:

Click to Copy
npm install create-react-app node ./node_modules/create-react-app/index.js myreactapp

With npx:

Click to Copy
npx create-react-app myreactapp
  • Community SeriesIdentify, Trace, and Fix Endpoint Regression Issues
  • ResourcesBackend Error Monitoring 101
  • logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.