Check out a free preview of the full Creating an Open Source JavaScript Library on Github course

The "Exercise: Setting up Travis CI" Lesson is part of the full, Creating an Open Source JavaScript Library on Github course featured in this preview video. Here's what you'd learn in this lesson:

Travis CI is a continuous integration tool that integrates with Github projects. Kent walks through creating a Travis CI account and connecting it to a Github account. After the account is set up, Kent creates the travis.yml configuration file and explains what each of the properties represent. Code for this exercise can be found on the FEM/09.0-setup-travis branch.


Transcript from the "Exercise: Setting up Travis CI" Lesson

>> [MUSIC]

>> Kent C Dodds: We're gonna go ahead and move on to the next bit. So mine is gitHubNames, and I hacked together something on my following page for the people that I follow on gitHub. So now I have all of those names in here for my gitHubNames. We're sure it's kind of fun.

So yeah, let's go ahead and set up a Travis build for our repo. That's the next step for us. Actually let me go ahead and I'll add my Github names. Yeah, adding all domains, and we'll push that up. And now, actually if I pop up in my fork, I can look at the source, look at my github-names, and then there they are right there, so perfect.

So the part that we skipped here was this Create Travis.yml file. And so this is pretty much it for this whole thing. Is we're just adding a Travis.yml file and pretty much you can copy this and I'll explain what these properties are, why they're useful. But before we do that though, I'm going to show you how to setup Travis on your Repo.

So if you go to, then you should be able to log in with GitHub. Actually, I'll go to in incognito mode. So this is what you'll see first, and then you can click sign up with GitHub and it'll take you to authenticate and stuff, and it'll be great.

And once you're authenticated you'll have this My Repositories thing here and it's a big long list, well once you have a bunch of repositories on Travis, you'll have a bunch there. You'll also see this plus sign, click Add New Repository. And you'll just Cmd + F or Ctrl + F to find your GitHub names or whatever.

You may have to have it synced to your account, right. I synced it 16 hours ago. That sometimes takes a little bit of time.
>> Kent C Dodds: [NOISE] So yeah, this is your user name, and you'll have access to any repos you have access to on GitHub. And we'll say githubnames, it's still not on here.

You know what it might be?
>> Kent C Dodds: Is for mine it's under the JavaScript error organization. So for yours, you should be able to find it. But I'll turn that on. Then I'll go to my Settings, right next to the switch. There's that Settings link. And there's some general settings.

One thing that I like to turn on is, I only want it to attempt to build if there's a travis.yml present, so I'll turn that on. And, yeah, pretty much everything else, I'd like to have build pushes, so whenever you push, it'll build. It'll build pull requests, I like to have my pull requests built.

And yeah, there are integrations that happen with Git-Hub when you have that turned on, so that's cool. Environment variables will matter when we start automating our releases with Travis, and so we'll have those, we'll actually use a tool that will add some for us at little bit later.

But yeah, right now we can look at current, we'll see there are no build for this repository, we need to push a connect and then now kick off to built. So, if you value like push everything you don't know what else to change an then sometimes just go in your README and update something, let's say like, this is my following or Is the people I follow as of today.

So just make any random change, commit docs update, and then push that. And if you have everything wired together properly, then after just a little while, this should update. If you are impatient like I am, then you can click on build history and that normally updates a little quicker than current does and hit refresh and stuff if you don't trust their web sockets.

Let's see.
>> Kent C Dodds: Is anybody on this page waiting for their build to start? Anybody have questions? We have questions in here?
>> Student: Did you make that Travis.yml or did I miss that?
>> Kent C Dodds: My goodness. Thank you. You're right. I didn't make the Travisyml. That was the problem. Dear.

It's been a long day. Okay, so, we're gonna go ahead and view that travis yml, look at the raw and copy that. So if you're on my slides, remember that's just click on this right here and that'll take you to that travis yml quick view in raw. And copy that then you'll make the Travis.yml file at the root of your project Travis.yml.

Just paste it right in there. And actually I'm gonna go ahead and explain what this is doing while Travis is building. So let me just commit that to travis.yml. Whoops, gotta add that first, git status. You'll see a new file and then we'll commit tha and push it, cool.

