NPM v/s NPX
Published: 2024-01-08 08:22:00

if you are a JavaScript or TypeScript Developer then you have probably used both NPM and NPX But what's actually the difference between both of them?

Well, it turns out that NPX is actually a tool that gets included in NPM version 5.2 and later. So NPX is a tool that lives within NPM.

NPM is Node Package Manager and these packages are just different node-related libraries or files and folders that get created by different developers out there Online, that we can use in our node or javaScript-based projects. So what that means is that NPM is what we use to coordinate and leverage these packages that we download, create react app is an example of that it's a tool that Facebook built for us to create a React app quickly and easily.

#NPM

We can do this with NPM and not only with NPX. NPM is an installation as well as a management environment. with NPM we can install and create react apps locally and globally, locally standing for the current folder that we are working on

`npm install create-react-app`


![Create react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmwfjhgyaiu0rishjifs.png)

what this will do is install the Create React app locally within the current folder and anything inside the folder can leverage this Create React app.

But if I wanted to use the Create React app across multiple folders and have only one version of it, Well it turns out that we can install it globally.

`npm install -g create-react-app`


![create react app globally](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9cjxoyms6trhx5qk9lf.png)

so with this, we are simply installing the latest version of the React app. We used to do this before NPX

_**Let's see NPM vs NPX using cowsay which is a package that draws out a cow that says whatever we pass into it.**_

we will do `npm install -g cowsay` and it will download the cowsay globally


![npm install -g cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikr84blboy5s2avvlkc4.png)

now i can do `cowsay hello` and it will draw a cow with hello


![cowsay hello](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxs25nhmoug8h3zqhuro.png)

if i want to check the location of the cowsay we can do is npm list cowsay this will give me the location of the installed package


![npm list cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6mk26h4382c3frwjky0.png)

it will say empty because I have installed it globally and not only in the current folder. let's check the global location of the project by `npm list -g cowsay`


![npm list -g cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qemmj31fzg268o6nij0t.png)

with NPM we see that if we want to install a package we need to download it to the disk or hard drive of our computer this could be our local project folder or globally let us go ahead and uninstall the cowsay from our computer. `npm uninstall -g cowsay`


![npm uninstall -g cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaqv1mijdmvksr7q2041.png)

#NPX

we are gonna do `npx cowsay hello` now if we run this we will see that it will first download it and it will execute it immediately


![npx cowsay hello](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgvpg4h48p5xzkqnyyz0.png)

before npx we used to download it and then run it, what NPX does is that it directly installs the required files and it executes them immediately.

now if I check for the cowsay package locally npm list cowsay it will give us empty as a result


![npm list cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzxrhyub9pplrhz5wfnw.png)

let us check for it globally it will again give us empty `npm list -g cowsay`


![npm list -g cowsay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8jqiwpozfrbbanltqq9.png)



So what this means is that it downloads the latest package and executes it immediately then it deletes it from the disk. the main advantage of it is that we do not have to clog up or disk with all of these packages, so it all comes down to using it when it is needed.