Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

The final (for now) in the “Front End Ain’t Scary” series of posts, this introduces Travis CI, the free (for open source projects) continuous integration service.

Open source your build

Travis CI is free for open source projects and a great way to get started with continuous integration if you’ve not yet reaped the immense benefits it has to offer your workflow.

This post will introduce using Travis to build your NodeJS projects.

Travis CI logo
Our friendly neighbourhood Travis

Having an automated build process gives you benefits such as…

  • Automated testing
  • Code quality checks
  • Pre branch merge checks
  • Automated deployment

…and general peace of mind that yours and other contributors’ code is in a deployable state.

My typical build process

The build process for my blog is a typical representation of what I’ll set up for any given project and is as follows:

My build process diagram
Code → GitHub → Travis → AWS

The code gets written by a developer (me), commited to GitHub, checked out by Travis and deployed to an AWS S3 bucket by the same.

The beauty of this is that I can code, commit to a feature or develop branch and once a dev build has passed, merge into my master or release branch to start the magic.

Signing up

Signing up for a Travis account is free, and easy. Just head to travis-ci.org, log in with your GitHub account, sync your projects before hitting that big old ON switch on the repository for your project.

A screenshot of the Travis 'sync projects' dashboard.
Hit that big ol' ON switch

Setting up

In your project you’ll need to create a configuration file to be be picked up by Travis and place this is the root of your project.

cd yourProject && touch .travis.yml

The basics

In your .travis.yml you'll first need the language to build your project in - for this example we’ll do JavaScript via NodeJS (the only kind I’ve really used as of yet). So add the language along with the version* to your config file:

*See the Travis docs for more detail on supported versions.
language: node_js
node_js:
- '0.10'

Now to give Travis a build task to run the easiest way is to use the scripts object to your package.json and give it a command to be run on the CI server:

scripts: {
  test: "grunt build_production"
}

…for example.

This is the equivalent of running npm test on the command line - if you want to check what it’s doing before trying it out on the build.

Commit and push to the repository and Travis will pick up the script command from package.json and execute it all on his own.

Installing Bower components

In my build process I install components from Bower before starting to run Grunt tasks.

To use Bower to retrieve your dependencies it first needs to be installed globally on the virtual machine that CI server is running on which can be achieved using the before_install hook:

before_install:
  - npm install -g bower

Now the Bower npm module is installed you are able to hook into it with Travis’ before_script hook as follows:

before_script:
  - bower install

Now your virtual environment has the components you need.

Running Grunt tasks

In my build grunt build_production is ran which in this case kicks off Grunt compiling and minifying my HTML, CSS, JavaScript and images as well as creating a humans.txt, robots.txt and an XML sitemap.

To run the Grunt tasks on the server grunt-cli also needs to be installed:

before_install:
  - npm install -g grunt-cli

Then Grunt can go about its business, calling build_production and whichever tasks you’ve set up in your Gruntfile.js.

You can use Grunt to build your application, perform code quality checks and run tests, giving you peace of mind in that you’ll receive notification when a build fails and why.

A screenshot of email notifications showing a broken build.
I’ll let you think I staged this for the purposes of this post…

Putting it all together

The .travis.yml configuration file should now look a little something like this:

language: node_js
node_js:
- '0.10'
before_install:
- npm install -g bower
- npm install -g grunt-cli
before_script:
- bower install
script:
- grunt build_production
Here I’ve used the script hook to keep all of the commands in the same configuration file but this is achieving the same as in The basics above.

Further configuration

I use Travis to automatically deploy to an Amazon S3 bucket on a successful build, and run a broken links check after that deploy. Full deployment is out of scope for this introduction but will be covered in another post.

Some additional hooks available to use with Travis are

  • after_script to be ran after the script task
  • after_success for after a successful build
  • after_failure for after a failed build
  • before_deploy for before a deployment
  • deploy to kick off a deployment task
  • after_deploy for after a deployment task

See my full .travis.yml file on GitHub.


TL;DR

An introduction to using Travis CI, this post covers starting to use a build process and using it to install Bower components and run Grunt tasks to ensure quality in a project.

See some examples of my builds here.

Image credits:
  • Arrow Right designed by Alejandro Santander from the Noun Project