Introduction to Bower

Keep all of your web application’s front end libraries/dependencies up to date with Bower package manager. This intro shows you how to install the bower command-line utility and learn about the various commands necessary for managing your front end packages.

Installing Bower

Bower can be installed using npm, the Node package manager. If you don’t already have npm installed, head over to the Node.js website and download the relevant copy of Node.js for your system. The npm program is included with the install of Node.js.

Once you have npm installed, open up Terminal (or Command Prompt) and enter the following command:

This will install Bower globally on your system.

Now that you have Bower installed, we can start looking at the commands that are used to manage packages.

Finding Packages

There are two different ways that you can find Bower packages. Either using the online component directory, or using the command line utility.

To search for packages on the command line you use the search command. This should be followed by your search query.

For example to search for packages that contain the word ‘jquery’ you could do the following:

This command would return a whole bunch of results, some of which are displayed in the snippet below.

Each result displays the name of the package and a Git endpoint. You will need either the name or Git endpoint to install a package.

Installing Packages

To add a new Bower package to your project you use the install command. This should be passed the name of the package you wish to install.

As well as using the package name, you can also install a package by specifying one of the following:

• A Git endpoint such as git://github.com/components/jquery.git
• A path to a local Git repository.
• A shorthand endpoint like components/jquery. Bower will assume that GitHub is being used, in which case, the endpoint is the part after github.com in the repository URL.
• A URL to a zip or tar file. The files contents will be extracted automatically.

You can install a specific version of the package by adding a pound-sign (#) after the package name, followed by the version number.

Installed packages will be placed in a bower_components directory. This is created in the folder which the bower program was executed. You can change this destination using the configuration options in a .bowerrc file.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

Once installed, you can use a package by simply adding a