What’s So Great About Bower?

Avatar of Dan Sundy
Dan Sundy on (Updated on )

The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.

When I first started working with Bower I didn’t quite get the appeal. “Seriously?” I thought. “Now it’s too much work to download and unzip a file?” I also wasn’t super excited about cramming a bunch of new commands into a brain that was already bulging at the seams with Git, Grunt, Gulp, Jekyll, Node, etc.

There are two things I would tell that half-a-year ago version of myself. First, Bower can do a little bit more than download a file or two. Second, spending an hour learning a tool that will eliminate a repetitive task is worth it.

First Things First: What the Heck is Bower?

For the uninitiated, Bower is a package manager. It’s good at, well, managing packages—anything that you depend on an external author for. Good examples are CSS frameworks like Bootstrap, libraries like jQuery, jQuery plugins, or JavaScript frameworks like Angular. The official Bower website, Bower.io, probably says it best:

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.

Prerequisites

There are some things you’ll need before you can start working with Bower:

  • The command line. Yup, it’s a command line tool (c’mon it’s not that scary).
  • Node and NPM. Bower is a Node module so to get it you need NPM.
  • Git. Bower packages are Git repos. Bower uses Git to understand where the package is, what version it’s on—that sort of thing.
  • Global Installation. Technically you could install it in every project but you’ll probably want to have it everywhere.

To install Bower globally:

$ npm install -g bower

Note: Depending on your setup you may have to use `sudo npm install -g bower` to install it globally.

The Basics

To start, picture the directory structure for a new site. Mine usually look something like this:

|-.git/
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-gulpfile.js
|-package.json
|-README.md

There’s a `src` folder where the bulk of the development work is done. A Gulp build task will eventually prep everything and compile our optimized code into a production-ready `dist` folder.

Let’s say you want to include jQuery in this project. Usually you would go to jquery.com, find and click on the correct download link, then unzip and put the files in the right directory.

With Bower, just run the following command:

$ bower install jquery

Now a `bower_components` directory with a `jquery` folder has appeared.

|-.git/
|-bower_components/
|  |-jquery/
|
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-gulpfile.js
|-package.json
|-README.md

jQuery has made it easy to get their code by creating and registering a package for Bower. Most popular libraries and frameworks have done the same. If you want to check that the asset you want is a Bower package you can do a search:

$ bower search <package-name>

If it isn’t registered, it is still possible to grab repos with git endpoints like this:

$ bower install git://github.com/example-user/example-package.git

Advanced: If you want to get fancy, you can even install private repos that you have access to. Check out this video tutorial by Rob Dodson.

Here are some other basic commands you can use to view and manage assets that you have installed.

List all your packages:

$ bower list

Get information about any package that you have installed:

$ bower info <package-name>

Check for updates with:

$ bower check-new

Then, if there are updates, update a package:

$ bower update <package-name>

But maybe updating to the latest version broke something.

Install any specific version—old or new—with:

$ bower install <package-name>#<version>

This is definitely not an exhaustive list. If you’re interested in getting started I recommend you make a test project and work through one of the many tutorials that can be found online. This one by Treehouse is great: Getting Started with Bower. Then you can dig into all the commands by checking out Bower’s API.

Hey, But Wait, There’s More!

The small dev team I work with has been using Bower for the past year or so. While package management via the command line was great, I wasn’t sold until we started using the `bower.json` and `.bowerrc` files.

.bowerrc

The `.bowerrc` file can do a number of things, but I’ve mostly seen it used to change the name and location of the `bower_components` directory. (This made me happy because I hated having that random `bower_components` folder floating around in the project root).

Here’s what a `.bowerrc` file can look like:

{
  "directory": "src/components"
}

The directory option sends packages to a location that makes the most sense—in this case, the `src/` directory. Have a look at the new project structure:

|-.git/
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-components/
|  |  |-jquery/
|  |
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-.bowerrc
|-gulpfile.js
|-package.json
|-README.md

Notice that the `bower_components/` folder is gone and there is a `components/` folder in the `src/` directory.

Advanced: It’s a good idea to use something like gulp-usemin or grunt-usemin to take care of concatenation and minification for all of the extra styles and scripts.

So how can the `bower.json` file help us out?

bower.json

The `bower.json` file looks a lot like Node’s `package.json`. It is a manifest file that allows you to specify options. Let’s have a look at an example (which can be generated by running bower init):

{
  "name": "bower-example",
  "version": "0.0.0",
  "authors": [
    "author <[email protected]>"
  ],
  "description": "An example project using bower.",
  "main": "index.html",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "jquery": "~2.1.1"
  }
}

A lot of these options are there in case you are registering this repo as a Bower package. But see the devDependencies object at the very bottom? That object will be updated automatically if you append --save-dev to a Bower command, like this:

$ bower install jquery --save-dev

Now if fellow coder runs `bower install`, the computer will install everything from the devDependencies list in the folder specified in `.bowerrc`. Similarly, if one developer adds a package or updates a package version using --save-dev, the whole team can sync up their assets using bower install (after pulling down the latest version of the `bower.json` file).

Since all the hunting and gathering work has been eliminated with the `bower.json` file, there is no longer a need to version any of those assets. The `components/` folder can be added to the `.gitignore` file to keep your repository lean and mean.

*.DS_Store
.sass-cache
node_modules/
dist/
src/components/

Parting Shot

I was listening to an episode of my favorite web dev podcast (wink, wink) and the hosts were chatting about whether Bower was actually useful, or just a passing fad. They were wondering if its point is to make downloading easier or whether it is used for updating versions of your libraries, like ruby gems do. They talked about it being a “front-endy NPM” (I’m paraphrasing).

The beauty is, it does all of those things. You can use it for downloading and keeping code updated, but you can take it further. Bower can help you keep project libraries and frameworks in sync, or integrate it with other tools like Yeoman to trim even more time off your dev setup. Plus, you can create and register Bower packages of your own so that you can install and update them in all your projects quickly (and safely).

Oh, and regarding the question that got the discussion started: You wouldn’t use Bower to install WordPress, and WordPress shouldn’t be in your `bower_components` folder. But you could use Bower within your WordPress theme to manage external assets (just don’t load libraries like jQuery that are already included in the WordPress core).