Getting started with Bower

Over the last couple of weeks I’ve looked at a couple of tools to make working with front-end assets a lot easier.

First I looked at the Asset Pipeline which will automatically deal with all of your stylesheets and Javascript files in the same way that you might have already experienced in Rails projects.

Next I looked at setting up Grunt and setting up Sass using Grunt. Grunt is an automated task runner that can automate a lot of the repetitive jobs that should really just happen in the background. With it’s extensive plugin ecosystem and fast growing and engaged community, Grunt looks like it will become a very valuable front-end tool going forward.

In this final segment of the front-end mini series, I want to introduce a final piece of the stack called Bower.

What is Bower?

Bower is a package manager for front-end packages and assets.

What?! Another package manager?

Indeed! Package managers are a great thing because they allow you to easily manage, track and update all the different components in your project.

Using Composer or NPM are pretty critical for working with PHP packages or Node packages respectively, and I guess there is an argument why Bower might be overkill. However, I really like using package managers and so they have become an integral part of my toolkit.

So Bower will basically manage the front-end packages of your project. Bower doesn’t really do much more than that. In fact you can even consume Bower as part of a build stack because Bower is unopinionated and has no dependencies.

However for this article, we will simply be using Bower to pull in some additional third party front-end packages that I’m going to be using.

Installing Bower

Bower is an NPM package so it can be installed in much the same way as Grunt. If you have been following a long, I’m going to assume you already have NPM set up.

To install Bower, run the following in Terminal:

npm install -g bower  
[/bash]

Now if you run `bower help` you should be presented with a menu of help items.


## Configuring Bower

Bower basically has two things you can configure. Firstly, when Bower pulls in third part packages, it needs to save them somewhere in your project. By default this will be under a directory called `bower_components`.

Second, much like your `package.json` or your `composer.json` files, Bower allows you to define your project’s dependencies so setting up the project can be automated. By default this is set to `bower.json`.

To change these default settings, you need to create a file called `.bowerrc` in the root of your project.

Here is my `.bowerrc` file:  
```js  
{  
"directory": "./app/assets/bower"  
}  

As you can see, it is simply a json file. In my case I have to set a directory where I want Bower to save packages.

Defining dependencies

Next we need to create the bower.json file. This is basically just a list of dependencies and their version numbers that we want to pull in to the project. It is basically exactly the same as your composer.json and serves the same purpose, namely, allowing anyone to quickly install all the Bower dependencies in one go.

Here is my bower.json file:

{  
"name": "Cribbb",  
"version": "0.0.1",  
"dependencies": {  
"jquery": "~1.10.2",  
"normalize-css": "~2.1.3"  
}  
}  

As you can see I’m simply pulling in jQuery and Normalize, two packages that I use in just about every project.

Now if you run the following command in Terminal, Bower will automatically pull in those packages for you:

bower install  
[/bash]


## Playing with Bower

Bower is a really simple tool, so there isn’t a great deal to cover.

However, there are some things that you should be aware of if you want to get the most out of using Bower.

### List

If you want to see the dependencies of the project, you can run the list command in terminal:  
```bash  
bower list  
[/bash]  
This will also inform you if there are new versions of the currently installed packages.

### Search

To find Bower packages, you can use the search command:  
```bash  
bower search  
[/bash]

You can also add the name of the package you are looking for:  
```bash  
bower search [<name>]  
[/bash]

### Install

If you would rather just install a package rather than using the `bower.json` file, you can do so using the install command and pass it a package name:  
```bash  
bower install <package>  
[/bash]

You can also define a specific version number:  
```bash  
bower install <package>#<version>  
[/bash]

It’s also worth noting that you can install packages from GitHub repo’s, a local repo or even to a URL to a zip or tar file. This makes pulling in packages that are currently in development or are used as internal companies tools really easy.

### Uninstall

If you want to remove a package you can simply run the uninstall command.  
```bash  
bower uninstall jquery  
[/bash]  
This won’t automatically update your `bower.json` file so you will have to manually remove the dependency or it will be installed the next time you run the `bower install` command.


## Conclusion

I really love the movement towards choosing individual packages for use in a project. As a developer, your life is made so much better when you can easily pick and choose the components you want to use in any given project. Package managers make picking and maintaining these individual packages a breeze.

Bower might seem like overkill, and whilst it’s pretty basic at the minute, I have a feeling that it is going to become very important in the near future. In nearly every project that I pick up, there will always be out of date versions of front-end third party packages like jQuery. Bower makes keeping up with new front-end packages really easily, so hopefully it will stop the problem of using out-of-date packages.

I also really love the components movement of front-end development. A lot of packages are either getting broken down or created from scratch as much smaller individual packages that you can pick and choose from. This means instead of using all of jQuery or Compass, you could just pick the little bits that you actually need. For this reason, I think Bower is going to become really powerful very soon.

So hopefully this was a good introduction tutorial so you can start using Bower in your projects today!

This is a series of posts on building an entire Open Source application called [Cribbb](http://cribbb.com). All of the tutorials will be free to web, and all of the code is available on [GitHub](https://github.com/cribbb/cribbb).

To view a full listing of the tutorials in this series, [click here](http://culttt.com/tag/cribbb/).