GitHub 30 Minutes to Merge, 28 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitHub Automation with @GR2M #30MinutesToMerge

Description

5:10 - Program Start
6:11 - Intro to @gr2m, https://github.com/octokit, https://github.com/octoherd/octoherd, https://github.com/semantic-release/semantic-release
8:54 - Building a GitHub Action with #JavaScript using #octokit
10:53 - npx boop-gregors-nose
13:20 - CLI code
14:50 - Creating a GitHub Action
19:20 - Manually triggering an Action
20:08 - Using secrets/an authenticated token
27:30 - Publishing an Action
32:20 - Building a release
39:25 - Getting your Action into the Marketplace and putting everything together
#30minutestomerge
Gregor Martynus builds a GitHub Action from scratch using #JavaScript and #octokit, including packaging up the release and making it avilable in the Actions marketplace.

https://github.community/t/30-minutes-to-merge-github-automation-11-am-pst/177632

A

Hello, everyone good morning, good afternoon, good evening, wherever you are in the world, I am so happy. You are here joining us today for this very special edition of 30 minutes to merge, welcome. This is a series for you made by developers alike and we're going to be learning some really interesting stuff. We have a fantastic guest today and of course, we have the amazing mat beard of edu and his majestic beard will honor us with his presence in a moment. So I'm going to go ahead and just let matt take it away.

A

Everyone save your questions for the end of the stream, where we will be popping onto the community for a written q a and an opportunity to win some cool swag again. Thank you for joining us today, hey matt, take it away.

B

Hey everybody uh yeah again welcome to uh our third edition of 30 minutes to merge, so I'm pretty excited that we we've been able to keep this stream going. uh It's definitely my pleasure to welcome our host for today's session, uh gregor so he's at gr2m on, like all the social medias that you can ever find people on um and just like a quick intro, just like with all of our other hosts, um just a quick rundown of who he is as a person. So he's got a couple of hobbies.

B

He recently had triplets, so those obviously are they're very they're, keeping them very busy um and in the pr in the before times he liked to dance and he enjoyed cooking, uh but since having the help of a nanny with uh the children, uh he's definitely been spoiled by having lots of amazing food prepared for him. So he's not really ready to get back into the kitchen, but he's looking forward to it.

B

He currently doesn't own any pets, but in and around his house he has a bunch of turkey and deer. So, every once in a while, they come by, say hello and then probably scamper off into the woods uh his recent purchase, which is probably my favorite thing to ask people just because I I like to creep on their amazon wish list. uh He bought a big electric car cargo bikes. It's got like this big old cargo spot in the front.

B

He throws the three kids in and then he just kind of jets around town uh enjoying life as it is. um He is super involved in open source. The last two hosts that we had were interested in uh contributing and were looking for projects uh gregor is super involved in open source and might be contributing or maintaining some of the open source projects that you are already consuming.

B

uh Just like a quick rundown of the things that he's interested in and or involved in, uh he's been working on hoodies since like 2011, um and he also wants to look to find ways to like lower the barrier of entry to open source and coding in general. uh His latest project is october, but he's also involved in octo kit and then the semantic release project as well, and then, as always, I like to ask what you know: what's an action that they would like to have.

B

uh That would automatically do something for him uh and he's really big into home automation, um and so he, his recent kind of action automation tool, was um to work on his billing and book bookmaking, because it's tax season here in the us uh so yeah for him. It's just kind of automating everything he can and using github actions to do it, and with that I'd love for gregor to take it away and introduce this awesome topic and uh show us some cool stuff.

C

Hi beard, thank you so much for the kind introduction, hi, andrea and yeah, hey everyone who is watching today. Thank you so much for taking the time so yeah I'll be building um a github action today, with javascript using arcticate and octokid, is the official um sdk and and set of libraries to utilize github from apis, and I am the maintainer of the javascript octocad as a contractor for github.

C

So this is my homeland, and I will show you how you can utilize the stuff that I've built over the past months and years now to build github actions. um Yeah. I think I ready to show my screen.

C

All right, so the way uh what I will show today is actually a follow-up to another show that I did last week with jason langsdorff on a show, learn with jason, where we built a cli, I'm using octokid and the cli all it does. Is it bumps a counter on the readme?

C

So you can run this command, npx boop, jason's nose and then this counter counter will be bumped, and I definitely recommend you to check out this episode because it's covering other parts of github's apis we've built a cli, but we've also built a github app that you can install and then the github app handles issue events and bumps this counter and what we did with um a github app with json last week.

C

