697

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?

Jim Aho
  • 6,204
  • 8
  • 45
  • 72
Paresh Maniyar
  • 7,169
  • 3
  • 8
  • 12
  • 37
    `create-react-app` is a generator. **`npx`** goes to the *internet*, downloading the package temporarily so it could execute it (*np**x***). What you get (and want) is the output, which is saved locally, where you had run the command. – vsync Sep 23 '18 at 08:58
  • Related post - [How to use package installed locally in node_modules?](https://stackoverflow.com/q/9679932/465053) – RBT Jan 08 '19 at 11:37
  • 1
    This post explains why to use npx with an example https://thecodeframework.com/how-to-use-any-npm-package-without-installing-it/ – Gagan Jul 20 '20 at 04:00

8 Answers8

855

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 gulp@3.9.1",
    "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?
vsync
  • 87,559
  • 45
  • 247
  • 317
  • 2
    So react doens't use `node.js`, right? Why is it available through 'npm' (the node package manager)? – winklerrr Mar 27 '19 at 14:57
  • 4
    Some years ago, there was [Bower](https://bower.io/) for frontend package management, but it's use drastically fell in favour of npm. Among some reasons, you could just use a single package manager for everything related to javascript, and you can use commonjs resolutions for developing frontend projects as well. You can check [this response](https://stackoverflow.com/questions/18641899) for further details. Regarding react: no, it does not directly use node, although you can use it in node too! (e.g: server side rendering) – RecuencoJones Apr 04 '19 at 15:37
  • 1
    @RecuencoJones - You commented to my answer instead of OP – vsync Apr 04 '19 at 17:35
  • 1
    Yes, I forgot to mention @winklerrr, I was addressing his comment – RecuencoJones Apr 05 '19 at 06:31
  • 2
    I think the most useful feature is NPX installing the package when it has not yet been installed. Otherwise add `./node_modules/.bin` to your $PATH and NPX is not needed. – Ron E Oct 06 '19 at 14:25
  • I felt like that first link from the creator of npx was awful. She brags about how npx replaces existing npm hacks, but does not explain what npx is actually doing when it runs. If you are not familiar with the old npm hacks, you will read that article and lose interest. – Donato Mar 19 '20 at 23:12
  • If you are npx-ing package multiple times, there is a sense to install it either locally or globally. Because every time you execute a package via npx, it gets installed run and removed. A comment from npx owner: https://github.com/zkat/npx/issues/113#issuecomment-329848019 – mashi May 05 '20 at 01:36
115

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 man 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.

vipulgupta2048
  • 99
  • 3
  • 13
Karthick
  • 1,643
  • 1
  • 11
  • 15
  • 3
    The typical use is just as often to run the version already installed locally or globally as it is to download and run a package. –  Jul 28 '18 at 03:57
100

NPM is a package manager, you can install node.js packages using NPM

NPX is a tool to execute node.js packages.

It doesn't matter whether you installed that package globally or locally. NPX will temporarily install it and run it. NPM also can run packages if you configure a package.json file and include it in the script section.

So remember this, if you want to check/run a node package quickly without installing locally or globally use NPX.

npM - Manager

npX - Execute - easy to remember

cherankrish
  • 1,564
  • 1
  • 12
  • 9
  • 5
    Can you elaborate a bit on the "temporarily". Do you mean the binaries are thrown away after executing the command, forcing npx to re-download the binaries *every* time? – Jim Aho May 15 '20 at 20:38
  • 2
    @JimAho Yes. npx will re-download the package and its dependencies every time. If performance is a factor, you might want to install the package and execute it with something other than npx. (ex.: npm run my-package) – Émile Perron Aug 01 '20 at 21:56
  • I think "temporarily" means the author of the package does not want users to know where the package is installed and then re-use it again and again, because the package might need to be upgraded during the night... – themefield Jan 01 '21 at 05:44
  • "It doesn't matter whether you installed that package globally or locally. NPX will temporarily install it and run it." I cannot reproduce on `npx` 6.14.11 e.g. in `npm install --save vaca;npx vaca`, npx does not redownload: https://stackoverflow.com/questions/49302438/why-does-npx-install-webpack-every-time#comment118815415_49302438 – Ciro Santilli新疆棉花TRUMP BAN BAD Apr 23 '21 at 19:40
53

npx runs a command of a package without installing it explicitly.

Use cases:

  • You don't want to install packages neither globally nor locally.
  • You don't have permission to install it globally.
  • Just want to test some commands.
  • Sometime, you want to have a script command (generate, convert something, ...) in package.json to execute something without installing these packages as project's dependencies.

Syntax:

npx [options] [-p|--package <package>] <command> [command-arg]...

Package is optional:

npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
      +----------------+   +--------------------------------------------+
      package (optional)   command, followed by arguments

For example:

Start a HTTP Server      : npx http-server
Lint code                : npx eslint ./src
                         # Run uglifyjs command in the package uglify-js
Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4

More about command:

Ninh Pham
  • 4,298
  • 35
  • 26
51

NPX:

From https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/:

Web developers can have dozens of projects on their development machines, and each project has its own particular set of npm-installed dependencies. A few years back, the usual advice for dealing with CLI applications like Grunt or Gulp was to install them locally in each project and also globally so they could easily be run from the command line.

But installing globally caused as many problems as it solved. Projects may depend on different versions of command line tools, and polluting the operating system with lots of development-specific CLI tools isn’t great either. Today, most developers prefer to install tools locally and leave it at that.

Local versions of tools allow developers to pull projects from GitHub without worrying about incompatibilities with globally installed versions of tools. NPM can just install local versions and you’re good to go. But project specific installations aren’t without their problems: how do you run the right version of the tool without specifying its exact location in the project or playing around with aliases?

That’s the problem npx solves. A new tool included in NPM 5.2, npx is a small utility that’s smart enough to run the right application when it’s called from within a project.

If you wanted to run the project-local version of mocha, for example, you can run npx mocha inside the project and it will do what you expect.

A useful side benefit of npx is that it will automatically install npm packages that aren’t already installed. So, as the tool’s creator Kat Marchán points out, you can run npx benny-hill without having to deal with Benny Hill polluting the global environment.

If you want to take npx for a spin, update to the most recent version of npm.

Deja
  • 3,278
  • 2
  • 18
  • 46
Venkat Ch
  • 646
  • 5
  • 13
  • 1
    If you are using nvm-windows you likely won't get npx with npm, but need to install it manually! npm i -g npx – Neil Aug 20 '18 at 08:37
  • 1
    *`NPM can just install local versions`* - not correct. `npm` can install global and it's a common practice. – vsync Aug 25 '18 at 15:00
  • 1
    A great introduction to NPX can be found here: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b, by Kat Marchán. – Jeff Hu Sep 05 '18 at 00:41
  • 1
    @vsync I believe this should be interpreted as "NPM can _simply_ install local versions and you're good to go." rather than implying a limitation. – YipYip Nov 07 '18 at 23:29
25

Simple Definition:

npm - Javascript package manager

npx - Execute npm package binaries

Yassine Qoraiche
  • 888
  • 10
  • 27
11

Here's an example of NPX in action: npx cowsay hello

If you type that into your bash terminal you'll see the result. The benefit of this is that npx has temporarily installed cowsay. There is no package pollution since cowsay is not permanently installed. This is great for one off packages where you want to avoid package pollution.

As mentioned in other answers, npx is also very useful in cases where (with npm) the package needs to be installed then configured before running. E.g. instead of using npm to install and then configure the json.package file and then call the configured run command just use npx instead. A real example: npx create-react-app my-app

Risteard
  • 258
  • 2
  • 10
  • 3
    Where does it install it, and does it remove it after the command finishes, or does it cache it for some length of time, or always check that you have the most recent version of the package? – redOctober13 Jul 24 '19 at 13:08
  • 1
    @redOctober13 there's some caching, but npx also asks npm registry for newest version every time, so caching doesn't help too much with speed. And it expands and then cleans up dependencies every time. – Simon B. May 11 '20 at 12:55
0

Here's an example of what your app creation might look like using npx

npx create-react-app project-name --template all

Charney Kaye
  • 3,030
  • 4
  • 29
  • 41
Chaurasia
  • 524
  • 4
  • 21