UI/UX Design

Npm VS Bower and how to install

bower vs npm
If you don’t know what the difference between Npm and Bower is and need help with installation, this tutorial is for you.

Npm and Bower are both package managers for the web which gives you access to javascript libraries such as jQuery, Underscore.js, Angular, React JS and others. All dependencies for a web project can be managed by one of these tools but there are some advantages and disadvantages for both of them. If you want to read more about Bower please visit https://bower.io or https://www.npmjs.com for Npm

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 .

node js 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 .

node js version

Npm was also installed with Node.js . To check that, you can type npm -v in your Terminal or Windows Shell.npm version

If you want to install Bower you can use the command npm i bower -g

The 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.

bower sample project

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.

bower install query

A new folder called bower_components will be created inside your project which contains the jQuery library.
installed bower structure jquery

All you have to do now is to add jQuery inside your html file and you’re ready to use it.
sample jquery bower

This is how it looks when you open the html file in a browser and click the button

jquery sample click alert

 

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
npm install 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

npm install node modules

All you need to do now is to add jQuery to your html file.
npm sample project html

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.

cradle install npm

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.
cradle-html-example

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.

Add comment