Today we will do with github actions, because getup actions have been down last week for a moment exactly at the time of the show. So we skipped over that part which now gives us the opportunity to do it today, and I've prepared this issue here. On my help desk repository issue, 18 kind of as a guidance for me to not lose uh my you know my my thought and I've created um a repository, boop gregor's nose, which is here so my nose was booped already seven times, and you can already today just run this.

C

um This command and px boop gregor's nose as long as you have node um installed. Actually, it works with node 12 now as well and yeah we can. I can just show it off right now.

C

To show you what the cli is doing right now and then what we will do with a day action in the next 25 minutes, so the cli is using github's of device flaw. So it gives me this one time code here and then let me show you both.

C

um I have to enter it and grant access to the gregor's news, blooper application, and then it pulls in the background and once it can exchange its own code, then my nose got booped. So when I go back to my repository now, it was seven and it's now eight.

C

Now when I run the same thing and this time authenticate as a user who does not have access to this.

C

Repository, I can use a private window for that oops and just sign in as my as a test account of mine.

C

Okay, too far, so I need to copy this again.

C

So this is gr2m test.

C

At this time it cannot boop my nose directly; instead, it creates an issue. So if you run this command, this will happen to you and what I want to do is create an action which automatically updates my readme whenever there is a new issue. Okay, let's jump into the code.

C

So here's our cli code right now, I've installed the octokid dependency already with node.js and I've installed. This authentication strategy for the of device flow and I defined like internal plugin to do the nose booping and what it does here is. It um tries to update the file. So this is another plugin which basically wrote the readme file from my gr2m book, gregor's nose repository and then it has this api to pass in a function which is preset with the current content.

C

And then I pass the current content to this boop counter function here, which basically uses regex to replace the current number and bumps it by one.

C

If this fails- because I am not authenticated- it instead creates a new issue. So this is what we saw happening once it went through this path. When I was authenticated as myself, because the token that I use um has permission, write permission to the repository and once authenticated as gr2m test, and it did not work, so it created an issue instead. So this is what we've got so far.

C

Now, let's create a github action and let me create, uh let me show you what I've already done here.

C

So I've just updated readme so far, so instead of just a cli, it will now also be a github action and instead of only using the cli, you will now also be able to create an issue in the repository and then it will use this oops. This is actually wrong path.

C

This workflow to react on the on the new issue event. So first, let me fix that path that I just had here, because it's not js, although everything I do is js the github action. Workflow files are actually yaml files, so I have to use that ymloyaml.

C

So let me create this file now um boop yaml, okay. Here I will give the action a name and I just call it boob and then what are the triggers so.

C

There is an issues event and I can define the types um I don't know. If I get no, I don't get hype ahead here, but I think that the type of the issue I'm looking for is opened. You can see all that in github's documentation, and I also want to be able to manually trigger the action for testing and for that there is a event called workflow dispatch.

C

Okay, so next I have to define the jobs and the job. First job is just called boop and it will run on ubuntu latest and it has steps and in the steps I first need to check out my current repository, which is x, check out v2, and this is basically the name of the github organization and the name of the repository.

C

So you can go to github.com, slash actions, let's check out, and you will see this action and I have to define users.

C

I also need node, because I have node code or javascript code, so I need to use the setup node action and I can pass in some parameters here and I think it's node version and just say 14, because this is the currently stable version of node. And next I can just run my cli. So basically, I can now put in any shell command here, so I would just do node and then cli js.

C

Oh, I forgot one thing um because the node modules folder is not included in my source code, so I first have to install dependencies with npmci, which is like npm install, but it's more efficient because it only looks at the log file and downloads only the versions there and I think that's it for our action. So let me try and just add it all and commit it.

C

Boop action and push.

C

C

And see what will happen so here is my pull request that I just did so it has my new boop yaml file and it has the readme updates and that's it. So let me commit this to my oops. I cannot review my own pull request, so let's just go ahead and merge.

C

C

I have to merge it because the action has to be in the default branch of the repository, otherwise it would not work so now I can go to actions.

C

And I can select my boob action here and you see this run workflow button, and this is because I added the workflow dispatch trigger. If you go to this repository and create issues you can already trigger it and that will create a lot of noise. But for now I just create my own run here manually without creating an issue, and we can just see what will happen.

C

So here is my action run.

C

Let's see if I got it all right: okay, it's checking out my repository. It's setting up node it installed. It's now running my cli, but you know I still use my cli code. So basically it still prompts me for my olaf code here, which is funny but also interesting. You know you could. I could in theory, send out some kind of sms or something for a two-factor flow using github actions, but obviously this will become a blocker uh when I continue doing it.

C

