Javascript package management using Bower.io

Bower.ioBower.io is a package manager for the web designed by Twitter and available on GitHub. Normally when you need the latest version of a Javascript librariy such as jQuery, Angular.js, etc you download the relevant library from the website and add it to your project. This though can be a bit of a laborious task each time for each project or each time a new version of the library is released.

Bower.io simplifies this allowing you to run a single simple command line tool to search, download, manage and update all of the libraries in your project. Bower.io is based upon Node.js and uses GIT so you will need to have both of these installed for it to work.

Installing Bower.io is a simple npm (Node Package Manager) command:

npm -g install bower

You can then download a library such as jQuery and Angular.js using the following commands from your project folder:

bower install jquery
bower install angular

Bower.io will download the latest stable build of jQuery and Angular.js storing them in the local folder ‘components’ or if that folder does not exist it will create and store them in ‘bower_components’. It even does dependency checking for you. You then just need to add a ‘script’ reference in your HTML file. In the future if you want to check for an update to the libraries your project brings in just type in the single command:

bower update

Bower.io also allows you to search for features, such as if you want to look for available jQuery plug-ins you can type in the following command which will find and list them for you:

bower search jquery

Since I’ve been using Bower.io I’ve found that it has certainly helped my workflow searching, downloading and updating libraries which I use for my projects. The Bower.io registry contains quite a lot of projects though from the thousands available on the internet it doesn’t contain all of them.

Personally I found the fact that it downloads components to ‘bower_components’ or ‘components’ a little awkward. For the project I was working on I preferred them in the folder ‘javascript’. Bower.io is configurable and allows you to configure directory structures, projects and repositories. Configuring Bower.io is a simple case of creating a local file ‘.bowerrc’ which is a configuration file in JSON format. You can then configure folders using a ‘.bowerrc’ file with the following contents:

{
   "directory": "javascript"
}

Bower.io contains quite a lot of documentation to help get you started and I found that I got the hang of it in now time. You can check out more information on Bower.io including check out the sources from http://www.bower.io.

Leave a Reply