For a long time I’ve had a CSS and JavaScript library that I’ve maintained for my personal and professional projects. The CSS included UI components, like buttons and switches, and the JavaScript were ports of all the PHP functions I had written so I have the same functions client side that I had server side.

Recently I released these libraries under the banner of a larger project, MogulMVC.

Since releasing them on GitHub I’ve been able to install them in any project by just running a git clone or git pull in my CSS or JS directory, and this makes it very easy to keep them updated, but it was still lacking something.

My JavaScript library depends on jQuery for it’s DOM manipulation and just doing a git clone or git pull didn’t insure that jQuery was also cloned into my project.

Then I discovered Bower, a frontend package manager.

If you have ever worked with Node.js’s NPM or PHP’s Composer you know what package managers are.

They allow you to list project dependencies, usually in a JSON file, and then install them with one command. Updating is also a breeze with package managers.

Bower is the same concept applied to CSS and JavaScript libraries. By typing bower install mogul-js into the terminal Bower will install MogulJS in my project. If I had not installed jQuery, Bower would install it for me as jQuery is a dependency of MogulJS.

I had been using Bower for a while, but never with my own libraries, so last night I released them on Bower.

The process was incredibly simple.

  • First, make a bower.json file. To do this easily run bower init. In it you will give the name of your library and a version number. You MUST follow Semantic Versioning for the version number but the name can be nearly anything. I wasn’t sure at first but it can have capital letters in it.
  • Next, you have to commit your project with Git, and tag your commit. I’ll be honest that I wasn’t aware of tagging at the time, but the concept was very simple and the Git documentation covers it well. Update: Since I learned about tagging I’ve been using for nearly all my libraries.
  • Then, you push the commit to a publicly accessible Git repository, usually GitHub, but BitBucket would work too.
  • Last, you register your package with Bower by using the following syntax in a terminal.

    • bower register <my-package-name> <git-endpoint>

    The package name can be nearly anything you want, but just like NPM, names are given on a first come first serve bases.

    If you push up a package and decide you later want to remove it you have to contact the bower registers as there is no automated way of doing this currently.

    Update: Bower has added a way to remove packages. Read the documentation.

    I was worried about picking the right name with such permanence, but I just bit the bullet and dove in and I am very happy with my choice. I now list my libraries as dependencies of all of my projects and when I update the libraries it takes one command to update the project using them.