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.
(haunting music) - We're going to go ahead and move onto the next bit. So mine is github-names and I hacked together something on my Following page for the people I follow on GitHub. So now I have all of those names in here for my github-names, which is 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 the names. And we'll push that up. And now, actually if I pop open my Fork I can look at the source, look at my github-names, and then there they all 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 set up Travis on your repo. So if you go to travis-ci.org then you should be able to log in with GitHub, actually I'll go to travic-ci.org in Incognito mode. So this is what you'll see at first and then you can click Sign up with GitHub.
And it'll take you to authenticate and stuff and it'll be great. Then 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 just Command + F or Control + F to find your githubnames or whatever. Oh, you may have to have it Sync your account. I had synced it like 16 hours ago, so that sometimes takes a little bit of time.
One thing that I like to turn on is I only want it to try to attempt to build if there's a travis.yml present, so I'll turn that on. And yeah, pretty much everything else I like to have Build pushes, so whenever you push it'll build, Build pull requests, I like to have my pull requests built. And yeah, there are integrations that happen with GitHub 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 a little bit later.
But yeah, right now we can look at Current, we'll see there are No builds for this repository, we need to push a commit, and then that'll kick off a build. So if you've already like pushed everything, you don't know what else to change, then sometimes you can just go into your README and update something. We'll say like, This is my follower, or is the people I follow as of today. So I'll just make any random change. Commit docs updates.
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. You can hit refresh and stuff if you don't trust their WebSockets. Do, do, do. Let's see. Is anybody on this page waiting for their build to start? Anybody have questions? We have questions in here? - [Man] Did you make that travis.yml or did I miss that? - Oh my goodness, thank you.
You're right, I didn't make the travis.yml, that was the problem. Oh dear. It's been a long day. Okay, so we're going to 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. Click View and 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 going to go ahead and explain what this is doing while Travis is building. So let me just commit that, add travis.yml, oh, whoops, got to add that first, git status, let's see, a new file, and then we'll commit that. And push it. Cool, okay, so while that's, uh oh. 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 actually that first build totally broke, because there was no contents in that, but it's been fixed and now it's running and we can actually click right to build number 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 I'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 turn it off. It's kind of a protective thing. I actually don't even know of a situation where you do, so your mileage may vary. Language is going to be node_js. Our cache, so we 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 node modules. It's really easy from the Travis UI to like delete the cache and then we can push the, have it like rerun the build and reinstall all the node modules.
We're going to just 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 actually the three that I normally care about building on for lots of my projects. But we're just going to make it simpler and do node version 6. Then for branches, we only want to build a master branch. We have a ton of branches on here and as we're like making work in progress stuff 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 master, 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 script that we're going to run is our validate script. So this run the test, the linting, and the build.
So if we go back here it looks like it's running and we've got our latest node version, we ran the npm install, we're running the validate right now, all the build's running in parallel. We've got that git output, we've got our test, and we're done. Woo-hoo, all finished. And we have a green build. So yeah, if I refresh the page we'll get that badge. It's still unknown somehow, I'm not sure why. Maybe there that's cached or something.
But soon it will say the build has passed. And then you can 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. Anybody waiting on their build to run still? Yeah. Anybody give up? Sorry.
Hopefully your reviewing this later you can figure out what went wrong. Here we've got some people on the chat. Travis is not recognizing Ivan's repo. By recognizing do you mean like not showing it? Or, 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.
I'll wait for just a little bit. Sorry, Ivan. 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 the 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 like 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. Honestly it should be working. It looks like there is 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. Oh 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 YML, which is a little bit different. The array kind of works like items in a list, so it'd be 0.12.0, and 4, and 5 even, and 6. And you can also io.js and stuff, but don't do io.js, 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 then it's going to cause some issues with like, each one of them is going to try and release at the same time and we 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, a couple.
Note: This course was created by Frontend Masters. It was originally released on 08/09/2016. We're pleased to host this training in our library.
- Creating an open-source library
- Linting and testing
- Code coverage
- Installing and configuring Babel
- Peer dependencies
- Forking and renaming
- Continuous integration and automating releases