Configuring GitHub Actions

[00:00:00]
>> I am going to go to my project github.com/vakil/selfie-cam, is what I called it. And for you all, you can go to your own project if you have pushed it to GitHub, and if not we can do this in our own time with those Git instructions earlier. If you haven't set up a GitHub repository before, once you've logged in and made an account, you can go to this plus button up here and create a new repository and it'll walk you through the steps to get your code up into that repository.

[00:00:40]
But in any case, in this case I have a repository, so let's just zoom in a little bit. There's a settings, a tab panel, whatever we want to call it up here, with a whole bunch of settings, like for example, what is it called and what's the default branch and all this stuff, we're not gonna go into all of it.

[00:00:59]
But there is a pages item in the sidebar here, and the pages page is gonna have all kinds of settings here that again you can read all about at your leisure. But what we want to be doing here, is we want to to be, and yours might look a little bit different coz I have already started this up.

[00:01:26]
But what we're gonna do is we're gonna get even fancier and we're gonna use GitHubs built in actions to help us deploy our Vite site automatically when we push new code to our main branch. So you can choose that option which is in data. But there is also another option which is that you can have a different branch like a GH minus pages branch.

[00:01:54]
This is also common, that only when you push to that branch, will it run, it's kind of, it'll look for a typical site and it'll kind of run that for you. But in this case, we're gonna use GitHub Actions. So, okay. Luckily, the Vite team has made a handy dandy walk through of what we need to know in order to deploy our Vite project as a static site.

[00:02:34]
So static site, meaning once we've built our site with npm run build, we essentially, if we go look in our dist, Dist directory here, wrong direction, okay. We essentially just have some files. [LAUGH] We have an HTML file. We have some CSS and some JavaScript. These are just static files as opposed to a website where I also have a whole server that is dynamically running and responding to changes and perhaps messing with the content of the front end, upper monitor, all kinds of other things that could be happening.

[00:03:20]
In this case, we just have, it's essentially the same thing that we were doing before of just having a .html file, just with a lot of fanciness of bringing in all those modules, bundling it all up in one minified and optimized JavaScript file, all that stuff. So that's what we're doing when we're deploying a static site, is we are just taking these files and putting them on the interwebs somewhere, [LAUGH] So that people can go to a URL and that'll run a get request and that will fetch these files and then they will run in the browser and we will have a Selfie Cam.

[00:03:56]
Okay, so for static sites The Vite team has given us a lovely guide, and it also walks through the other options for using, and it tells us how we gotta build, and make sure locally with preview that things are looking okay, and so on and so forth, and we can change things here.

[00:04:20]
But it'll tell us also for GitHub Pages and if you scroll down, there's other options like GitLab Pages, Netlify, etc. But we'll use GitHub Pages just for convenience. And so it's gonna walk us through the steps we need to follow. Okay, so we're gonna kind of do this together.

[00:04:43]
And if questions come up, please let's shout them out, coz probably other people have them too. Okay, so we first of all wanna set the correct base. We said before, we want to, since we probably, we don't have one yet, unless you all did some configuring ahead of the game.

[00:05:01]
We want to create a vite.config.js file in our project. What this might look like, and by the way, this define config, this is essentially just so that you can get some helpful auto-complete from VS Code. It's not, you could also just have like an, there's a whole Vite page about the config file and everything.

[00:05:21]
But for now, we can just do this, and then if we're in code, we also get some helpful suggestions. Once I start defining a config, and I'm like, okay, what options do I have? And it's like, well, I know about a user config base property, which is the base public path when served in both development or in either development or production.

[00:05:47]
And so the default is just slash. So just basically, this would be equivalent to like anjanette.dev/. Or if we're using GitHub Pages out of the box without configuring a custom domain, we get a site that's vakila.github.io/. And we're kind of barreling through this, but [LAUGH] So if we are deploying to that site, this is what GitHub Pages refers to as a user or project, sorry, a user or organization site.

