CircleCI aims to help developers “ship better code, faster” with continuous integrations and deployments. I love that CircleCI integrates so nicely with GitHub. I can see right there in a pull request whether the tests for that code are passing, and the setup is pretty simple too.
CircleCI will watch for updates to your GitHub repo by default, so you simply need to include a circle.yml file in the root of your project, and you should be good to go:
- ./node_modules/.bin/gulp ci
Your gulpfile.coffee also gets a new task:
gulp.task("ci", ['build', 'test'])
Log in to CircleCI.com, click the “Add Projects” link in the left-hand nav. You should now see a list of your GitHub repos on the page, each with a button to tell CircleCI to follow that repo.
Now, whenever code gets pushed to the GitHub repo, CircleCI will run the test suite and insert a message on any pull requests to let us know if everything is passing.
The first thing to do is to log into codeclimate.com and click the “Add a Repo” button in the top right.
Select your repo and then give it a minute to process.
Once it’s ready, click on the “Settings” link (gear icon) next to the repo name (#1) and then select Analysis (#2).
Select which languages you want to test (#3).
Under Analysis, you’ll also find the ability to exclude third-party libraries and code that should not be evaluated (#4). Something like this is probably appropriate to be ignored:
Now you can click on Integrations and select GitHub Pull Requests. This will add a message from CodeClimate into your pull request. If you use Slack to communicate amongst your team, you can also turn on the Slack notification to drop messages into a project chat room.
Next, you can grab the code from the Badges section and drop a nifty little badge into your project’s README.md file.
Test Coverage Report
It’s nice to know how much of your code you are testing. To do this, we’re going to set up CircleCI to work with Code Climate.
module.exports = (gulp, cfg, env) ->
karma = require('karma').server
gulp.task 'karma', (done) ->
You’ll also need to update the
ci task in
gulpfile.coffee to use Karma:
gulp.task("ci", ['build', 'karma'])
Updating the circle.yml file to also send the lcov file to Code Climate.
- ./node_modules/.bin/gulp ci
- CODECLIMATE_REPO_TOKEN=$CodeClimateToken ./node_modules/.bin/codeclimate < reports/coverage/lcov.info
You probably noticed the
$CodeClimateToken in circle.yml. We don’t want to store our token in plain text, or check it into GitHub. So, CircleCI gives us the ability to store environment variables that we can access from our tasks—+1 for security.
CircleCI will now send our code coverage numbers to Code Climate, so we can see our coverage numbers on the dashboard.
Click on the Code tab at the top, and then find a file that has a coverage number listed on the right. Click on the file name, then Source, and finally select Coverage at the top right.
Now you can see what parts of your code aren’t being hit by your tests.
Adding these services has given us greater visibility into the quality of the code that we are creating. It has also given our project managers and other stakeholders greater confidence in what we are producing using proven tools to track code quality. I don’t know about you, but I consider helping us stay on top of writing the best possible code a major win.
I’m really excited about the direction that these services are moving in. If you’re looking for more ways to up your build process game, check out this article from Adam about some other tools that we have added to our toolchain.