Discovering Bower for Frontend Dependencies

Introduction

In my previous post on discovering Composer, I wrote about using the tool to manage PHP-based dependencies. That works well for backend requirements, but there’s also a need for managing frontend dependencies. A very popular solution these days is Bower.

About Bower

Bower is written in NodeJs, and can be installed through NPM; there is a page for it on the NodeJs Package repository. It offers, similarly to Composer, the ability to search for and download packages which are made available in a repository. Authors can create and update packages and upload them to the repository, where they can then be downloaded by anyone who wants to use them. As with Composer, the benefit for consumers is that they need not spend as much time managing dependencies as used to be the norm.

Bower is actively developed on Github.

While Composer is PHP-specific, Bower can be used with any type of web development project, regardless of the primary language in use. Bower is a developer tool, not an end-product dependency. Because of this, Bower can be used to manage frontend assets for PHP projects, or Rails, or ASP.NET, or what have you. It might seem a little odd to use a tool written in one language with a project written in another, but it’s useful and it works.

Bower is primarily command-line-driven, though there is support for the tool in code editors or IDEs, including PhpStorm. It’s also worth noting that the upcoming Visual Studio 2015 is reported to have built-in support for Bower.

As mentioned already, Bower resembles Composer in that it offers a central repository of publicly-available packages. This can be found at http://bower.io/search; the image below shows the default view, and as of this writing the tally is 27,561 packages.

Bower repository
Bower repository

The form offers a live search; that is, when typing in the search box, the results list is automatically refreshed to show current matches, without needing to submit a form. Nice for usability. I’ve recently taken an interest in using the Bourbon library for Sass (which is likely a topic for another post) so searching for bourbon yields the following:

Bower repository - Bourbon search results
Bower repository – Bourbon search results

There are two results at top; one is Bourbon itself, while the other is an add-on grid library from the same author. The blue text at left is a link to the project’s homepage; in this case it leads to Bourbon’s home on GitHub. The text itself is what is searched for when installing dependencies through Bower. Unlike Packagist, there’s no page-per-dependency on the repository – the given name is all that’s really needed.

Files

Using Bower in a project involves creation of one or two files:

  • bower.json
  • .bowerrc

bower.json is a registry for dependencies that have been downloaded and saved through Bower, similar to composer.json. This facilitates starting without having the assets already downloaded, and running a command that will download any assets listed in the file. Both files are in JSON format.

By default, assets pulled through Bower will be placed in a bower_components folder, with a subfolder per asset. The .bowerrc file, if present, contains some additional settings, including a directory option to specify the name of the components folder. Odd that these couldn’t be part of bower.json, but that’s how it is. There are numerous other configuration options that can be located in the .bowerrc file; these all have default values, so the options need be specified only if non-default values are required.

bower.json and .bowerrc (if present) should both become part of the project’s source control (if any), since with them present all specified dependencies can be re-downloaded. The components folder need not be added to source control, and should probably be added to the system’s ignore file (e.g. .hgignore, .gitignore).

Getting Started

Installation

Bower has two prerequisites which must be installed first:

Technically NPM is a prerequisite since that is the means to install Bower, but it is included with NodeJs.

With the prerequisites in place, Bower can be installed by running the following command:

npm install bower -g

The -g flag specifies that the install should be system-wide.

Initializing Bower

In a desired directory, run the following command:

bower init

The command generates a number of prompts for details. After answering the prompts, the command window will look something like this:

Bower initialization
Bower initialization

All the prompts presented include default values, so a custom value can be deferred simply by pressing Enter. Entering initial data will yield a bower.json file resembling the following:

{
  "name": "bowerexample",
  "version": "0.1.0",
  "authors": [
    "Grant Palin"
  ],
  "description": "This is an example of using Bower",
  "license": "MIT",
  "homepage": "https://grantpalin.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

With the skeleton file in place, adding dependencies is easy. The general form of the install command is:

bower install <package> --save

The --save flag instructs Bower to add the dependency to the bower.json file; without the flag, the file will not be amended.

In order to use Bourbon and its grid, I run the following commands:

bower install bourbon --save
bower install neat --save

The folder setup then resembles the following:

Bower-installed dependencies
Bower-installed dependencies

I decided to pull in a some other dependencies while at it:

  • jquery
  • normalize.css

Suppose that I then realize I need to use the latest version of jQuery that still supports older browsers. As of this writing that is jQuery v1.11.3. The command already run by default brought in the highest-version of jQuery. A specific version can be retrieved as follows:

bower install jquery#1.11.3 --save

The hash mark (#) indicates that the specific version of the dependency is to be downloaded rather than the latest version.

Have brought in some dependencies, the resulting bower.json looks like:

{
  "name": "bowerexample",
  "version": "0.1.0",
  "authors": [
    "Grant Palin"
  ],
  "description": "This is an example of using Bower",
  "license": "MIT",
  "homepage": "https://grantpalin.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bourbon": "~4.2.3",
    "neat": "~1.7.2",
    "jquery": "1.11.3",
    "normalize.css": "~3.0.3"
  }
}

Note the addition of the dependencies node, which contains key-value pairs of dependencies and their respective versions.

Bower doesn’t do anything for compiling Sass, testing scripts, or minifying files. That’s automation, and a topic for later. It does provide the facility to keep track of dependencies and versions thereof, as well as starting with a pre-existing bower.json file on a fresh machine.

The Command Line

The website has a full listing of commands, but I’ll run through some commonly-used ones below.

The following command will interactively create a bower.json file, based on input from the user.

bower init

Install a package. Use the --save flag to add the package name and version to the bower.json file.

bower install <package>

Get a list of currently installed packages as well as any updates.

bower list

Update the given package, if updates are available. The latest versions are used insofar as they match the version patterns specified in bower.json.

bower update <package>

Remove a locally installed package; use the --save flag to also remove the package from bower.json.

bower uninstall <package>

Command-specific help is available through the following:

bower help <command>

Try It

I created a source repository containing the example bower.json file. Try cloning the repo locally (or downloading it) and running bower install to see the tool at work. This demonstrates the utility that Bower provides for starting work with an existing project on a new machine, or a new user/coder getting started.

Conclusion

Using Bower greatly simplifies selecting and updating front-end dependencies for web development projects of any type. Storing the references and the corresponding versions in the bower.json file simplifies later retrieval when starting with a fresh checkout, and in turn ensures consistency between multiple persons working on the same project, or one person working across multiple machines.

The command-line interface provides a simple yet effective interface. Various editors and IDEs either have support – built-in or through extensions – for interacting with Bower without needing a separate command window.

The command-line API has a number of commands available, though a handful will be routinely used. There are numerous nuances to these commands which may be the topic of another post.