Package Management for the Browser with Bower

Bower is a package manager for the browser. Developed by Twitter, and available via npm, it means the days of manually managing your client-side JavaScript packages could soon be a thing of the past.

To install Bower you’ll need to have Node and NPM installed. You can download and install Node from nodejs.org. NPM comes bundled with each binary package, so when you install Node, NPM should automatically be installed at the same time. You’ll also need to have Git installed, as Bower uses Git endpoints to locate packages. If you don’t have Git installed, you can download it from git-scm.com/downloads. Once you’ve got Node, npm, and Git installed, all you need to do now is open up your terminal and type:

npm install bower -g

If you’re new to NPM, the -g on the end means Bower will be installed globally, meaning we can run it from anywhere in any project directory. Let’s run Bower now and pass it the --help command to see exactly what it has to offer us:

bower --help

If you’re following along, you’ll see there’s commands to install, uninstall, and update packages, list the packages you’ve currently got installed, and search for new packages. We can also get help on any particular command by passing that command to help:

bower help list

bower list simply lists the packages we’ve installed. If we run it right now, we won’t see much as we haven’t installed any packages yet. Let’s fix that by installing jQuery using the following command.

bower install jquery

When you run this, you’ll see that Bower clones the package’s Git repository, caches the package in the ~/bower directory, then copies the package to our current project’s components directory (which Bower will create if it doesn’t exist). Once downloaded, the simplest way to include jQuery in your project is via a regular <script> tag, as shown below.


<script src="components/jquery/jquery.js"></script>

Of course, you’re free to integrate Bower with your preferred choice of bundling / minification tool for more complex projects.

You’ll notice that jQuery was installed in it’s own directory, which itself contains jquery.js and a components.json file. The components.json file is much like the package.json file used in NPM modules. It stores meta data about the package, together with any dependencies that the package requires. The jQuery package doesn’t have any dependencies, but if we install a package that does have dependencies, Bower will install these at the same time. jquery-Mustache has a dependency on mustache, so let’s install that and see what happens:

bower install jquery-Mustache

You’ll see Bower download jquery-Mustache first, followed by it’s dependencies. We can verify this by looking in our components directory:

ls components
jquery  jquery-Mustache  mustache

jquery-Mustache we’d expect to see, and jQuery was already there from before, but, as you can see, Bower automatically downloaded mustache for us without us having to worry about it. If we look at the jquery-Mustache components.json file, we can see how dependencies are specified:

"dependencies": {
    "jquery": ">=1.5",
    "mustache": ">=0.4"
}

When Bower reads this, it knows it must download at least version 1.5 of jQuery, and at least version 0.4 of mustache. If you run bower list now, you’ll see that Bower lists your installed packages, with their dependencies nested underneath them.

Installing Multiple Packages

You don’t have to install your packages one at a time: you can pass a space separated list to bower install and it’ll install each package one-by-one. Let’s install a few more jQuery plugins using the following command.

bower install jquery.validation jquery.colorbox jquery.loadfeed

Uninstalling Packages

Uninstalling packages is just as easy as installing them. In this case, we use the bower uninstall command.

bower uninstall jquery.colorbox

If you mistakenly uninstall a package that is a dependency of another package, Bower will warn you you’ve removed a dependency after uninstalling it. For example, you can uninstall jQuery using the following command.

bower uninstall jquery

When you uninstall jQuery, Bower warns you that jquery.loadfeed depends on jquery. Fortunately, it’s easy enough to reinstall jQuery.

Managing Package Versions

Updating packages is pretty painless too. To update jQuery to the latest version we’d type:

bower update jquery

And, to see which versions of a package are available, we can run the bower info command:

bower info jquery

Publishing Packages

Finally, let’s have a quick look at how easy it is to publish your own packages with Bower. Simply follow these three steps:

Create your package’s component.json file
Push your package to a Git endpoint, e.g. GitHub.
Run Bower register yourpackagename git://github.com/yourusername/repositoryname replacing yourpackagename, yourusername, and repositoryname as appropriate.

That’s all there is to it. You don’t have to create an account, or setup any authentication. Package names are allocated on a first come, first served basis. So, you’ll just need to come up with a unique name for your package, and then other developers will be able to install it by running bower install yourpackagename.

Conclusion

In this article we’ve had a look at Bower, the browser package manager developed by Twitter. We’ve gone through how to install Bower via npm, how to install, update, and delete packages, and how you can publish your own packages.