Bower – A Front End Package Manager Tutorial

Recently, I’ve been looking for ways to streamline and improve my workflow with frontend assets. This is the first article in a mini series, where I’ll be explaining my updated workflow with Bower and GruntJS. Part one covers Bower, a package manager for frontend assets and packages – this article is short Bower tutorial for the uninitiated.

Bower is comparable to Composer (a dependency manager for PHP), except for frontend assets. This is great news for any project as Bower allows for stress free management, tracking, finding and updating of all frontend assets for a project.

Previously, you may have manually copied in an updated version of say Twitter Bootsrap or JQuery into a skeleton project, or even have left and older version that has been blindly copied over. Even in medium sized projects, this process of manually setting up each package quickly becomes tiresome. Checking the version, downloading the package, updating references to any changed files etc. Instead, let Bower take away this work.

A Bower Tutorial – Why Use Bower for Frontend Assets Management

• Using Bower really isn’t hard – it’s the simplest and quickest way to get packages that a project requires
• You can specific versions of a particular frontend resource for all my projects
• All client side dependencies can be represented via a single and portable bower.json file. All packages used in a particular project are instantly visible
• Assists working offline – all files are stored in a directory of your choice
• Updating assets and their dependencies are a simple case of running a quick command from the terminal. For myself, Bower has completely removed pain of dealing with updates.

Installing Bower

Installing Bower is very easy. Simply install NodeJs and npm (included with the NodeJs download). Git is also required on your machine, as Bower pulls code from Git repositories. From the terminal run:

npm install -g bower

This command makes bower available system wide, for all projects. Now run from bower help to view a list of available commands.

Minimal Bower Configuration

By default, Bower will install dependencies into a directory called bower_components. To change this setting (to say the directory public/assets) add a .bowerrc file to the project root with the following information:

{
   "directory" : "public/assets"
}

Searching for & Installing Bower Packages

Now you’re ready to start using Bower to search for packages to install. Alternatively, Bower has an online package directory, which could be used instead. Personally, I favour the command line version as it’s quicker. Let’s search for the latest version of normalize.css:

bower search normalize

Bower will list matching packages, with a link to the corresponding directory. Note the package name is normalize-css. It may be useful to view basic package information plus available versions before installing:

bower info normalize-css

To install the latest version, from the terminal run

bower install normalize-css

or

bower i normalize-css

This command installs the package in the assets folder, or public/assets/normalize-css. As an alternative, it is possible to specify a git repository instead:

bower install git://github.com/necolas/normalize.css.git

As mentioned, Bower allows us to specify set versions of a package. From the terminal run:

bower list

.. to list all installed packages. From the output, the latest version of normalize-css is 3.0.1. Lets remove the installed version and use version 2.0.1 instead:

bower uninstall normalize-css
bower install normalize-css#2.0.1

Notice how a particular version (a branch in Github …) has been specified above, this may be important in your own project to ensure everything works.

Bower.json – Define Project Dependencies

Doing the latter for each package you want to install will soon become counter productive and you’ll need to remember what packages are needed. Ideally, a composer.json style file would be useful, where all our required packages are listed. Bower has it’s own, aptly named bower.json (or a file that tells Bower which packages the project requires). Use the bower uninstall normalize-css to remove normalize package before we proceed.

Run bower init to create this file (warning, an interactive shell required!), or manually create an empty bower.json however you wish. My file looks like:

{
  "name": "SampleApp",
  "version": "1.2.3",
  "dependencies": {}
}

Let’s install the latest version of JQuery and save the dependency to our bower.json file:

bower install jquery --save

The --save flag saves the packages into the project’s bower.json dependencies. Open up your bower.json and notice the JQuery dependency has been appended accordingly:

{
  "name": "SampleApp",
  "version": "1.2.3",
  "dependencies": {
    "jquery": "~2.1.1"
  }
}

As you can see, it is possible to define a list of dependencies in bower.json. Again, use the uninstall command to remove jquery so we are left with no dependencies in our bower file.

Let’s assume I’ve added a list of dependencies used in all projects, the bower.json file now looks like:

{
  "name": "SampleApp",
  "version": "1.2.3",
  "dependencies": {
    "jquery": "~2.1.1",
    "bootstrap": "latest",
    "respond": "latest",
    "html5shiv": "latest",
    "fontawesome": "latest",
    "animate-css": "latest",
    "moment": "latest",
    "chosen": "latest",
    "animate.css": "latest"
  }
}

Similarly, Github.com has a list of Bower dependencies, have a look at https://github.com/styleguide/javascript/2.0.

As you can see I have specified several dependencies either with a specific version number, or using “latest” (which is valid and simply pulls in the latest version of that particular package). To install all dependencies in one fell swoop, from the terminal:

bower install

The bower.json file is now very portable and can act as a starting point to pull in our essential frontend assets. The need to search for particular bower packages in each project is eliminated.

Deployment

I’m a huge fanboy of the excellent Laravel 4 framework and use it for nearly all my projects. You may have noticed that real projects have assets in specific locations or even split into separate folders for JavaScript and CSS. Bootstrap for example needs some setup with the downloaded Less/Sass files. Downloading all assets to a single folder isn’t ideal as Bowr has done here. Ideally, I’d like to split out packages into css and js directories and have my Less/Sass files automatically compiled into set locations when I update them. This is task beyond what Bower was intended for and, amongst other things, I’ll be building on this initial Bower tutorial and tackling this exact issue with Grunt in a future article.

Proof of Concept – Dependencies

Several times above, I’ve mentioned the fact that Bower manages dependencies automatically. As a small proof of concept, let’s see this in action. Firstly run bower list or bower l to list all installed packages:

SampleApp#1.2.3 \sites
├── animate-css#3.2.0
├── animate.css#3.2.0
├─┬ bootstrap#3.2.0
│ └── jquery#2.1.1
├── chosen#1.1.0
├── fontawesome#4.1.0
├── html5shiv#3.7.2
├── jquery#2.1.1
├── moment#2.8.2
└── respond#1.4.2

On lines 4 and 5 (highlighted), we can see that the Twitter Bootstrap package requires JQuery (version >= 1.9.0 to exact, run bower info bootstrap) – note how JQuery is indented below Bootstrap (line 5). This represents the dependency. You’d see exactly the same if JQuery UI was installed for example. JQuery would be a dependency for JQuery UI. Let’s attempt to remove JQuery:

bower uninstall jquery
bower conflict      bootstrap depends on jquery

Bower has prevented this operation because correctly, JQuery is a dependency and Twitter Bootstrap and of course won’t work without it.

What are your own thought’s on Bower – overkill, essential or just stupid? 🙂