Okay so while that's. Uh-oh, dear. I made a boo-boo. Here we go. Fix travis.yml. Forgot to save my travis file after I pasted stuff in. Okay, so now I actually that first build totally broke because there's no contents in that. But it's been fixed and now it's running and we can actually click right to Build#2.

And as soon as that gets started, we'll see the output. This is new, View config. It's kind of, I'm not sure what that does but maybe it'll be interesting someday. But yeah, while that's going, let me explain what's going on here. sudo, we just don't need it, so we turned it off.

It's kind of a protected thing. I actually don't even know of a situation where you do, so your mileage may vary. Language is gonna be node_js, our cache. So when you specify a cache so that our builds don't take forever, we don't change our node modules all that frequently and so we can cache the known modules.

It's really easy from the Travis UI to delete the cache and then we can push the have that, like, rerun the build with and reinstall the modules. We're just gonna build this on Node 6 just to keep things simple, but if you wanted to build this on multiple versions of Node, then you could say 0.12.0 and 4 and 6.

Those are the actually the three that I normally care about building on. For lots of my projects, but we're just gonna make it simpler and do node version 6. Then for branches we only want to build master branch, like we have a ton of branches on here and as we're making working in progress staff, we don't care to build them as we're going.

By default though this will also build pull requests. So if you make a pull request to your own repo or somebody else makes a pull request to your repo it will still build pull requests, so we're only going to build the master branch. If you don't like receiving email notifications every single time your build is done, then do this, this will still email you if the build breaks when it was successful before, and then it'll email you when there's a change in the status of your build.

And then the scripts that we're gonna run is our validate script. So this runs the test, the linting, and the build. And so if we go back here, it looks like it's running. And we've got our latest node version, we've ran npn-install, we're running the validate right now.

All the builds are running in parallel, we've got that good output, we've got our test. And we're done, whew, all finished. And we have a green build. So yeah, and then if I refresh the page, we'll get that badge is It's still unknown, so now I'm not sure why.

Maybe that's cached or something. But soon it'll say that the build has passed. And then you could put a badge on your README and look like all the other hipster awesome open source projects out there that have green builds. Cool, raise your hand in the chat or here if you have a green build.

Yeah, all right. Got one. Anyone waiting on their build to run still? Yeah? Anybody give up? Sorry, [LAUGH] hopefully you're viewing this later, you can figure out what went wrong. And we got some people on the chat, yeah. And Travis is not recognizing Ivan's repo.
>> Kent C Dodds: By recognizing, do you mean not showing it?

I'm not sure what you mean by that, after refreshing. Yeah, sorry, still not sure what you mean by that. We can maybe chat a little bit later. Anybody else in here get a green build? Hopefully some.
>> Kent C Dodds: I'll wait for just a little bit.
>> Kent C Dodds: Sorry, Ivan.
>> Kent C Dodds: So if you're on Travis and you're not able to find your repository, make sure that your fork is under your user or the user that you're looking at right now.

And make sure that when you hover over this sync account that it tells you that it was last synced within the time that you created your repo. And if you forked it to a different organization that you belong to, or something, just click on that org and you might find it from there.

Otherwise, I really don't know what to tell you.
>> Kent C Dodds: Honestly it should be working so it looks like there's a red alert on Travis. It looks like they're investigating VM booting issues for public and private Linux builds. I think we're probably safe. So we've got a couple people running.

Yeah, so let me just show the Travis.yml again for Mike. Missed the node thing. Can I just add node versions in an array there? So yeah, if you wanted to have multiple node versions, this is YAML, which is a little bit different. The array kind of works like items in a list, so it'd be 0.12.0.

And four and five even and six and you can also do IOJS and stuff but like don't do IOJS. Like why would you do that now? So the challenge with this though is each one of these versions is going to run the same stuff and once we start adding like release capabilities to our Travis stuff, than yeah it's going to cause some issues with like each one of them is gonna try to release at the same time.

And that probably don't want that to happen. So there are ways to get around that and I can show you that at the end. But just to simplify things a little bit we'll just do the one version. Mark's got a green. Tim's got a green, and Ivan's got it going too sweet.

Anybody else here have a green? Green builds anyone? All right couple.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now