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:
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
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.
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:
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:
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 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
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
- Push your package to a Git endpoint, e.g. GitHub.
Bower register yourpackagename git://github.com/yourusername/repositoryname replacing
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.
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.