GitHub Actions UI

[00:00:00]
>> Like I said, you can grab any repo you have, you can use this one. Tomorrow, I'll have another repo that we'll use and stuff like that. But, you just don't have push access to my repo, so you would have to fully fork it and not just clone it at that point.

[00:00:16]
But I'm going to just make a new branch. Cool, and we can go in here and we'll make a new folder and a hobbyist code. Really doesn't ever want me to put anything on the top level, let's go down here and do it. I could have just created it from the command line as well, but here we are .GitHub.

[00:00:43]
And there's a lot of other things you can do with this directory, you can put like pull request templates and issue templates and all sorts of other fun stuff, code owners. I will say workflows, and let's make a file called unit-test.yml. If someone sees me mistype something, I am not looking at notes or anything I'm just doing this live, other than the fact I'm copying and pasting the entire workflow, sweet.

[00:01:09]
And this is it. All we need to do to configure our CI CD process is open up a PR, right? If this was in main it would run on every PR, we open up a PR, you don't have to do that classic thing which is as you're working on the build system, you're breaking every build, it will only work in that PR until it merges into main.

[00:01:32]
And this is found in the notes in the repo as well, it's under getting started with GitHub Actions. And with that, what I'm gonna do is just do a, I really like the GitHub UI. I'm only gonna commit that unit-test. We'll just kind of push it up. And then we'll open it up, and here, and we can see that we've got a new branch with a PR, Add our very first or your very first, maybe, GitHub Action.

[00:02:18]
Empty, empty pull requests comment. This is the bad part about being the boss is I don't like the template, so I even deleted just open up empty PRs, if it's like update lint tests, I'm like what what do you want me to say? I updated the lints or lint errors, leave me alone.

[00:02:35]
So, you're learning some of my toxic traits. So, one of the things that we can see here is, this is new happening right here, which is run unit-test, that seems familiar. Didn't I just make an action called run unit-tests? I did. It's a build and test and it's failing, and we'll find out why.

[00:02:56]
Cool, cool, cool. Yeah, cuz in this repo running npm test had that error to make you go into a folder. I have two choices. I can literally, and that's at exit one, which is not intentional but I'm really glad that that played out because I was like if it exits anything other than zero, your build process fails, and I literally have a very explicit exit one.

[00:03:21]
And so the build process fails. So, I can make that work. But what's cool about this is you'll notice that, That's not breaking any other pull request that didn't have this would still be fine. That action only runs on this PR because that's where that file is found.

[00:03:35]
Once that gets merged into main, then yeah, other things would fail based on it. But it means I can work on a GitHub workflow without having to mess up anything. So, cool, accidental intentional thing. I am pretty sure that was just helpful so that we're running the right set of tests but I'm pretty sure I can just do an npm test and we'll find out.

[00:04:03]
I think I don't have any intentionally failing tests in there. Cool, gotta go up two levels, maybe three, Npm test. Fun fact if you are talking and coding at the same time, if your npm test is npm test, again, cue some kind of exhibit name. We'll do vitest, there we go.

[00:04:36]
Npm tests and you can see it running through my test suite. Look at that. They all pass, that's good. Now it goes into watch mode. One thing is that vitest out of the box, most CI, CD processes set a CI environment variable. If it is true it will do it in run mode.

[00:04:55]
If you don't trust that you can also choose to do a dash dash run. Cool, and so we will update. Let's at least try to make sure we're good citizens. Update test script and package JSON, right on. And if you use a GitHub UI, you can see that I already have the instant feedback here to know that this was a failing build.

[00:05:28]
Cool, cool, cool. And we'll add our very first GitHub action, you can see it's running. So let's go into details, and it's queued, which means no machine in GitHub's fleet has picked it up yet. Possibly because I did a bad thing earlier. No, that one seems to be running.

[00:05:56]
I didn't push out the infinite loop before. But this gives us a chance to see what the UI looks like in this case. One of the things I will have to do is kick something off and start talking, because some of these things are not instantaneous. This is, if you go into actions in your repo, what you will see, you'll see all the different jobs that you've had.

[00:06:12]
This one is called build and test, for reasons that you can take a lucky guess where we're going with this. You can see the actual workflow file itself, we've seen it. The usage, right? Eventually, we will see stuff like caches. As you can see that as the script is running, you can actually see what you saw in the terminal, kind of like in the UI.

[00:06:37]
So that if it does break, you will see a very similar situation to what you might have seen running on your own machine. And then when it's all good, you can see that you get a little green checkmark. All right, we go back to our PR. And you can see that we got a checkmark here.

[00:06:56]
In fact someone gave it a thumbs up as well. And now all checks have passed, and I can merge it in. Now, there are some things that we might choose to do here, but that was our very first run your unit-test GitHub action, not that hard.