If you don’t know what the difference between Npm and Bower is and need help with installation, this tutorial is for you.
How to install
To install any of these tools you will need Node.js.
You can download the installer for your operating system from https://nodejs.org/en/download .
Once you installed Node.js, open the Terminal if you’re using Linux based operating system or Windows Shell for Windows OS and type node -v then press Enter. If you’ll get the version of Node.js that means it was installed successfully. As you can see below, my version is 6.8.1 .
Npm was also installed with Node.js . To check that, you can type npm -v in your Terminal or Windows Shell.
If you want to install Bower you can use the command npm i bower -g
The i is coming from install and -g means it will be installed globally and can be used in any project.
Once you installed it, run the command bower -v to make sure it was installed correctly.
How to use Bower
For this tutorial I created a new folder with a single html file.
In the Terminal navigate to your project folder and run the command bower install jquery . You can install any other library available on the bower website but for this tutorial I will use jQuery.
A new folder called bower_components will be created inside your project which contains the jQuery library.
All you have to do now is to add jQuery inside your html file and you’re ready to use it.
This is how it looks when you open the html file in a browser and click the button
How to use Npm
Let’s start with a new project which has a single html file. In your Terminal navigate to the project and run the command npm i jquery
Similar to Bower, in your project you will see a new folder has been created but this time it is called node_modules which contains the jQuery library
All you need to do now is to add jQuery to your html file.
What is the difference between Npm and Bower?
The main difference is that some libraries only work with Npm and run on Node.js which means we will need a module bundler such as Browserify or Webpack .
For example Cradle which is a database connector can only be installed using Npm. As you can see in the screenshot below, it is available for Npm but you won’t find it in Bower.
If you want to install it, in your Terminal run the command npm i cradle . Inside the node_modules folder from your project you will see many new folders which were created for Cradle.
The problem here is that we cannot just add it inside the html file like we did with jQuery because it does not have a distribution folder. In order to generate it we will need a module bundler. Browserify and Webpack are the main bundlers but probably there are more of them.
Because Webpack is becoming more and more popular, I will write another tutorial about how to use it.
Another difference between Npm and Bower is that Npm is used for installing Node.js modules while Bower is used for managing front-end components such as js, html, css, etc. Bower in comparison to Npm, can have multiple files which are considered the main files and it semantically considers these main files, when packaged together, a component.