snapJob - Part VII : Client side javascript dependencies using Bower

Part VI of this project ("Usage of Apache Kafka to send logs to logstash and propagate application configuration changes") can be found here.


Do you know "npm" ? If you are familiar with node.js, you know it. npm is a package manager that eases the pain of finding, downloading, and updating all of your project's dependencies... All of your dependencies ? answer is : almost.
npm takes care of libraries you use in you server application. In other words, it doesn't take care of javascript dependencies you may have in the actual web pages.

Enters Bower !

It works pretty much the same way, so this tutorial will be (for once) pretty short.

Installation :

First thing you have to do, is install it. Bower is installed via npm. We will use the -g command line option to install bower :

sudo npm install -g bower

-g means we will install bower in the global repository of node.js. It means that this package will be available to any of all of our applications and from anywhere through the command line.
Why sudo ? because npm will try to install into it's own directory, which is (at least on my computer) "/usr/local/lib/node_modules". And writing to this directory requires root writes, so... sudo !

Usage :

A file named bower.json must be created in the root folder of you application.
In the case of snapJob, we choose to really separate the html files from the RESTFul API. In other words, we could make node.js serve the html files, but to serve html files, there is better that node.js. We will serve files with nginx like described in the article "http://codeisanart.blogspot.fr/2014/07/snapjob-part-v-serving-files-with-nginx.html".

So we will just create an empty folder called snapjob with only one file in it, "bower.json". Just for the taste of it, we will add two dependencies : angular and jquery :

{
    "name": "snapJob",
    "version": "0.0.1",
    "dependencies": {
        "angular": "*",
        "jquery": "*"
    }
}

Now let's open a terminal, and go to the application directory, and simply type this :

bower install

As a response, you should see something like this :

bower angular#*             not-cached git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
bower angular#*               download https://github.com/angular/bower-angular/archive/v1.2.20.tar.gz
bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
bower angular#*                extract archive.tar.gz
bower angular#*           invalid-meta angular is missing "ignore" entry in bower.json
bower angular#*               resolved git://github.com/angular/bower-angular.git#1.2.20
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.1
bower angular#*                install angular#1.2.20
bower jquery#*                 install jquery#2.1.1

What does-it means ? It simply means that bower has created a "bower_components" folder, containing all of the javascript failes you will include in your html file. In the next article, we will simply create an index.html file that will reference these javascript files as needed.

From now on, each time you want the latest angular of jquery libraries, you just have to run bower install the same way we did before.

Simple, easy, efficient...

Pretty nice, huh ? That wasn't so hard after all...

Presentation of the project can be found here.
Source code for this application can be downloaded from here.