Automate Slack App Deployments With GitHub Actions (Full Transcript)

[00:00:00] Speaker 1: Do you want to see how you can automatically deploy with GitHub Actions? Watch this. Hello. Hello, and welcome back to Slack School. My name is Mike Reynolds. I'm your host. I'm part of the Slack team here at Salesforce. And today, we're going to learn how to automatically deploy our Slack apps using GitHub Actions. Using GitHub Actions is a really easy way to have a CICD pipeline work, even if you've got a lot of different tools that you need to consider. This is going to happen to us a lot, as we have Slack and a back-end system somewhere else. This is going to work if you've been following along with the previous few episodes. So go back. Make sure you've seen how we put our app into a container, and then how we get that container hosted. We're going to pick up where we left off, and we're going to use GitHub Actions to deploy changes that we use to our app into our hosted app out in the cloud. It's going to be great. Let's get after it. Let's get started by looking at our app, which is currently deployed to Railway. I'm going to click on this tile here. That's going to open up my app. And the first thing I need to do is Railway has got a nice setting. Since I've authenticated and connected it to GitHub already, it's automatically deploying for me. I'm going to turn that off, and I'm going to use GitHub Actions for this. The reason for that, again, it gives us a lot more control with what we want to have happen. And it's more realistic. If you're a big enterprise and you're doing this at home, you're going to want to be using GitHub Actions or some other bigger CICD tool. So I'm going to, again, the way that I did that, I clicked on this to open it up, go over to the settings, and then scroll down to where you see the branch connected to production. This is where it's managing the automatic deployments. Again, this is just a Railway feature. I'm going to disconnect here. It's OK. We want that to happen. Now, there's always going to be this manual deployment button here, but I don't want to use that. I want to use GitHub Actions because I want this to be automatic, and I want to be able to write that action myself so that I'm in charge of exactly how it's going to happen. So what we need is we need to get another token, and then we need to give that token and our other tokens to GitHub, where GitHub also is going to need the same access that Railway had. So we'll get a Railway token when I'm inside my app already. I can click on this Settings over here and then go down on the side to Tokens. Here, we're going to create a new token, and let's just call this GitHub, maybe GitHub Action. I want to leave this as production, and I'm going to click Create. Now, I'm not showing you what's on my screen because you don't need to see my token, but I'm going to go ahead and copy that token, and I'm going to put it in VS Code in my .env file. I've got a spot for that that I've already put there. So go ahead and get your .env file up because you're going to need to copy all three of the tokens that we have because we're going to move them all into GitHub. I'm going to start out by copying my Slack bot token into GitHub, but first, we're going to need to find where these go inside of GitHub. So I'm going to open up my app again, and when you're looking at your app, you're going to have an option for Settings. We're going to click on Settings, and on the sidebar, I'm going to scroll until I see Secrets and Variables. Then when I open that menu, there's a specific set for Actions. We want to go ahead and click on Actions. Then we're going to look at this Repository Secrets here. This is where we can create a very safe place to hold our tokens and any secrets that we have where GitHub can use them, and then we don't have to worry about people being able to get into them. So I'm going to do a new repository secret here. We can give this a name. This one's going to be my Slack bot token, and then I'm going to paste my secret in here. You don't need to watch this part. There we go. Got my secret posted in there. Now click that big green button, and your screen is going to look like this. Now, a note just in general. A lot of tools, once you enter in your secret, you can't go back and see it again. And it's very normal. It's very common. Remember, with your Slack bot token, that one that we've created from your .env file, you're going to take the whole thing from the xlxb all the way to the end. Doesn't matter. I know it's really long. I know it doesn't make any sense. Just grab that whole thing and put it in there, and we're going to repeat this with our other two tokens. I'm going to go ahead and do the Slack signing secret next. So same thing, new repository secret. I'll put the name in there, Slack signing secret. And then again, you can't see. I'm going to grab my token, paste it in, and hit the Add Secret button. So I've got two of these now. We'll go grab the last one. That is your railway token. GitHub doesn't need to know that we're on port 3,000. No worries there. We'll grab that railway token that we just generated. Again, that railway token, it's a project token, not your whole railway account. And now your Git should look like mine. We've got the three tokens created, and they mirror what's in our .env file. Believe it or not, that's all we need to do for this one. And the reason being, I already created a YAML file for you. Let's go ahead and take a look at it. It's in our repo. So I'm over here in GitHub. You'll notice you have a folder called .github. And inside of .github, you have another folder called Workflows. And then inside of that, you have deploy.yml. Fun fact, YML and YAML are the same. They're both pronounced YAML. And as to why one of them doesn't have an A in it, well, someone decided that was a good idea. This wasn't a good idea. It's just confusing. I agree with you. But nevertheless, here we are. If you click on your deploy.yml file, we'll see a couple of different things in here. And this is essentially what GitHub is using to push to Railway. So it's saying deploy to Railway. It's got a name. And then when I push a branch to main, it's going to run a job to deploy the latest of whatever we've checked out. And then it goes through these steps. It checks out the code. It installs some NPM stuff so that it can do its work. And then it deploys this specific branch of this app using that token. It's pretty simple, but it gets the job done. Now, we can test this out because I have a couple of changes that I can actually push that I've made to the app. And you should have some too. If you click on your source control tab, which looks like a little forked branch, I made a change to the readme. You probably don't have that. But you would have a change over here. So if I click on this file, which is your manifest, you're going to see that you've made a change with your specific URL. And I can kind of see that change here. There's a red line and a darker line. And then down here, again, I have this is the old line and this is the new line. This is kind of the way that Git works. Git focuses on the changes between one version of the code and the next version of code. And so that's what we're seeing here. So I'm pretty happy with these changes. And I'm going to go ahead and deploy them now. We're also going to be able to watch this happen. And so I want to get that set up. So I'm going back over into GitHub. And I'm going to click on the Actions tab. And it says, yep, I understand my workflows. Go ahead and enable them. OK. So we haven't done anything here yet. But I'm going to leave this screen up. I'm going to go back to the S code. And I want to go ahead and get a couple of things done. So I'm going to say, Git add, and then just a period, and hit Enter. That's going to stage all of my commits, make sure that they're ready to go. Then I can do Git commit, going to do dash m. And we need to give a little message. That's what the dash m is. I'm saying I'm going to type a message. And we'll say, update URLs. And hit Enter. And then Git push origin main, which is going to take all of my changes and push them out. Once I do that, I can jump back over here to my Actions tab. And I just hit Refresh. And I can see now that there's a workflow running. What Git Actions do is they have GitHub actually take an action. In this case, it's the one that we defined in our YAML file. It's going to take all of the changes that we made and push them out to Railway. Railway will then rebuild our app inside of its Docker container. So we're putting together three episodes worth of stuff to be able to get to this point. So hopefully you've been following along. All right, great. That ran. So we can take a look over here. And if I just go back to our actual project, I can see that 44 seconds ago, I just pushed a change. So everything worked exactly as we'd expected. Well, there you have it. Over the last three episodes, we've managed a lot. We figured out how to build an app and put it inside of a container. We know now that that container is a miniature environment that contains all of the nuts and bolts and the operations of what's going to run our app. And we took that container, which made it portable, and then we hosted it. We chose to do that in Railway. But you can host an app almost anywhere. You could even host it on your local machine if you wanted to. But I don't recommend that. Once we got it hosted, we used GitHub Actions to be able to push to that new hosted app so that we can now just make a change in our source control and then make sure that our app has been updated. That is pretty cool. Let us know what you thought of the episode by joining me in the Slack community at slackcommunity.com. You can jump into the Slack School channel and say hi or let me know what you want to see next. Don't forget to like and subscribe. I'll see you next time. Hey, proud of you. Did a good job today. I'm getting good at this clapping thing, you know? I never thought I'd have to be good at clapping.