NPM v/s NPX

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

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

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

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

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

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

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

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

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

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

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.