The Power of Bower

The Power of Bower

What is it?

Bower is a package manager for web applications.  I would liken it to nuget for JavaScript   It allows you to install lots of different web artefacts and keep you dependencies clean in your project.

This is especially useful with the rise of modular javascript applications. Such as Knockout.js, Backbone.js or Angular.js.  Many of these framework use tools such as underscore.js to manage dependencies   Using Bower to get the classes required for your app simplifies things your development and build processes.

Example

Installing Bower

Step 1

Install node.js which should ship with npm

Step 2

Install Bower using npm type the following in a command prompt that can access npm:

npm install bower -g

Step 3
Create a bower config file .bowerrc in the root of the website application source as follows:

Step 4
Now we need to edit the file that tells bower where to create the directories for all your dependencies:

{
"directory" : "app/scripts/vendor"
}

I am putting my files in app/scripts/vendor.

Step 5
The next step is to tell bower what the packages are required for the application.  This is done from within a component.json file.  Please see below the format for the file:

{
"name": "Charles Bikhazi Website",
"version": "1.0.0",
"dependencies": {
"jquery": null,
"backbone-amd": null,
"underscore-amd": null,
"requirejs": null,
"roundabout": "https://github.com/fredhq/roundabout.git",
"threedubmedia": "https://github.com/threedubmedia/jquery.threedubmedia.git"
}
}

As you can see the key part in this file is the dependencies section.  You can specify the short-name in here that will lookup github for the source alternatively if this is not available you can specify the github URL   The second part of the declaration allows us to specify the version of the file if required.  Specifying null gets the latest version.

Step 6
Now comes the magic :-). If everything is setup correctly all you need to is browse to the root of directory (were your bower config files live) and run

bower install

Getting a similar output as below:

This will have the affect of creating all the directories for each library and giving you all the relevant source files you need.  the beauty of this is that all you need is to modify your .json config file and re-run install and hey presto all the latest version of the libraries you need :-)

Happy Bowering!