So this is not what we want, even though it's quite interesting, uh let's just see yep, so my nose got booked here. Okay, let's go back to the code.

C

uh Let's check out the main branch and pull the lattice changes in. So what we want instead is pass in and get up token. That is already authenticated and github actions provides the github token secret out of the box without me needing to configure anything so secrets github token, and then I will not use this one. I will just create a new file called action.js and I will copy this call it action.js.

C

So this will be gregor's noseblooper action. It will use the same plugin, but we no longer require the oauth device flow here at all. So we can remove this part and instead of setting all these options for the of device flow, I can just pass in a token directly, because the authentication token strategy is the default strategy that octokid comes with and you can just set it off to a string, which is the token and in theory it should just work, and I happen to have um this environment variable defined locally in my local environment.

C

So I think if I run action.js, it should just do it without asking me yep, so that works, because I have a personal access token defined in my local environment, which has fried access to my own repository. Obviously, okay. So let's add this.

C

Do not use or flow in github action and let's push it. I hope this all makes so far makes sense. So far you know if there are any questions you think is worth asking right now, then we'll just interrupt me. Oh, I have to pull changes first because of course my nose blooper actually created a commit here, um the boo boop. So these are comments created by my cli okay. So now I can push my local changes after I pulled now.

C

Let's see where we are so here is my first book this time. Let's create a new issue to see if that works, hey-ho issue here.

C

And let's see if my boob action got triggered yep, it did so. This was manually run and this one was triggered by the issue event, as you can see,.

C

So it sets up the job, and here you can see that it passed that it passed the uh github token environment variable and it just worked. It's beautiful things just work.

C

I pray to the demogods today. I think- um and you see when I look at commits the very last commit- was now not contributed by my user account, but instead by github actions all right. So this is it. I think um now it's fun to build a github action that just you are using, but it's much more fun to make it available to others. So you can boop my nose as well, and I think for that I will just create a new repository, really quick, oops.

C

So, let's call it boob gregor's nose test and I will just get back to it in a moment, because I want to use um the repository.

C

I forgot to create a file okay. Well, I guess I will just copy and paste this code really quick.

C

Okay, so now we have our repository and now I, what I want here is to add a new file and call it github, workflows, boop, gregor's, nose.

C

Yaml in here again, I have to define the name uh mcgregor's nose. I have to define the triggers so for now I just use a repository.

C

Dispatch again, but basically I could do anything like if an issue was created. If someone started to watch or start my repository, there are endless triggers, you can look them all up on on github's, documentation, okay and then jobs, boop, and this time I don't need to check out anything. um Oh wait. I have to do. I think it's called the runs on ubuntu latest and I have to define the steps and then uses what I want is basically use this.

C

I don't know if I have any syntax error here, we shall find out.

C

So this is another repository. Let's see, okay, there is a syntax error. Of course there is. Let me see what I got.

C

What's my problem here.

A

C

Let me see my boop yammer here for comparison and see what I've done wrong.

C

So I have jobs. Boop runs on ubuntu laters steps. I actually don't know what's wrong.

C

So if someone can figure it out, uh you can send me a pull request. Let me go back to um this one. If I want to um publish my my github action, then I need to define what it is with um with an action.yaml file, so an action.yaml file. I basically define um what is this action? What's its name and so on, and I prepared something here, so you define a name, a description branding.

C

This is all documented on github.com as well, and you can define inputs, and here I want to ask for a personal access token, because if you use your repositories github token secret, it will not be helpful because this token is scoped to your repository only for security reasons.

C

So what you will have to do is to actually create a personal access token and set it as a repository secret and then pass it here, and I think that's it.

C

So action yamo, you just push it directly.

C

C

Okay and now in my test repository I'm a little surprised because usually it would tell me what's wrong, but it doesn't. I think.

C

Okay, so let me just continue and show you what I how it should have worked. um Basically in here, oh steps: oh that's a problem, cool missing version; okay, so for now we do master and then I do with and then personal access token, and I have to set this to secrets. Hat.

C

So that should work.

C

And now I go in settings and secrets and I will define the path secret here and now, if you kindly could stop sharing my screen for a moment, I will use my uh test account here.

C

So even if it leaks there is not much harm you can do, but so basically I go github.com settings tokens new. I set the public repo scope.

C

And copy it okay, you can show my screen again. So here is now my path secret. In this repository, which I am using, oops, which I am using in my workflow here and now. I hope that I can move my nose.

C

Yeah action is showing up here now, but I don't see the repository dispatch event. So there's still a problem, it seems um let me edit it again. Maybe it will show me.

C

