Github and Travis CI

Continuous integration and collaboration

A recurring theme of this course has been the power of automation to improve your workflow. When properly applied, tools like ESLint and Jest greatly increase the chances that you’ll catch mistakes in your code long before that code has a chance to go into production. When you’re working as part of a team or maintaining an open-source project, how do you extend the power of automation to your collaborators?

One answer is good old-fashioned documentation: “Please run the tests before submitting a patch.” But that leaves the door open for human error. A better solution is to offload such quality control checks to a server, away from the personalized environments of developer machines. This technique has become known as continuous integration (CI).

Continuous integration takes the weight off of your shoulders as a project maintainer by allowing you to automate tasks you’d otherwise have to take on yourself. The CI server can tell potential contributors not only whether their patches pass the project’s tests, but also how much those changes affect test coverage, compiled asset size, and any other metrics you care about.

Adding a CI server is a solid first step for project automation. You can go further by adding scripts to your contributors’ development workflows and providing live documentation for developers to play with. Taking the time to set up all of these support tools will pay dividends by making your project’s requirements crystal-clear to potential contributors and streamlining the process of reviewing their patches.

In this chapter, you’ll learn to set up the popular Travis CI service to run the tests for the test-driven-carousel project. You’ll also learn how to use Husky to add Git hooks to your project to check code before it’s committed, spotting potential problems early. And finally, you’ll generate sleek, interactive documentation for your carousel component with Storybook.

Setting up Travis CI

Travis CI is a continuous integration service that’s become enormously popular in recent years thanks to its convenience and versatility. Travis can run your project’s scripts automatically every time you or a collaborator pushes a change and report the results through GitHub’s “Pull Request” interface for branches. Each run is performed in its own isolated environment, producing more reliable results than you get in the personalized environment of a developer machine.

This section will walk you through the process of giving Travis CI access to your project, allowing you to offload tests and other automated tasks to the cloud. This will be a speedy process. You’ll upload your project to GitHub, authorize Travis to access it, then add a configuration file to tell Travis to run your project’s tests. Finally, you’ll add a “badge” to show the world that your project’s tests are passing on Travis CI.

Hosting your project on GitHub

Travis CI is designed as an extension of GitHub, the preeminent source code hosting giant. If you don’t already have an account with GitHub, now would be a good time to create one. Once you’re logged in, create a new repository for your personal incarnation of the test-driven-carousel project. Be sure to make it a public repository. Travis CI is free for public, open-source projects. You can ignore all of the other options, as shown in the screenshot below: