Bower is a packet manager for the web.
Because of JavaScript’s unique place as the browser of the browser it is a slightly different flavour of packet manager. Bower is built to use git and allows you to gather remote packages that you can then use in your web application. Where bower differs from others is that, unlike npm for node, it is not responsible for loading the packages into your runtime environment.
Getting Bower
Bower itself is a node package and so first you must ensure that your system has node and npm. You can see my blog post on starting with these. Now you have these on your system you can start with bower. Install Bower globally with the following command.
npm install -g bower
Bower packages
Packages can be installed directly and bower will save the them to the bower_components directory by default.
bower install <package-name>
Bower can also use a bower.json file to install packages. There is an init function that will interactively create one, providing helpful defaults for name and version.
bower init
If you are only creating a private project this file is most useful for saving dependencies. Packages can be manually added to the json file. The install command also includes a switch to automatically save installed packages
bower install <package-name> –save
In the future running bower install will automatically install all dependencies mentioned in the json file.
There are a huge number of available packages, from simple utilities to full frameworks such as ionic.
Registering a package
Running off git it is fantastically easy to create a bower package. First make sure that the bower.json file is created and contains information such as name, author and keywords. Then the package can be registered using
bower register <name> <url>
The name is the name the package will be registered under and has to be unique. The url is to a public git repository where the package is located. And that’s it.
Built on top of git creating a new release is as simple as tagging a commit in your repo and pushing it to the remote storage.
Using Bower
Registering a package is so simple that I have found it an easy way to manage code even within projects. Recently I have been writing an application to manipulate SVG images. During development I have created several useful utilities that I wanted to factor out of the main code base. Instead of storing them in separate files, but still in the main repository, and combining them using a grunt task. I have added them as bower packages. This makes them far more accessible to future projects. Most importantly this has made them available to others and helps to grow opensource code bases. Something that I can feel good about even if they may not have been used by anyone. My bower packages so far are:-
- Cumin, utilities library favouring curried functions and functional operations
- Belfry, a simple publish subscribe library returning curried functions to work with cumin
- SoVeryGroovy, convenient API for generating SVG components
- Hammerhead2, The main graphics functionality calling all the above as dependencies