Jim Yuan  Hang

Jim Yuan Hang

1579073902

NPM vs. NPX

Introduction

We all are using npm as our package manager. It is easy, right? But with the version npm@5.2.0, when you install the npm, it installs a new package called npx. Have you ever thought about what it is? And why it is needed? Are there any benefits of using npx instead of npm? I know you were trying to find the answer for the above questions and at the end, you landed up on this page. I will try to answer these questions for you. And at the end of the article, I am sure that you will get the answer to your questions. I hope you will find this post useful.

What we are going to do

We will be creating two applications and installing the mocha package in both applications so that we can run some tests.

  1. mocha-example-npm
  2. mocha-example-npx

This is image title

npm-npx

Coding with mocha-example-npm application

Let’s try to create a new folder named mocha-example-npm and open it in my favorite code editor, which is vscode. Once you open the folder, you can install mocha by running this command.

  1. npm install mocha
    Let’s create a folder called test.

  2. mkdir test
    Let’s create a file called test.js.

    code test/test.js

And paste the below sample test in it.

var assert = require('assert');  
describe('Array', function() {  
    describe('#indexOf()', function() {  
        it('should return -1 when the value is not present', function() {  
            assert.equal([1, 2, 3].indexOf(4), -1);  
        });  
    });  
});  

By seeing the code, you might have already found that the test will pass the indexOf (4) as -1. Now how do we check this? So to run the test we need to run mocha right? Let’s do it.

If you just type mocha in the terminal, you will get an error as below.

  1. mocha - The term ‘mocha’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1  
+ mocha  
+ ~~~~~  
+ CategoryInfo : ObjectNotFound: (mocha:String)[], CommandNotFoundException  
+ FullyQualifiedErrorId : CommandNotFoundException  

It is saying that mocha is not a recognized command. To fix this you have three options below.

  • Install mocha globally, so that the command will be recognized globally
