Bower — A package manager for the web

Sep 21, 2014

A good package manager is an essential tool for any kind of (web) development today. I've recently written a post on Composer, the package manager for PHP and in connection to that I thought it would be pretty useful with a follow-up post on Bower.

What is Bower?

Like Composer, Bower is a package manager, a manager for handling your dependencies. And while you could use Composer for handling other dependencies than PHP components for your application, you would most likely consider using Bower for your non-PHP assets. Bower currently serves 19K+ packages from it's repository and is mostly focused on Javascript and CSS assets ... you'll find most of what you are searching for, be it simply JQuery or Angular, Twitter Bootstrap, Underscore or maybe Bourbon!

How does Bower work?

Bower uses a simple JSON formatted file, called bower.json, for letting you manage you dependencies.

Once installed you simply write the package and version for your dependencies in the file like this:

"dependencies": {
    "jquery": "*",
    "fancybox": "2.1.*",
    "underscore": "1.7.0"
}

The version value next to the package name, should be used as explained on semver.org. In the above example you'll get the latest version of JQuery, Any latest minor or version 2.1 for fancybox and exactly version 1.7.0 for underscore.

Installing Bower

Bower is installed using npm (Node's package manager) — To install Bower for global use, run the following from your terminal:

npm install -g bower

Now you'll be able to access and interact with Bower from any location using your terminal — Simply type: bower

Using Bower

Now we have Bower installed, to start using it navigate to the folder in which your project exists, and type:

bower init

This will bring up the interactive setup for creating your bower.json file. For now, it doesn't really matter what you type ... actually you can simply hit enter all the way — In the end you'll have you json file.

Next you would want to add the dependencies that you would be using in your application. This is done as described above, by adding the package and version to the dependencies-property in the json file. Let's start out be simply adding the latest version of JQuery. You now have 2 options for finding your packages:

  1. You can search for packages using the terminal: bower search <package name>
  2. You can search for packages using bower.io/search/

The repository is the same, so feel free to choose what ever works for you — In the end you should end up adding the following to the json file:

"dependencies": {
    "jquery": "*"
}

Next, all you would do to install the dependency is to run:

bower install

Try adding, removing a few packages, change the versions and run the install command again :)

This is basically all you need in order to get started using Bower. I'll like to add the following 2 commands, which can be pretty handy at times.

bower info <package name>

This will retrieve various information about a package, such as the history of versions, which is the current as well as a link to the main repository for that package.

The second command is for cleaning up your bower_component folder.

bower prune

By running the command above, bower will remove any downloaded package from you project, which is not currently in your bower.json file.

Conclusion

There are many advantages of using a package manager for your assets. The most common is probably simply to have a centralized place to find them. But looking at the above, I hope it's clear how easy it now is to include a specific version of an asset, and just as easy to bump this asset up and/or down a version.

Imagine that you would be using a lot of assets in your project ... By using Bower you would only have to check that one bower.json file into your repository as all asset dependencies can be simply downloaded with only that one install command. It's a great way to keep your project repository more clean and manageable.

Comments

comments powered by Disqus