Getting started With Bower – Frontend Package Manager

Bower is a dependency manager that helps you manage the dependencies for your frontend workflow. Bower keeps track of JavaScript and CSS libraries and plugins required by your web applications and makes it easy to install, port, migrate and upgrade the libraries.
Advantages of Using Bower:
1. Keep track of all frontend dependencies
2. Easily save and upgrade dependencies
3. Easily port your application without taking care of the dependencies

Getting started with Bower

Bower is a command line utility that needs to be installed with npm. Before installing Bower make sure that npm is installed on your system.

Install Bower

$ npm install -g bower

-g will install the bower package globally in your system.

Initialize Bower in your project

$ bower init

This command will take you through a series of interactive questions that you will need to answer. Dont worry most of them are easy or you can select the deafult values. It will create bower.json at root folder of your project.

Here is the sample bower.json that it will create:

// bower.json

{
  "name": "Test Project",
  "version": "0.1.0",
  "authors": [
    "Arvind Bhardwaj <arvind@example.com>"
  ],
  "description": "My project dependencies",
  "main": "app/index.html",
  "moduleType": [
    "es6"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

bower.json has a number of options. Complete list is available here.

Install packages Using Bower

To install the libraries or plugins using bower, run the following command:

$ bower install <package>

Different ways to install packages:

# registered package
$ bower install jquery

# GitHub shorthand
$ bower install desandro/masonry

# Git endpoint
$ bower install git://github.com/user/package.git

# URL
$ bower install http://example.com/script.js

Example:

$ bower install jquery --save-dev

$ bower install bootstrap-sass-official --save-dev

$ bower install fontawesome --save-dev

By default the packages will be added to dependency node of bower.json. These packages will be used in production and will be installed every time you run bower install.
–save-dev will add the package as a development dependency in your project and make an entry in bower.json as follows:

// bower.json

{
  "name": "Grunt_Test",
  "version": "0.1.0",
  "devDependencies": {
    "jquery": "~2.1.1",
    "bootstrap-sass-official": "~3.3.1",
    "fontawesome": "~4.2.0"
  }
}

You will see that a new folder ‘bower_components’ has been created in your project and your project structure may look like this:

Now just link the JS and CSS files from bower_components in your application and you are all done.