npm@6.1.0 C:\Program Files(x86)\nodejs\node_modules\npm  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm i mocha -g  
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha  
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha  
+ mocha@5.2.0  
added 24 packages from 436 contributors in 3.458s  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm list -g mocha  
C:\Users\Sibeesh\AppData\Roaming\npm  
`-- mocha@5.2.0  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> mocha  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(14ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm>  
  • Use the path to mocha from node_modules

    ./node_modules/mocha/bin/mocha

  • Configure test in your package.json file as follows.

"scripts":{  
   "test":"mocha"  
}  
So that you can run _npm test_ command, and it will take the mocha files from your node_modules folder.

Coding with mocha-example-npx application

So, we have understood the problem we have using npm and we have three solutions to fix it. Now, let’s try using the npx instead of npm. Let’s open the folder and run npx mocha. The result is a warning as it is trying to find the folder test in the solution and then the tests.

  1. npx: installed 24 in 6.203s
  2. Warning: Could not find any test files matching pattern: test
  3. No test files found

Let’s create a test folder, test.js file and write a test in it.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> mkdir test  
Directory: F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx  
Mode LastWriteTime Length Name  
---- ------------- ------ ----  
d----- 20-10-201806:26 PM test  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> code test/test.js  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

Let’s run the command npx mocha now, and you will get the output as below.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha  
npx: installed 24 in 4.142s  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(12ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> 

As you can see that our tests are passed. But are you seeing any node_modules folder or any packages are being added to your solution?

What is npx?

Now, let’s just summarize what npx is. It is an npm package runner. We all know that we are installing the packages to our solution from the location called npm registry and using it. And the npx has been designed in a way that we can directly use the package from the npm registry without even installing it in our solution. You may be thinking why is it needed?

Let me give you an example, as I mentioned in the background section of this article, we can create a simple React application with the help of Create-React-App from FaceBook. And this is used only for creating the application, and once we create the application, we no longer need this. If you use npm, you will have to install this package either globally or locally before you use this, or else you will get an error.

Wouldn’t it be good, if we could just use this create-react-app package from the npm registry and create the application in our local machine? And that’s where npx comes in. With the help of npx, we can reduce the size of our node_modules and I strongly believe that this is a huge benefit.

It is smart enough to identify whether the package you are trying to get from the npm registry is already there in your machine, either globally or locally. If the package is available in your machine, it will take it from there.

What if mocha is installed globally or locally and we run the command npx mocha?

Let’s try to install mocha globally and run the command npx mocha. Before that, let’s just make sure that we haven’t installed mocha yet.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list mocha  
mocha-example-npx@1.0.0 F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx  
`-- (empty)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list -g mocha  
C:\Users\Sibeesh\AppData\Roaming\npm  
`-- (empty)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

Now, let’s just install mocha globally

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm i mocha -g  
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha  
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha  
+ mocha@5.2.0  
added 24 packages from 436 contributors in 3.033s

Try to run npx mocha again,

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(12ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

You are not getting any information related to the installation (for example npx: installed 24 in 4.142s).

Conclusion

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Source Code

The source code can be found here.

#node-js #npm #npx #react

What is GEEK

Buddha Community

NPM vs. NPX
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Jim Yuan  Hang

Jim Yuan Hang

1579073902

NPM vs. NPX

Introduction

We all are using npm as our package manager. It is easy, right? But with the version npm@5.2.0, when you install the npm, it installs a new package called npx. Have you ever thought about what it is? And why it is needed? Are there any benefits of using npx instead of npm? I know you were trying to find the answer for the above questions and at the end, you landed up on this page. I will try to answer these questions for you. And at the end of the article, I am sure that you will get the answer to your questions. I hope you will find this post useful.

What we are going to do

We will be creating two applications and installing the mocha package in both applications so that we can run some tests.

  1. mocha-example-npm
  2. mocha-example-npx

This is image title

npm-npx

Coding with mocha-example-npm application

Let’s try to create a new folder named mocha-example-npm and open it in my favorite code editor, which is vscode. Once you open the folder, you can install mocha by running this command.

  1. npm install mocha
    Let’s create a folder called test.

  2. mkdir test
    Let’s create a file called test.js.

    code test/test.js

And paste the below sample test in it.

var assert = require('assert');  
describe('Array', function() {  
    describe('#indexOf()', function() {  
        it('should return -1 when the value is not present', function() {  
            assert.equal([1, 2, 3].indexOf(4), -1);  
        });  
    });  
});  

By seeing the code, you might have already found that the test will pass the indexOf (4) as -1. Now how do we check this? So to run the test we need to run mocha right? Let’s do it.

If you just type mocha in the terminal, you will get an error as below.

  1. mocha - The term ‘mocha’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1  
+ mocha  
+ ~~~~~  
+ CategoryInfo : ObjectNotFound: (mocha:String)[], CommandNotFoundException  
+ FullyQualifiedErrorId : CommandNotFoundException  

It is saying that mocha is not a recognized command. To fix this you have three options below.

  • Install mocha globally, so that the command will be recognized globally
npm@6.1.0 C:\Program Files(x86)\nodejs\node_modules\npm  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm i mocha -g  
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha  
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha  
+ mocha@5.2.0  
added 24 packages from 436 contributors in 3.458s  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm list -g mocha  
C:\Users\Sibeesh\AppData\Roaming\npm  
`-- mocha@5.2.0  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> mocha  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(14ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm>  
  • Use the path to mocha from node_modules

    ./node_modules/mocha/bin/mocha

  • Configure test in your package.json file as follows.

"scripts":{  
   "test":"mocha"  
}  
So that you can run _npm test_ command, and it will take the mocha files from your node_modules folder.

Coding with mocha-example-npx application

So, we have understood the problem we have using npm and we have three solutions to fix it. Now, let’s try using the npx instead of npm. Let’s open the folder and run npx mocha. The result is a warning as it is trying to find the folder test in the solution and then the tests.

  1. npx: installed 24 in 6.203s
  2. Warning: Could not find any test files matching pattern: test
  3. No test files found

Let’s create a test folder, test.js file and write a test in it.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> mkdir test  
Directory: F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx  
Mode LastWriteTime Length Name  
---- ------------- ------ ----  
d----- 20-10-201806:26 PM test  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> code test/test.js  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

Let’s run the command npx mocha now, and you will get the output as below.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha  
npx: installed 24 in 4.142s  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(12ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> 

As you can see that our tests are passed. But are you seeing any node_modules folder or any packages are being added to your solution?

What is npx?

Now, let’s just summarize what npx is. It is an npm package runner. We all know that we are installing the packages to our solution from the location called npm registry and using it. And the npx has been designed in a way that we can directly use the package from the npm registry without even installing it in our solution. You may be thinking why is it needed?

Let me give you an example, as I mentioned in the background section of this article, we can create a simple React application with the help of Create-React-App from FaceBook. And this is used only for creating the application, and once we create the application, we no longer need this. If you use npm, you will have to install this package either globally or locally before you use this, or else you will get an error.

Wouldn’t it be good, if we could just use this create-react-app package from the npm registry and create the application in our local machine? And that’s where npx comes in. With the help of npx, we can reduce the size of our node_modules and I strongly believe that this is a huge benefit.

It is smart enough to identify whether the package you are trying to get from the npm registry is already there in your machine, either globally or locally. If the package is available in your machine, it will take it from there.

What if mocha is installed globally or locally and we run the command npx mocha?

Let’s try to install mocha globally and run the command npx mocha. Before that, let’s just make sure that we haven’t installed mocha yet.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list mocha  
mocha-example-npx@1.0.0 F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx  
`-- (empty)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list -g mocha  
C:\Users\Sibeesh\AppData\Roaming\npm  
`-- (empty)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

Now, let’s just install mocha globally

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm i mocha -g  
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha  
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha  
+ mocha@5.2.0  
added 24 packages from 436 contributors in 3.033s

Try to run npx mocha again,

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha  
Array  
#indexOf()  
√ should return -1 when the value is not present  
1passing(12ms)  
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>  

You are not getting any information related to the installation (for example npx: installed 24 in 4.142s).

Conclusion

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Source Code

The source code can be found here.

#node-js #npm #npx #react

NPX vs NPM: What's the Difference?

Do you always get confused between NPX and NPM? We have compiled an interesting NPX vs NPM comparison to make you understand better.

If you have ever worked around with JavaScript, then you must have probably heard about NPM, and NPX. You have may have made use of them to install something. In this article, we will demonstrate you what they are, the differences between NPX and NPM , and the many factors it entails.

Now, before diving straight into having an NPX vs NPM comparison, let us first understand each one of them individually. One of the most fascinating, prominent, and popular languages out there undoubtedly is JavaScript. So, anytime there’s a new term floating around in the programming world, it’s probably JavaScript related. NPX is one such buzz phrase.

However, you have to make sure that you do not get confused with similar stuff out there. In such a case, we would like to clarify briefly what Node and NPM are and how they differ.




#javascript #javascript #npm #npx #node

Roy E Huaman

Roy E Huaman

1579875000

npm vs npx — What’s the Difference?

If you’ve ever used Node.js, then you must have used npm for sure.

npm (node package manager) is the dependency/package manager you get out of the box when you install Node.js. It provides a way for developers to install packages both globally and locally.

Sometimes you might want to take a look at a specific package and try out some commands. But you cannot do that without installing the dependencies in your local node_modules folder.

That’s where npx comes in.

In this article, we’re going to have a look at the differences between the npm and npx and learn how to get the best from both.

First, let’s understand what npm actually is and what we can do with it.

npm the package manager

npm is a couple of things. First and foremost, it is an online repository for the publishing of open-source Node.js projects.

Second, it is a CLI tool that aids you install those packages and manage their versions and dependencies. There are hundreds of thousands of Node.js libraries and applications on npm and many more are added every day.

npm by itself doesn’t run any packages. 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 creates links to them:

  • local installs have links created at the ./node_modules/.bin/ directory
  • global installs have links created from the global bin/ directory (for example: /usr/local/bin on Linux or at %AppData%/npm on Windows)

To execute a package with npm you either have to type the local path, like this:

$ ./node_modules/.bin/your-package

or you can run a locally installed package by adding it into your package.json file in the scripts section, like this:

{
  "name": "your-application",
  "version": "1.0.0",
  "scripts": {
    "your-package": "your-package"
  }
}

Then you can run the script using npm run:

npm run your-package

You can see that running a package with plain npm requires quite a bit of ceremony.

Fortunately, this is where npx comes in handy.

npx the package runner

Since npm version 5.2.0 npx is pre-bundled with npm. So it’s pretty much a standard nowadays.

npx is also a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry.

It’s now very easy to run any sort of Node.js based executable that you would normally install via npm.

You can run the following command to see if it is already installed for your current npm version:

$ which npx

If it’s not, you can install it like this:

$ npm install -g npx

Once you make sure you have it installed, let’s see a few of the use cases that make npx extremely helpful.

Run a locally installed package easily

If you wish to execute a locally installed package, all you need to do is type:

$ npx your-package

npx will check whether <command> or <package> exists in $PATH, or in the local project binaries, and if so it will execute it.

Execute packages that are not previously installed

Another major advantage is the ability to execute a package that wasn’t previously installed.

Sometimes you just want to use some CLI tools but you don’t want to install them globally just to test them out. This means you can save some disk space and simply run them only when you need them. This also means your global variables will be less polluted.

Run code directly from GitHub

execute-gist-script-with-npx

This one’s pretty rad.

You can use npx to run any GitHub gists and repositories. Let’s focus on executing a GitHub gist because it’s easier to create one.

The most basic script consists of the main JS file and a package.json. After you’ve set up the files, all you have to do is run the npx with the link to that gist as shown in the image above.

Here you can find the code that I used for this example.

Make sure you read carefully any script before you execute it to avoid serious problems that can occur due to malicious code.

Test different package versions

npx makes it extremely easy to test different versions of a Node.js package or module. To test this awesome feature, we’re going to locally install the create-react-app package and test out an upcoming version.

This will list some dist tags near the end of the output. Dist tags provide aliases for version numbers which makes it so much easier to type.

$ npm v create-react-app
![create-react-app-dist-tags](https://www.freecodecamp.org/news/content/images/2020/01/create-react-app-dist-tags.jpg)

Let’s use npx to try out the next dist tag of create-react-app which will create the app inside a sandbox directory.

$ npx [email protected] sandbox

npx will temporarily install the next version of create-react-app, and then it’ll execute to scaffold the app and install its dependencies.

Once installed, we can navigate to the app like this:

$ cd sandbox

and then start it with this command:

$ npm start

create-react-app-npx-next-version

It will automatically open the React app in your default browser window.
Now we have an app that runs on the next version of create-react-app package!

index-page-react-app

This is how the index page of your React app should look like.

Conclusion

npx helps us avoid versioning, dependency issues and installing unnecessary packages that we just want to try out.

It also provides a clear and easy way of executing packages, commands, modules and even GitHub gists and repositories.

If you haven’t used npx before, now it is a good time to start!

This was originally posted on blog.

#node-js #npm #npx #javascript #web-development

Is npm !== npx

Recently when I started getting into React I saw a lot of people (including myself) getting confused when seeing npx instead of the very well known npm.

Some of us found it weird but didn’t give much thought, others thought it was a typo and even went into the trouble of “fixing” it by running npm instead of npx.

When I see something happening more than once, I consider it as being worth to be explained. That’s why this article, to all who had the same misunderstanding as me.
what is the NPM?
As we might already know, npm is a package manager for Node.js whose goal is automated dependency and package management.

It means that we can specify all our dependencies (packages) for a project in the package.json file and whenever someone has to install the dependencies for it, they should just run npm install and voila!

It also provides versioning i.e. it makes it possible to specify which versions of the dependencies our project depends upon, so we can, for the most part, prevent updates from breaking our project or use our preferred version.
what is NPX?
What npx does is the following:
By default, it first checks if the package that is to be executed exists in the path (i.e. in our project);
If it does, it executes it;
Else, means that the package has not been installed, so npx installs its latest version and then executes it;
This behavior, that is explained above, is the default one of npx, but it has flags that can be used to prevent it.

For example, if we run npx some-package --no-install means that we’re telling npx that it should only try to execute the package named some-package, without installing it if it has not been installed before.

Example
Let’s say we have a package named some-package and we want to execute it.
Well, without npx, to execute a package we would have to do it by running it from its local path, like this:

package.json file while become this shape.
{
“name”: “something”,
“version”: “1.0.0”,
“scripts”: {
“some-package”: “./node_modules/bin/some-package”
}
}

to run it in npm npm run some-package.
in npx .npx some-package

#npm #npx #js #javascript