Getting started with Bower

Nov 25, 2013

Table of contents:

1. What is Bower?
2. Installing Bower
3. Configuring Bower
4. Defining dependencies
5. Playing with Bower
6. Conclusion

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

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:

{
"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

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:

bower list

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:

bower search

You can also add the name of the package you are looking for:

bower search [<name>]

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:

bower install <package>

You can also define a specific version number:

bower install <package>#<version>

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.

bower uninstall jquery

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. All of the tutorials will be free to web, and all of the code is available on GitHub.