Difference between npx and npm?

Question

I have just started learning React, and Facebook helps in simplifying the initial setup by providing the following ready-made project.

If I have to install the skeleton project I have to type npx create-react-app my-app in command-line.

I was wondering why does the Facebook in Github have npx create-react-app my-app rather than npm create-react-app my-app?

Answer 1

Introducing npx: an npm package runner

NPM - Manages packages but doesn't make life easy executing any.
NPX - A tool for executing Node packages.

NPX comes bundled with NPM version 5.2+

NPM by itself does not simply run any package. it doesn't run any package in a matter of fact. If you want to run a package using NPM, you must specify that package in your package.json file.

When executables are installed via NPM packages, NPM links to them:

1. local installs have "links" created at ./node_modules/.bin/ directory.
2. global installs have "links" created from the global bin/ directory (e.g. /usr/local/bin) on Linux or at %AppData%/npm on Windows.

Documentation you should read

---

NPM:

One might install a package locally on a certain project:

npm install some-package 

Now let's say you want NodeJS to execute that package from the command line:

$ some-package 

The above will fail. Only globally installed packages can be executed by typing their name only.

To fix this, and have it run, you must type the local path:

$ ./node_modules/.bin/some-package 

You can technically run a locally installed package by editing your packages.json file and adding that package in the scripts section:

{   "name": "whatever",   "version": "1.0.0",   "scripts": {     "some-package": "some-package"   } } 

Then run the script using npm run-script (or npm run):

npm run some-package 

---

NPX:

npx will check whether <command> exists in $PATH, or in the local project binaries, and execute it. So, for the above example, if you wish to execute the locally-installed package some-package all you need to do is type:

npx some-package 

Another major advantage of npx is the ability to execute a package which wasn't previously installed:

$ npx create-react-app my-app 

The above example will generate a react app boilerplate within the path the command had run in, and ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.

---

Use-Case Example:

npx command may be helpful in the script section of a package.json file, when it is unwanted to define a dependency which might not be commonly used or any other reason:

"scripts": {     "start": "npx [email protected]",     "serve": "npx http-server" } 

Call with: npm run serve

---

Related questions:

1. How to use package installed locally in node_modules?
2. NPM: how to source ./node_modules/.bin folder?
3. How do you run a js file using npm scripts?

Answer 2

npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials.

create-react-app is an npm package that is expected to be run only once in a project's lifecycle. Hence, it is preferred to use npx to install and run it in a single step.

As mentioned in the main page https://www.npmjs.com/package/npx, npx can run commands in the PATH or from node_modules/.bin by default.

Note: With some digging, we can find that create-react-app points to a Javascript file (possibly to /usr/lib/node_modules/create-react-app/index.js on Linux systems) that is executed within the node environment. This is simply a global tool that does some checks. The actual setup is done by react-scripts, whose latest version is installed in the project. Refer https://github.com/facebook/create-react-app for more info.