CI #2 - Starting out with GitHub Actions

[Music] if you haven't watched the previous video in this playlist and you're not sure what continuous integration actually means you might want to go check that video out i'll give a little quick description of it and what we're going to be going over in this series i'll of course link that in the notifications and description in case you didn't land here from the playlist otherwise let's start out by creating a project it's going to be a real simple little minimal example and we're going to be adding linting to this project so i'm going to start by creating my directory of course you can do that however you like and i'm going to name it ci github actions i'll cd into that directory and then i'm going to start off by just getting knitting because we know we're going to do that i'll do an npm init dash y i'm just kind of doing some quick setup here say yes to all the questions we don't care about that and i'll actually do the rest in my editor so here in the editor we're going to probably want a lint script in a moment for now i just won't put anything for that just so that you know that's a placeholder and then over here in the files pane i'm going to add a new file we're going to add an index.js like normal and then i'm going to just add all at the root to make it simple i'm going to make an attack.js and in this we're going to create a little function that you don't really need to pay too much attention to how this works but here we go so i'm going to make a fun little type of timber like we're making a game or something in rpg game so i'm gonna have creature name as one of the arguments and then i'm gonna have the damage and then i'm gonna have is critical as a boolean again this doesn't really have a whole lot of purpose it's it's just to have something that i know the lyncher is going to be mad about basically and want to fix so i'm going to immediately return an interpolated string here i'm going to say creature name dealt let's see is critical so if it was critical we'll do damage times two just to keep it simple and then otherwise we'll just return damage we'll write the word damage with an exclamation point and that's pretty much it i want to make sure in this project that i do not have my prettier enabled because i do that by default and yeah it's not enabled okay cool so when i save this it shouldn't format then over here uh oh you know actually we need to export that don't we so we'll say module.exports we're going to use a we're going to use commonjs for this attack and then i'll say const attack equals this is an index.js require and we'll require that attack and then we'll console.log running it so let's do attack we're going to say smelly ogre is the creature we're going to say did 23 damage and we're not going to pass the third argument i'll say that it's optional and one more thing let's while we're here add a dot get ignore because we're going to need to install some node modules and we of course want to ignore them i'm just keeping this pretty simple now come back to the terminal and i'm just going to do actually i'll do node index.js just to make sure it works okay the code runs perfectly fine so now what we're going to do is we're going to add linting so i'm going to do like the fastest way which is just to do eslint that's kind of what i prefer i'll just do npx to you know install it one time go if you're not familiar with that and to check syntax yeah let's do that you don't need to be too concerned with the options that i'm picking if you're not familiar with eslant pretty or any of that stuff i will do some videos of that in the future but the purpose here is more to get to the github action side of things so we'll pick javascript modules actually no we don't want that we don't want esm because we did common js didn't we so let's go back check syntax and find problems we're going to make it strict we'll do common js we're not using any frameworks not typescript i'm just going to press enter to that use a popular style guide and then airbnb i'll use that and then javascript so it's going to install these things real quick and you can see all my answers here you know if i went a little fast there okay so now i actually have eslint already on in this so it's going to show us kind of like what's wrong with it but what we can do to see that kind of wholesale here is we'll go to es we'll make our command lint in our package json just run eslint on the current directory without passing any you know extensions or flags or anything like that so now when we do npm run lint we will see this output and you want to pay attention to this because this is what we're going to be running as part of our continuous integration steps in github actions so we'll run this command and we have this output right now and you can see that these are actually errors right with one warning okay so what it's basically saying it's not really important but you know by default it wants semicolons um you know new line required and then this is kind of the big one is that it wants to this is such a long one it wants to implicit return right here in the attack rpg file it wants us to all be one line since we immediately return and we don't have any reason to have braces that's just a style preference there okay so i think it's time to make our first commit so let's do git add dash a i already know all the files and then what we're going to commit here is we'll say initial setup with eslint now i don't have a git repo yet what i'm going to do that's a neat little tool if you haven't seen it before is i'm going to use the github cli so we'll say gh repo create and if you haven't already installed this you know i'll link to the documentation but you do have to authorize yourself first before you can do this so the repository name yeah ci github actions i'm fine with that description a cute demo repo for actions and then we're going to make that public so you all can see that yeah created my current directory okay so you can see it created this repository so i can actually go and copy this right here open my browser i'll do www.github.com and i can just paste that that should take me right there cool so we haven't pushed anything up yet so it's given us the you know the usual stuff here but it has been created so all i can do i can just say git push origin master here just using all the defaults okay and then when we reload we will see that that repo has been pushed up it's pretty cool huh as opposed to doing it through the web browser if you do this a lot and create a lot of repos it's a really nice tool i've actually done it with an npm init like auto creation so when i emit it'll ask me uh if i want to you know create the repo and then it uses github actions to do that it's a really nice little thing that you can do maybe i'll do a video on that sometime but the github cli is worth checking out it's pretty sweet okay so right now we have this basic repo set up we have linting and all that stuff but we don't have any actions we don't have any continuous integration and so if we come to here if we go to this actions tab we'll see that it kind of starts us out with some nice little helpers that are suggested which is pretty neat but i'm going to show you how it'll just auto detect a certain folder structure that you can just do every time so here in our files right here and i'm just using keyboard shortcuts i should probably kind of just do it like this so you can see it but if we create a new file uh you can do a dot github directory make sure the periods at the front of it and then you can do work flows that's the directory they're gonna be looking for and then you can name this file whatever you want usually if you're doing multiple types of actions and job runners this will make a little more sense as you see them you might do multiple files i'm going to start with just a yaml file ci dot yaml and if you're not familiar with the aml it's very similar to json except it uses indentation instead of like braces and such racism brackets i should say you can kind of think of it like the sass sas indentation version to scss which would be you know yamlta json but you know if you're not familiar with that you'll you'll see so we're going to start with a name and that's the name of this like whole sort of suite of stuff that's running so i'm just going to name it ci i'll make it really generic right now you know later on we have multiple actions we'll might make it a little more specific so we're going to say on and this is when you want it to run and this is sort of like do you want to run on push do you want to run it on like merges do you want to run on specific branches only or pull requests for now we're just going to start with push so every time we push up our code any branch it's going to run so then you have a jobs key that's required here so we're going to say eslint is the job and that's just kind of like a key for us it'll use that as the name if you don't put a name but let's say that we want to do a name and i'm just going to name it lint code i'll name this all uppercase base and i'll just do the first layer uh what does this say missing property runs on that's really cool that they give us hinting for that so we're about to do that now so you need this runs on next and so that's for this whole task here job and the runs on will actually give you a little bit of auto completion there's a bunch of stuff that you can do here you can see all these um which is really nice in vs code but we're going to do ubuntu latest that's what i like to do if you're curious like what we're kind of selecting here and this is sort of the image that we're going to um well github is going to you know build this image so whatever operating system they wanted to run on and then it's going to check out our code and then it's going to run a bunch of stuff on our code what's really nice about this is it makes it kind of like replicatable because if you are having your stuff hosted on an ubuntu server and you know the version and everything you can kind of run it on that so that it's the exact same which is pretty neat so that's why we're just doing ubuntu latest to keep it simple but a bunch is pretty common now steps is going to be next and that's the actual you know each step that we're going to take it's a good name so the first step we're going to give it a name and i believe all these names are optional by the way it's just to kind of make it more clear and it like i said it will make more sense when you see it first run we'll we'll point out where all these are so first you need to check out your code okay this is a required step so you're going to do uses for each step and that's going to be action slash i shouldn't say i should say you're going to be using users for this step you can use uses or you can use run so uses is kind of like some pre-built type of stuff like github actions has like a checkout at v2 and that's a really common thing to use right now to just check out your code really easily the next one i like to put a break here where's my indentation uh the next one we're gonna do is we'll have a name of install packages just so i know what it's doing and i like to make these separate let me show you so npm i and then i'll explain that so this is just running npm install and then we're going to do a name of run yes lin and then this one will actually run this command and pm run lint okay so that's the whole file let me go over this last couple pieces so uh you could actually do this all in one step if you want to you could do like npmi and and like you might do in your package json or you can actually use like the slash to escape and then do like a new line type of thing so i'm not going to do either of those i like to make them their own thing so i have too many lines here one sec i like to make these each their own command because they give me um a time frame of how long they ran and so i like to know like exactly how long my linting ran that's just my preference all right that's that so now when we add this and we push this up we're going to name it add ci for linting okay and this npm run you know it's just the command that i ran locally in the terminal package.json so it's checking out our code base it's installing and then it's running it just like we would locally i think you get it but okay so i've pushed that up now this little guy down here if you can't see that and now when i go back to my browser sometimes it takes a little bit sometimes it's pretty fast but this will actually you can just refresh every so often if it doesn't pop up you might want to go one to another because i think it kind of caches it change tabs but here you go it automatically picked it up and it's running this action so we can actually click into it this one will probably be pretty fast and i'll go back and explain what that is i just want to catch this before it finishes so you can see it's on the installing packages just kind of moves me down and you can see we get this error and that one error caused like the whole job to fail which you'll see in a moment so let's come back here and start from the top that was interesting caching okay so that's like from a different project that i was demoing so add ci for linting here this is the step so if you just start at the top you go to actions you'll see this and then the ci right here is like what we you know named the whole thing right let's kind of compare and contrast here so that's this name right here and this is the commit name and we did it on master so we click into that and here it's going to show all the different jobs in case you have multiple so we just have this one job lint code base so you can see jobs and then the eslint which we named it lint code base so then from here we can click into this job and see the details about it and it tries to take us like right to the failure failure which is pretty nice normally so you can see it runs this setup job which we didn't name that's just part of the setup the checkout code we did name which uses this run actions checkout at v2 and that's just kind of how you know github knows to look for our files and and check things out you don't really need to know too much more about it right now install package is the next one that we made because you know we need to install before we can run our linting command if that wasn't clear since it uses eslint to run and then finally we have this run eslint i wish you could get some syntax highlighting here but it's pretty tricky um in this type of world so uh it's the same output that we saw locally in our terminal you can see it's got this missing semicolons and all that stuff the one thing that is a little bit different here that we didn't see is this error process completed with exit code one so if you're not familiar with that i think it's probably important to explain that right now before we even get further into any ci stuff because you'll be seeing that a lot or things like that when you're you know running things in a unix-like environment so exit codes uh if you're not familiar with them it's a pretty it's like standardized minimally and then not really standardized past that what i mean by that is zero is considered a success this is a standard in the in the unix-like world linux and uh it's gonna be on mac and all that stuff because it you know based on unix so uh whenever you get the x code zero we can assume that's a success and then anything other than zero is going to be a failure what those codes mean are not really standardized um there are some like kind of set of best practices so one like typically means uh like a general catch-all error in my experience but they might have more specific ones that they'll decide like you know two is you know some sort of specific error i can't think one off the top of my head right now and three four five whatever however man they want to do but the idea here is that the program decides what each number means so i know that doesn't give you like a ton of context but hopefully you know kind of turns this arbitrary error if you've never really understood what that means why is it exit code one type of thing you're looking for a non-zero exit code if you're looking for that to actually be a failure so we get this generic failure but it does actually have the log dumped here to show what it is so we can act on that let's actually kind of make this more useful for a moment because we've just done an action but it's like what purpose does that have i mean yeah if you go to the code you'll actually see this little x here which is pretty neat that it is saying on the master branch like the latest thing failed but you know i'm not going to go to the repo and check that every time there's kind of multiple ways you might do this but i'm going to show you what like the normal workflow for me is that makes this useful let's actually fix this first and show success and then i'm going to make a pull request so in order to fix this we come back to our terminal and all we really need to do is do npm run lint and then we use dash dash to pass an additional flag this should work on windows 2. i've tested it on mine and it works but then you do fix now if you're doing yarn you don't need this additional dash dash i think it doesn't hurt but with npm you do need that to say i'm going to pass more arguments here or you could make a script in your package json either way that will autofix everything that it can it can't always fix everything so if you're doing an example different than mine you might have to fix some manually but there you go and if we go over to our code we look at this attack you can see that it has formatted it for us and it's made at this big long line because we don't have prettier and so we don't have like a line length minimum and all that stuff we're just using the eslint so with that we fixed everything and you do probably see that warning you might be wondering about that let me get to that in a second so when we commit this and i'm showing all the commits that i'm doing here uh so that if you happen to be following along and you want to check out the repo afterward which i will of course link in the description then you know you can know what commit to check out if you want to see a very particular uh you know set of code changes so we're going to name this uh fix linting just something generic so we'll push that up and g up is just my git push command shortcut probably should have done the full one for you sorry and we go back here and if we go to actions we will see a new action run so you can always go and check out the history and see the previous one but we have a new one running called fixed linting and if we watch this it's going to be the exact same set of steps but we should see a success here now the warning that you saw before you can see got that check and we got a green check now the warning will still be here you can actually check it out here and see it does say it has a problem but it's not an error it's one warning warnings are okay they're not going to return that non-zero exit code they're going to return to 0. you should probably fix that but it's not going to hold up your code basically from from passing so now that we have that passing and you've seen kind of failing and passing and so on let's make a new branch real quick so on this new branch let's name it pr example i don't know why i put that in quotes so gcos might get checkout sorry habits um yeah let's let's just uh revert essentially what we did here so i'm gonna go to my editor and i should be able to undo and then i can do save without formatting in vs code so it doesn't auto use my eslinter because if i if i just save right now it's going to autoformat it right so i'm going to do that if you happen to have eslint set up in your vs code the extension you might not and i can't go over that right now and due to you know lengthening the video and not being directly the topic but i do plan to do some linting videos in the future so when i get those out you know sometime in the future i'll link that here but if it's not there then you know you're just gonna have to go and look it up in the docs so we have saved and uh now we're going to just commit this basically breaking the pipeline to show an example so i'll say revert lint fix to break action not really a break but okay so we've pushed it up now we're still doing on push we haven't changed that at all it's going to run every push so we go to actions we'll still see that here but check this out i'm going to create this pull request if i just go to pr's it's going to suggest it for me you know pretend you're creating a pr you're going to pr from this example branch into master you know i might write some comments here whatever when i create this pull request you'll see that it says all checks have failed so it actually puts this like right in the conversation which is really neat so whoever's looking to kind of merge this code can see that you basically messed up their stuff whatever they said was their minimum set of guidelines to merge in as broken here now by default it actually doesn't block merging i can still click this merge pull request and it will merge it so let me show you how you can set it up to actually block it for a second on your repo so if you go to settings and then you go to branches so i want to add a new rule here the branch name pattern i'm just going to do a master you can do like you know feature if that's how you do your things or whatever so i'm saying master is going to have the specific rule and then we can go to require status checks to pass before merging i wish they would put something about actions here to draw more attention that that's what it uses but so we require status checks uh to pass and then require branches to be up to date before merging this is pretty common to do so i'm just going to flip that on for now you have these two layers and then you want the the test that you want to run so in this case or the action or check i could type lint and we have that lint code base check if you recall it'll just auto complete for you which is pretty nice so once you've added this with these two checks you can come down here you can save changes and then when you go to your pull request should have automatically updated you can see now that it says this little required statuses must pass before merging and the circle will actually get filled up like proportionally if you have multiple checks which is cool as an administrator you may still merge this pull request so it's you know it's saying i can click merge and then you can you know make sure that you want to do it but only if you're the admin so i'll cancel that real quick and then we'll show this auto updating by going back to our terminal we're going to do you know the fix command that we did before oops this one npm run lin fix we'll add that again fix run fix for pr example push that up to our base and then as soon as we do that this will just live reload which is really cool so once it has it'll still say some checks are you know haven't been completed yet so they're running and then we have this one which usually should give us a link let me reload yeah it's kind of weird sometimes you just have to reload it like loads half the things so we go to details oh wow that's already that's fast so you can show the checks it'll just kind of like truncate them in case there's multiple but you do show all checks and then you can see this individual one passed and we could of course click details and that's the same thing as kind of going to actions except in this case it's on this pull request it will show it right here so now that our stuff's passed you know we get the green light to click merge and that means that you know anyone who has authorization to merge can merge there not just an admin since it passes all of your checks so there you have it we've merged this pull request should be closed go back to our code and we're currently up to date with that latest and so that is a quick basic example of doing github actions you know in the past you would have had to rely on some really awesome tools like travis to do continuous integration and those are still great tools they have a lot to them we might go over them in the series depending on interest but now what's really neat is a lot of them like bitbucket and github and i would believe git labs but i haven't tested it out have their own way to do continuous integration or some sort of automated services kind of just built in and so that's what i use now by default and then if i need a little bit more i might add some other services and stuff like that but actions will get you really far actually or in bitbucket it's called pipelines now if you want to see more about that you know you can of course check out the github actions documentation i don't know why i didn't just type docs but whatever i will link this in the description but of course you can just google it like i did they have a nice little quick start guide i thought about showing that but i figured i'd do something you know a little more normal to what i usually set up but you can obviously follow that and they have a ton of information here that you can check that out also the github cli was the thing i used to set this up and i'll link that as well which is really cool it goes through just a quick example of all the neat things that you can do with that like i said if there's any interest i might do a video on that in the future so just let me know and i believe that uh covers the topic for this video so i'll hopefully see you in the next one you

Channel: Swashbuckling with Code

Views: 1,319

Keywords:

Id: GehPUersUcA

Length: 25min 47sec (1547 seconds)

Published: Mon May 24 2021