Category Archives: Bower

Managing Front-end Dependencies with Bower

I recently wrote 2 posts on setting up webapps with Yeoman and generators. In part of the first tutorial, I showed how Yeoman manages front-end dependencies with Bower. In this post, I will expand on Bower and how you can use it to manage dependencies in your apps.

Bower requires Node.js and can be installed via npm.

npm install -g bower

Bower is a command line tool, and the easiest way to figure out what you can do with it is get a list of commands by typing bower help. You can then get more details on a specific command by typing bower help <command> where <command> is the name of the command you want to use.

bower help
bower help <command>

You can then search for packages you want to install by name. Searching in Bower will give you a list of packages to choose from.

bower search <name>

When you want to install a package, simply type bower install <pkg> where <pkg> is the name of the package. This will install the package locally in a directory in your webapp. By default, Bower uses a directory called bower_components where the packages are installed. Bower also keeps a list of which packages are installed in a file called bower.json. However, this does not get automatically updated when you install a package. You can do that by typing bower install <pkg> --save.

bower install <pkg>
bower install <pkg> --save

You can also update packages easily  by using bower update <package>. Or you can update all installed packages at once with bower update, although it only updates packages listed in bower.json.

bower update
bower update <package>

This information should be more than enough to get you pretty familiar with using Bower to manage dependencies in your projects. Here is a list of additional commands which you may find helpful.

info - version info and a description of a package
init - automatically create a bower.json file
list - list all installed packages
uninstall - uninstall a package

While using a tool like Bower can make dependency management easy, there are a few drawbacks. Bower uses Github as a package registry. By using official repos rather than relying on someone to update the directory with new packages, Github with its massive user base takes care of that for you. However, this means that when you install a ‘package’ from Github, everything in the Github repository is installed as part of the package. While using Github maximizes the number of packages available and ensures that they will stay somewhat up to date, it’s not appealing at all to install everything in the Github repo when you may only need 1 or 2 files at most.

Another drawback is versioning. I’ve not yet found a good way to version dependencies that Bower installs. For example, when you install jQuery using Bower, the file is named jquery.js in a directory named jquery. The only way to know which version you have is to view the source. So if you wanted to rollback at some point, you would have to use version control which is not as easy as being able to switch between files.

Having a package manager for the web is a great idea, and Bower is the best implementation that I’ve seen so far. It doesn’t hurt that it works so nicely with Yeoman, but it also works just as nicely in any project. As I noted in my other post, it can be especially helpful in setting up demo projects and sample apps. Give it a try and see if Bower can help you in your projects.