Oh, not repository dispatch, workflow dispatch, there is repository dispatch as well. It's something else. It's more useful for github, apps workflow dispatch is what we want: okay hallelujah!

C

So now we basically run the action from this other repository and it will fail. I have to rush a little bit now because of time it will fail, because I do not have the.

C

I do not have the dependencies, so it does not do the whole npm setup and npm install and so on. Oh, it also cannot resolve master because it's main okay. um So let me fix that first.

C

And run it again.

C

And while this is happening- and I will show you the output of it in a moment, I will show you what we need to do next. We need to build our whole code into a single file so that all dependencies and all the code is included as you publish it. So I will end install and versal ncc.

C

And now I can use, I can create a build script and let me see.

C

Oops, I think I have to code somewhere.

C

Okay here, so I need to build this into this and I will.

C

Ignore the dist folder.

C

C

I can now run build and it will create a disk folder with a single file binary, which is what we want and then in our action, yaml. Oh, this is also why it would fail it's already pointing to the dist file. So this is one thing and the other thing I want to show you is how to automate.

C

This whole building and releases, and for that I'm using, I will create another github action.

C

Add file and just call it.

C

Release- and this is something you can basically copy paste for yourself, so we don't need the npm token, because we do not publish to npm and then I think this should just work. Let me hold on. There is something I think I have.

C

C

I'm not sure if I have to do this, but I actually am not sure I don't think I have to do it so basically I run semantic release which automates the release process for me. So let's create that and then uh to prevent it from trying to publish to npm. I will set this to private.

C

True, and now this version here basically is is new because it will be set automatically for me. Okay, if everything went well, and I do like a semantic version uh commit here with a feed.

C

Prefix then it should release a version for.

C

C

So we have now release.

C

I'm nearly to the end, if everything goes well now,.

C

So this is the semantic release thing. It basically parses all the commits since the last uh release, which is a git branch, something failed. Okay, I think I know what failed I'm sorry.

C

Main, oh, I know so. Basically, by default, github semantic release is still using the master branch to release automatically. So I have to define branches main here. I forgot about.

C

That this is worth showing because github actions are tricky when you're doing them with node.js. As soon as you have dependencies, you will have this trouble that you have bundled it up every time you want to publish a new version, so it is really worth to investing some time um and automating the whole thing.

C

So once you have the setup done, all you have to do is use um semantic, commit messages so use the f-e-I-t column, prefix or fix column prefix for features and releases, um and then it will just automate the entire release process, for you so create git tags. It will create github releases, it will do release notes and it will push to a branch called v1 which then I can reference here in my code, where I utilize the action and this way I don't need to point to the main branch because things can break.

C

I can point to v1 where I am sure that I will receive all updates, but I will not receive any breaking changes because as soon as there is a breaking change, I will publish to v2 in this repository. So this time it seemed to have to work. Let's hope, so we do a v1 release here.

C

This is what semantic release just did for me, and this is the comment I just had and I had some other commits before that it also parsed because it was the first release and it now when I go to v1, oh it doesn't have the this folder, so I do need you know what I think I just remove it from here.

C

Like this, so I don't need this folder here remove oops remove get ignore so everything worked, but it didn't push the this folder because it's in my git ignore hold on.

C

Fix publish this folder.

C

Okay, so while that happens.

C

Okay, I have set this up correctly. The way I want um the way to publish like once your action is working. The way to publish it to the marketplace is pretty easy. You have to go to um your release here and then just edit the release, and it will already ask you hey. This looks like a github action. Do you want to publish it to marketplace, and I say yes boop? Oh there is an action called boop already.

C

So let me let me let me let me change that. um Really quick as well.

C

So boop gregor's nose.

C

And rename action.

C

Okay, let's hope, but this release here will work.

C

Oh no, it's not picking up something going on with github actions. Again! Oh okay! Thank you.

C

All right, so this should now release version one zero one because of the fix release a fix commit that I.

C

C

C

Go okay: it didn't do anything because I already pushed another commit and it doesn't want to come into any conflict. So it's smart enough to realize I better wait, um but the other one just finished, so we have v10. Now now, let's go to edit release, publish that looks good category. Well, what is um open source management?

C

Okay, this is optional and then it just.

C

This is just my release. Initial release to marketplace. Okay,.

C

All right and now I can go to marketplace and you can all check out my github action and install it and I should add some user's instructions here, but basically we should be able to finish this whole show to use um the action from my other repository now.

C

So again I use the workflow dispatch trigger, but I could use any kind of trigger I want there are hundreds of them. I think, um like probably 50 different events, and within these events there are hundreds of different actions all right, so something didn't work. Unfortunately, so it looks like we still don't have the discord and I'm embarrassed because I did this a thousand times before, but it's still okay.

