Building a Bower Package

Bower allows you to manage your front end JavaScript code. This is good. Sever side has been managed like this for years, why hasn't front end?

When you work with JavaScript across a team of developers managing your dependencies will quickly become a mess of random files. The most simple, and common, approach is to store all required JS libraries within your projects codebase and repo. You would create a /javascript/libs/ folder and manually add your jquery.1.9.1.js and your underscore.js files in whatever fashion you feel like. This works but isn't nice and it doesn't allow for much in the way of managing dependencies and conflicts. It definitely doesn't allow for splitting out production and development code either.

For server side JS code there already exists NPM with it's package.json configuration. A system used for node.js applications and package. This doesn't really suit our needs, but it's pretty close.

What we want is something specifically for front end JavaScript code (and CSS and images). Bower is the tool. It's a packaging system build on top of git by the Twitter team that allows you to specify your front end dependencies properly. Bower uses a component.json file for the same purpose as package.json for node.js. In here you specify your app's front end requirements (e.g. jQuery) as well as the required version. All these can be installed on any machine within the project directory by running bower install.

You need to have Bower installed and you can follow the start up guide provided by the Bower team on how to do that and how to use Bower as a tool within your own app. It's simple and easy to get started.

For developers who would like to use their own JS packages within a app project you'll need to do a few things to prepare your own Bower package.

Declaring the package and dependencies

You need to setup a component.json file within your repo's root that basically defines your package name, current version, main file and your own required dependencies (which Bower will install for you). It looks like this:

{
    "name": "maptack",
    "version": "0.2.2",
    "main": "./dist/maptack.min.js",
    "dependencies": {
        "jquery": "~1.7.2"
    }
}

Version tags

Make sure you have semver tags on each version's commit in your repo. If you want to start with the current version simply:

git tag -a 0.0.1 -m "v0.0.1"

For tagging older versions based on their commit (this is a good idea!) you can do the following:

git tag -a 0.0.1 -m "v0.0.1" d3t4f4a

Tags are not automatically pushed to Github (or any remote git repo) so ensure all of your tags are pushed by running git push origin master --tags which will push all existing, old or new. This will ensure Bower is able to pull the correct version of your JS package when required.

Make it public.

You are able to include any git repo by specifying the direct repo location, however if you want to add it to the public Bower package system you need to tell it what and where you are:

bower register jquery-maptack git://github.com/jimmyhillis/jquery-maptack

The package is ready for public consumption!