{"id":1851,"date":"2023-02-09T07:58:48","date_gmt":"2023-02-09T07:58:48","guid":{"rendered":"https:\/\/matob.web.id\/news\/?p=1851"},"modified":"2023-02-09T07:58:48","modified_gmt":"2023-02-09T07:58:48","slug":"learn-node-js-what-is-npx-and-whats-the-difference-with-npm","status":"publish","type":"post","link":"https:\/\/matob.web.id\/news\/learn-node-js-what-is-npx-and-whats-the-difference-with-npm\/","title":{"rendered":"Learn Node.js : What is NPX? and What’s the Difference with NPM?"},"content":{"rendered":"

When Matob<\/a> first saw npx<\/span>, I thought it was typo from npm<\/span>. Apparently not\u2026<\/p>\n

NPM and NPX are two tools that have different functions. What are the differences?<\/p>\n

… and when should we use NPX?<\/p>\n

Let’s discuss?<\/p>\n

\"\"<\/p>\n

NPM vs NPX<\/h2>\n

NPM stands for Node Package Manager<\/em>. A text based program for Nodejs package management.<\/p>\n

Whereas NPX is a Node Package Runner<\/em>. Its function is to execute the Nodejs package.<\/p>\n

\"npm-npx\"<\/p>\n

NPX will execute binary files from the Nodejs package, both those that are already installed and those that are not.<\/p>\n

\"\"<\/p>\n

NPX can even help us to use certain versions of Nodejs without having to use nvm<\/span> (nodejs version management), nave<\/span> (nodejs vritual environment), and n<\/span> (nodejs version management).<\/p>\n

\"\"<\/p>\n

NPX installation<\/h2>\n

NPX was added to NPM version 5.2.0. So, if you use this version of NPM, you don’t need to install npx.<\/p>\n

But if your computer isn’t installed, you can install it with the command:<\/p>\n

[sudo] npm install -g npx<\/pre>\n
Use sudo<\/span> if you install Nodejs in the root directory.<\/p>\n
How to use NPX<\/h2>\n
How to use NPX is almost the same as NPM.<\/p>\n
\"\"<\/p>\n
For a list of other options and arguments, you can see with the help of npx<\/span>.<\/p>\n
Please type the command:<\/p>\n
npx --help<\/pre>\n
To see help.<\/p>\n
\"\"<\/p>\n
Let’s try using npx …<\/p>\n
npx happy-birthday -u \"Petani Kode\"<\/pre>\n
Note, happy-birthday<\/span> is the name of the package we will execute. Then -u “Petani Kode”<\/span> is the argument for the happy-birthday package.<\/p>\n
We can get this argument by reading the readme from this package on the npmjs website<\/a>.<\/p>\n
Happy-birthday<\/span> package is a package that functions to display the text “Happy birthday”<\/span> in various languages.<\/p>\n
The result:<\/p>\n
\"\"<\/p>\n
When Should We Use NPX?<\/h2>\n
We can use NPX for several cases like this:<\/p>\n
1. When You Want Execution Only Once<\/h3>\n
We might only need a nodejs package to be executed once.<\/p>\n
Example:<\/p>\n
Package create-react-app<\/span> to create the React application project.<\/p>\n
Then we can use the command:<\/p>\n
npx create-react-app nama-project<\/pre>\n
2. When I Want to Execute a Script from Gist<\/h3>\n
We can use NPX to execute scripts from Gist<\/span>.<\/p>\n
Gist is a Github service for storing scripts like pastebin<\/span>.<\/p>\n
Let’s try executing the script from Gist with NPX.<\/p>\n
I will use a script that has been prepared<\/a><\/span>.<\/p>\n
#!\/usr\/bin\/env node\r\n\r\nfor(var i = 0; i < 10; i++){\r\nconsole.log(\"Hello World!\");\r\n}<\/pre>\n
{\r\n\"name\": \"hello-world\",\r\n\"version\": \"0.0.0\",\r\n\"bin\": \".\/hello-world.js\"\r\n}<\/pre>\n
Try typing the following command:<\/p>\n
npx https:\/\/gist.github.com\/ardianta\/df9a4c8be44b5d5f4bb1b67cdd13f4ea<\/pre>\n
Then the result:<\/p>\n
\"\"<\/p>\n
3. When You Want to Use a Different Package Version<\/h3>\n
Now we are working on a project that uses a different version of pakacakge from the one installed on our computer.<\/p>\n
Here we can use NPX to use package versions that match the project.<\/p>\n
To determine the package version, we just need to add @ 1.2.3<\/span> after the package name. 1.2.3<\/span> is the package version that will be used.<\/p>\n
Example:<\/p>\n
At the moment Gulp<\/span> has reached version 4.0.1,<\/span> but I want to use Gulp<\/span> version 3.9.0.<\/span><\/p>\n
Then I have to type:<\/p>\n
npx gulp@3.9.0 --version<\/pre>\n
The –version argument is an argument for checking gulp versions.<\/p>\n
Oh yes, Gulp<\/span> is a build tool. You can read the Gulp tutorial here.<\/p>\n
The result:<\/p>\n
\"\"<\/p>\n
4. When We Don’t Have Root Access<\/h3>\n
Sometimes we will find, the times when we are not given permission to install the Nodejs package globally.<\/p>\n
For example, on a server. We are only given permission to use it as a normal user.<\/p>\n
Then to install the Nodejs package globally there, we need root access.<\/p>\n
But unfortunately we don’t have that access.<\/p>\n
So this is where we can use npx<\/span>.<\/p>\n
Auto-fallback shell with NPX<\/h2>\n
Ever found it like this?<\/p>\n
\"\"<\/p>\n
We want to run the webpack<\/span> command, but the command is not installed on the computer.<\/p>\n
There I recommend to type the command:<\/p>\n
sudo apt install webpack<\/pre>\n
This is a shell-auto fallback.<\/p>\n
An auto-fallback shell is a command that will be done when a command is not found.<\/p>\n
NPX has a shell-auto fallback feature. How to activate it:<\/p>\n
For shell bash<\/span>:<\/p>\n
source <(npx --shell-auto-fallback bash)<\/pre>\n
For zsh shell<\/span>:<\/p>\n
source <(npx --shell-auto-fallback zsh)<\/pre>\n
For shell fish<\/span>:<\/p>\n
source (npx --shell-auto-fallback fish | psub)<\/pre>\n
Let’s try …<\/p>\n
\"\"<\/p>\n
First we register NPX as sehll-auto fallback on bash (because I use bash) with the command:<\/p>\n
source <(npx --shell-auto-fallback bash)<\/pre>\n
Then I tried to execute the command gulp@3.9.0<\/span> and happy-birthday<\/span>.<\/p>\n
Oh yeah, when I type in happy-birthday<\/span> only …<\/p>\n
… the auto-fallback shell doesn’t work.<\/p>\n
This might be so as not to clash with other linux commands.<\/p>\n
Actually, the command:<\/p>\n
npx --shell-auto-fallback bash<\/pre>\n
Will generate a bash code for auto-fallback.<\/p>\n
We can save this to a .bashrc<\/span> file for permanent use.<\/p>\n
Running a Server with NPX<\/h2>\n
We can also use NPX to run the server. You can try the nodejs package to create servers like nodemon, json-server, and so on.<\/p>\n
 <\/p>\n
\n
https:\/\/t.co\/LN4YxfJyuJ<\/a> is really cool — easily try out APIs!<\/p>\n
Also a 1-liner w\/ #npx<\/a>:<\/p>\n
`npx json-server https:\/\/t.co\/cQWmVEVjbP<\/a>` pic.twitter.com\/4EAEkt40aP<\/a><\/p>\n
\u2014 Kat March\u00e1n (@maybekatz) June 25, 2017<\/a><\/p><\/blockquote>\n
The final word\u2026<\/h2>\n
So far we are familiar with the npx<\/span> function.<\/p>\n
NPX is the nodejs package runner to execute the nodejs package. Whereas NPM is the node package manager for managing nodejs packages and projects.<\/p>\n
If you like the article we can follow it through the Random Creative<\/a> Blog Feed or subscribe to get information from us.<\/p>\n","protected":false},"excerpt":{"rendered":"
When Matob first saw npx, I thought it was typo from npm. Apparently not\u2026 NPM and NPX are two tools that have different functions. What are the differences? … and when should we use NPX? Let’s discuss? NPM vs NPX NPM stands for Node Package Manager. A text based program for Nodejs package management. Whereas […]<\/p>\n","protected":false},"author":1,"featured_media":1852,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software"],"_links":{"self":[{"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/posts\/1851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/comments?post=1851"}],"version-history":[{"count":1,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/posts\/1851\/revisions"}],"predecessor-version":[{"id":1853,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/posts\/1851\/revisions\/1853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/media\/1852"}],"wp:attachment":[{"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/media?parent=1851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/categories?post=1851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/matob.web.id\/news\/wp-json\/wp\/v2\/tags?post=1851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}