[00:06:24]
So for example I might have my personal website hosted at vakila.github.io, let's say. And I might have a repository called vakila.github.io in my GitHub account that corresponds to that. But in our case, we have something more like a project repository, a project site, which is where this is going to be named something else like Selfie Cam.

[00:06:54]
And so out of the box I get vakila.github.io/selfiecam for this project site, if I don't configure a custom domain or what have you. So, what that means is that we need to set the base to slash the name of our repo, slash. And for now, that's hopefully all the config [LAUGH] We're gonna need to do at the moment.

[00:07:21]
Because we already have supported all of those slightly older browsers in the production environment with things like our Ify, Immediately invoked Function Expression, so that if the browser that my user has doesn't have the fanciness of top-level 0, 8, no probs. Okay, and by the way, behind the scenes, when we run npm run build, and it's looking at all those different browser targets.

[00:07:47]
It is doing some fancy magic to reinterpret our JavaScript syntax into syntax that even older browsers would be able to interpret. But it doesn't go that far [LAUGH] back. Okay, so back to our guide. All right, so now we go to that settings page in our repository. That Pages tab, yeah.

[00:08:17]
And this is where, wrong, this is where we're gonna start choosing GitHub Actions. And GitHub Actions is a whole, is there a course about CI and CD and?
>> Yeah, Enterprise UI Development.
>> The Enterprise UI Development course probably covers a lot of this. GitHub Actions is essentially a whole thing that is [LAUGH] intended to allow us to automate certain workflows or certain things that happen when certain events occur related to our repository, for example, when we push to a certain branch, we want to build our site with an npm run build which is gonna run V-build, and then we want to set it up to go up onto GitHub pages and deploy to GitHub pages.

[00:09:15]
So luckily we don't have to learn everything about defining GitHub Actions, jobs and workflows here today coz the amazing V team has given us a sample configuration file which this is gonna be a YAML file, that is going to, YAML is just another type of, it's like yet another markup language, it's another key value.

[00:09:42]
It's an alternative to Jason in many places, but that's what GitHub uses. And there's a whole bunch of stuff in here that we can, again, go into the GitHub Pages, GitHub Actions doc and read all about. But suffice it to say that it's going to create a deploy job which GitHub is going to run for us according to the declaratively provided settings.

[00:10:13]
So we can, if we're reading through this we can see there's a few steps, we're doing some npm installs, some npm run builds, we can read through all of this and kind of familiarize ourselves to it later. And so, and it's also based upon some other kind of out-of-the-box actions that GitHub provides to make it easier to work with pages.

[00:10:30]
Anyway, we don't need to know all of this right now. We need to know that we're telling it to do this thing on, almost like an event listener, a push to the main branch. That's when this whole deploy job is gonna run. But for our intents and purposes, we just press this copy button right here.

[00:10:57]
[LAUGH] And we go into pages. Sorry, we make sure that our GitHub Actions is selected here. And then we'll notice we also have Actions tab. And if you, so probably when you have for the first time selected GitHub Actions, I think it had a little wizard, but if you ever want to go define a new Action, you can go to this Actions tab and you can see all of the fun things that I've had.

[00:11:31]
We can create a new workflow, and it'll give me a whole bunch of options, and I can walk through this kind of these wizards and whatever, or I can just create a something.yaml file within a special directory in my project called .github/workflows/. And so here's where I can put a file like deploy GitHub Pages or something like that, deploy pages maybe, whatever, deploy site, make it go, whatever you want to call it.

[00:12:16]
And that's where I can paste all of my [LAUGH] fabulously Pre-configured, thank you, V team, job. And true, we can tweak this, we can do whatever. So for example, in my Selfie Cam, yes, I want to discard these pages coz if you go look at my repo, github.com/vakila/selfie-cam, you will see there is already this .github/workflows with the deploypages.yaml file that is essentially what we all want to have now.

[00:12:49]
And it's the same content copy-pasted from the v-config.