C

I know, I think we're running out of time. We can stop here, but basically what I need to do is to um get at dist.

C

And then get commit.

C

Release- and I think that should be it- why is it okay.

C

I'm not sure why it's complaining about the syntax right now, but I think that in order for committing, I have to go to the actions checkout and there is a information here.

C

What I need to do before I can commit. I need to basically configure my get user um email. Okay, so that looks good. I just add dist and then release.

C

And I hope this will work.

C

C

All right am I still on a stream, even I think so. Okay.

C

Thanks for bearing with me y'all, thank you so much.

C

C

So now we are waiting for our one zero two release and it never gets old for me to just watch this releases automatically happening and I no longer need to create get tags. I don't need to create change logs. I don't need to create github releases or anything, but let's hope this actually works this time.

C

All right that seemed to have worked: let's go to v1, okay. Now we have to this folder, so it would be beautiful if the demo gods would permit me this final success here, where I can run a github action. I just created from scratch, with javascript and autocad, publish to the marketplace and now use from another repository in order to boop my.

C

C

Oh okay, that looks good what happened?

C

Oh no, some uh some error here that I will have to investigate um that I'm not sure oh hold on. I think I actually know what the problem is. So I still use the github token here and I cannot I use now an action input and for that I will install actions.

C

C

And I think it's just like this.

C

And then core get input and then personal access token. I forgot that part. So you remember, I defined the personal access token input here and it has to be set, otherwise it will already fail early on, but I also have to use it so now, I'm using this input here. As my token, instead of the github token environment variable which doesn't exist so fix, use personal access input for alpha.

C

Thank you bill with m heap very kind of you. Okay,.

C

So again, we have to wait for the release to finish.

C

C

I am optimistic that this will work now.

C

Okay, this seemed to have worked so and again. I will automatically retrieve the last version of the action because of this branch hack that I'm using for somewhat semantic versioning.

C

C

C

Yay, okay, so it created an issue because I used a token from gr2m test. So I created this issue which now should have triggered my boop action in this repository, because a new issue was created by gr2m test. So after a moment it will bump my nose and there we go and that's all I wanted to show you today.

C

Thank you so much for bearing with me and I'm looking forward to I'm looking forward to your questions and yeah happy booping.

B

C

Goodness that was awesome.

B

C

Sorry for all the hiccups, I should have come more prepared, um but you know it.

B

Will I shouldn't I.

C

Shouldn't have praised the demogods too early in the show. That was my mistake this day, no.

B

It was very cool for you to to kind of troubleshoot your code as you were, going along uh on the 30 minutes to merge, show we do have a history of things not going exactly to plan. So it was good to see that that continued um we've kind of had some hiccups along the way, but that's always kind of some fun, because then we get to see our guests kind of struggle to figure out what they need to do, to get it to work and uh kind of shows that everyone's learning all the time.

B

um So I want to remind everyone that we are now going to be moving from the stream over to our github community um to answer any questions that people might have either related to the show that we just had, or in general and um yeah again gregor. Thank you so much for joining us today. It was really cool for us to uh watch you boop some noses and um yeah. So yeah.

B

If you have any questions, feel free to jump into the the link that andrea, just posted in twitch, chat and um gregor, and I will be answering questions as they come up for the next 15 minutes or so, and then you can always follow uh gregor on twitter at gr2m and I'm also at beard of edu. I don't post ever, but you know it's always nice to pretend that I have followers. So all right, everybody! Thank you so much for attending. I know andrew's popping in to say goodbye.

A

I am yes, thank you so much everyone. I just want to share the slide. So uh this is where we're going, I'm going to kick you off beard. I'm sorry see you in a bit, so we are going to be joining uh both beard and gregor on the github community, and you can definitely reach us at the half community. They have that community forward slash t4 last 30 minutes to merge.

A

They have automation, you'll, be able to see uh the event post there and the q a itself is going to take place at the very bottom of that event. Topic so uh join when you can and also I have an invitation for everyone and that's what kind of picked out earlier when I was trying to tee it up and it's uh tomorrow, we're gonna be hosting an ama about the state of the octopus report.

A

So if you're wondering how all those numbers get to that fantastic report that teaches us about productivity, how, where are we working um developers? What they're doing to improve their workflows et cetera? This would be a really exciting um ama for you. So without further ado, I will see you on the community uh we'll be joined by gregor. I'm gonna leave the slide with a qr code. So as soon as my face and this header is gone, you'll be able to see it. Thank you all.

A

We'll wait for you in the community have a great day thanks for.

A

A