What is Bower?

Bower is a package manager for web, which makes it easy to manage various static libraries (like Bootstrap) in our projects. We don’t have to worry about versions of web frameworks when using them in our projects, bower manages for us.

While working with bower, we use following two files:

  1. bower.json : Contains project and dependencies information
  2. .bowerrc : Stores bower configuration settings

Working with Bower

Let’s see how we can work with bower. Follow these steps:

Bower is a Node module, so we have to install Node.js on our system first.
Next we will install bower. For this, execute the following command from a command prompt/terminal:

npm install bower -g

Now, create a new directory for the project and name it bower-test

Next, execute following command from inside the above directory to initialize bower:

bower init

Press enter for all the questions it’s going to ask to accept defaults. At the end, it will create a file bower.json with contents similar to this:

{
   name: 'bower-test',
   authors: [
      'Ashutosh Pandey <ashutosh@somemail.com>'
   ],
   description: '',
   main: '',
   license: 'MIT',
   homepage: '',
   ignore: [
     '**/.*',
     'node_modules',
     'bower_components',
     'test',
     'tests'
   ]
}

You can edit this file later if required.

By default bower downloads all files in bower_components folder. We can change this by creating the file .bowerrc in the same directory as bower.json and adding following lines:

{ 
   "directory": "static/lib" 
}

I use to put all my static contents like JS, CSS, Images etc. in static folder. That is why I put my static dependencies like Bootstrap in static/lib folder.

To check more on bower configuration, click here

Adding Libraries

Now let us download some dependencies with bower. Execute following commands one by one:

bower install jquery --save
bower install bootstrap --save

To install a particular version, execute:

bower install jquery#1.9.1 --save

The above commands will download and save jquery and bootstrap dependencies in static/lib folder.
It will also add following lines to bower.json file:

"dependencies": {
   "bootstrap": "^3.3.7"
   "jquery": "^3.1.1"
}

The interesting thing to note here is although bower downloads latest versions of libraries, it creates the files without version name. For example, if you check the folder static/lib/jquery/dist, you will see the file jquery.js instead of jquery-3.1.1.js.

The advantage of this is that we can refer these files in our html like this:

<script type="text/javascript" src="static/lib/dist/jquery.js"></script>

and never have to change the above line even if we update jquery to another version. Isn’t it good 🙂

If you want to give the project to someone else, clear the static/lib directory. The other person just have to execute the following command to download project dependencies:

bower install

Removing Libraries

There are two ways to remove existing dependencies.

1. Execute the following command

bower uninstall jquery

2. Remove dependency manually from bower.json and execute the command:

bower prune

Note: There are two dependencies section in bower.json:

  1. dependencies : Dependencies required for production
    bower install jquery –save
  2. devDependencies: Dependencies required for development
    bower install jquery –save-dev

Updating Libraries

To update any package, execute the command:

bower update jquery

It is highly recommended to use bower for all your web projects.