Continuous Integration of your front-end JavaScript code using Travis-CI

Published: 2012-12-25 by Lars  pipeline

The previous post shows how to execute build steps from the command line. Usually this is all that is required for setting up a continuous integration server that will run those steps on every commit to your project. Since the sample code behind these blog posts is available on GitHub, you can easily set up continuous integration for the code using the hosted Travis-CI system.

First you need to make Travis-CI aware of who you are and what GitHub repositories you want to continuously integrate. Follow step 1 and 2 from the instructions.

Next step is to tell Travis-CI what platform your build system is running on. Here I use Node, which Travis-CI supports out of the box. You configure Travis-CI in a file in the root directory of your project, called .travis.yml. It should contain these instructions:

language: node_js
node_js:
  - 0.9

0.9 will be the version of Node that Travis-CI uses to run your builds.

For build systems based on Node, Travis-CI will run the build with the command

$ npm test

To make that command execute the grunt command you need to extend the package.json file to look like this with the scripts section added:

{
  "name": "jsdevenv",
  ...
  "scripts": {
    "test": "grunt travis"
  }
}

Finally you can add the following line to Gruntfile.js to specify what grunt tasks you want Travis-CI to run:

grunt.registerTask('travis', 'jshint');

Commit your 3 files (package.json, .travis.yml and Gruntfile.js) to GitHub and check the status on the project-specific status page on Travis-CI. For the sample code behind these blog posts, the status page is http://travis-ci.org/larsthorup/jsdevenv.

Finally you can add an icon directly to your GitHub project page by adding the following markup to README.md (adjusted to reference your own project):

[![Build Status](https://travis-ci.org/larsthorup/jsdevenv.png)](https://travis-ci.org/larsthorup/jsdevenv)

Now every time you push new code to GitHub, your project page (http://github.com/larsthorup/jsdevenv) will reflect if the automated build was successful or not, like this:

And you can click on the icon and see the detailed build output on Travis-CI. Pretty cool, ain't it?

This post is part of a series on Continuous Integration for front-end JavaScript, read the other posts in the series:

Discuss on Twitter