Dockerize a Slack Bolt App for Portable Deployment (Full Transcript)

[00:00:00] Speaker 1: You want to see how easy it is to get an app into a container? Watch this. 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 pull down an app that I built that we can use. This is a really cool Bolt app that does very simple approvals. We're going to build on it, make it better over time. And today, what we're going to do is we're going to pull that app down, and then we're going to set up Docker so that we can take that app and put it inside a container. Because apps are not very portable until you put them in something. Let's get after it. All right, the first thing we need to do is get the data down to our machine. Get the file, not the data. There's no data in this. Alrighty. So I'm here in my terminal. And in my VS code, I've opened up my repos folder. So I went up here, file and open folder, and I chose my repositories folder. And right now I only have the Slack School app of awesomeness. This is the one we worked on before, if you've been following along, but we need a new one. So I'm going to go over here to GitHub. Now here's my GitHub for Slack School, and there's nothing in it. Not a single thing. But what I've got though, is I've got another file here, and this is my personal one. And I've already built an app and it's going to be perfect for everything that we're going to do today. So I want to create a copy of this for my Slack School so that I can edit it and do what I want and the original stays untouched. I can do that by clicking fork. I don't have to worry about anything that's on here. Just click the green button that says create fork. What this does is it splits it, makes a copy, and I can use the copy, keeps the original intact. And now I need to get this into my machine so that I can begin to work on it. That's pretty easy to do. I can come up here and just take this URL and copy it and go back to my VS code. And we're going to say git, because this is a git function. We're going to say git clone, paste the entire URL, and then we're going to add a dot and type git again. That's going to clone the entire app, all of its code, and put it right here. So now I'm in my repos folder again. I can still see all of this. Now I prefer to not be in my repos folder when I'm actually working. So I'm going to come up here and I'm going to say file, open folder, and I'm going to directly open this approvals app. Just kind of keep things clean. I need to get a new terminal window. And here, what I'm going to do is I'm going to say CD, that's for current directory. I'm going to put that little squiggle, do a slash, and I'm going to make sure that I'm all the way in the correct folder. So I'm going to type the whole address of my folder. So that just moved me directly into my folder. That means everything I do here is going to apply to this folder. And I want that. The next thing I want to do is install NPM. Really easy. I just type NPM install. Now this took care of a bunch of things for me, honestly, it doesn't even really matter what those things are. There's one more thing that we can do while we're in here. You've got a file called dot ENV example. Now a dot ENV file is where developers hold all of their important keys and different things that help them get access to the different systems and tools that they're going to use. Now we never, ever, ever share the contents of a dot ENV file. We also never put our dot ENV file into source control. This is for everybody's safety. We don't want to do that. So I've called mine dot ENV dot example. That dot example allowed it to go into GitHub. When you edit this, you're going to put your keys in it and we don't want other people to have your keys. So we'll go over here, we'll double click or right click, go to rename and just remove the dot example. That's going to turn it into a real dot ENV file and our git will not ever consume that file, which is going to help keep us safe. Now I know git is not going to take this file because I've got another file called a git ignore. And git ignore tells me all the things I want to make sure that yes, we can record these things on the local machine and we can use them, but we don't ever commit them to our actual code base. And in our case, that is not only the dot ENV file, but also all the node modules. We don't need to move all of those. They're all going to be where we run them inside of our container, which we can set up in just a little bit. But there's one other thing that we can do just to make sure that everything is going well. We should be able to turn this app on, on our local computer and just see if it turns on. So we can turn our app on by just typing node app dot JS. It looks like this node and then app dot JS. Here we go. So I got this message here, the approval bot is running. That's perfect. There's going to be some errors in there and that's okay. We expect those because we haven't really done anything yet, but our app ran. And if you got your app to run, that means that you downloaded it into your computer. You had all of your dependencies installed and you got things going. That means half the battle is already over. The next step is to put our app inside of a container. Right now we've got our app working, but it only works right here. And we want it to be able to work anywhere without this computer being involved. That means we need to take our app and put it in a container. The thing that's neat about a container is it has to be able to actually run our app and our app uses node. So what we're going to do is we're going to get a container. Don't worry about what a container is. Just know we're going to put our app inside of this thing that we're calling a container. And the container also has the instructions on how to get wherever we host our app. We're going to have those instructions kind of baked into it. So it ends up being like an actual environment where our code is going to run, but it gives us the ability to have it be portable. So instead of living here, we can actually move our app into where we're going to host it. Without the container, you can't move it. So let's go ahead and do that. We're going to use Docker for this. So Docker is really the tool you want to use. There are other tools out there, but Docker is free and everybody uses Docker. So I mean, you could use something else, but you're gonna have to Google the instructions by yourself. I don't know. This works really well for me. It's never let me down. Okay, I've got that downloaded. I'm going to go ahead and open it and install it. I'm going to go ahead and accept the service agreement. So now we've got Docker desktop. Docker desktop is a necessary part of this. Go ahead and download it. As long as you're allowed to download it, I suppose. Go ahead and download it. And once you have it, you can honestly just minimize it. I'm going to go back to VS Code, and I'm going to show you a couple of things that I've already written for you. One, we talked earlier about a git ignore and how git ignore was going to not pay attention to our .env files or our node modules. We want the exact same thing to happen in our Docker ignore. I also want it to ignore any git files that are there. We don't need to worry about that with Docker. So I've got those things already set up for us. We also have a Docker file. And as soon as I open that, it asks if I want to install the container tools. I can go ahead and do that now. I think that'll help things. It's a nice extension to have. So I'll close that because I don't need it. And I'm going to come back up here to my file browser, and then open my Docker file. And I'll minimize this so we can see a little bit better. What Docker is going to do, or the Docker file is going to do, is it's going to list out the instructions for when we actually use the container for what the container is going to do. So this is telling where we host our application what it needs to do. This is great because it ensures that when we go to run our application, everything we want to have operational is operational. You don't really have to worry about what's in here because I've already done it for you. And if you ever need to do one of these or you have a question about it, ask your local friendly Slack bot. So what we need to do now is get our app into a container. We do that with two commands. So I'm going to clear out my terminal by typing clear. And we're going to do this first one. First we need to build the container. And then we can run the container. So the command is Docker build. And then we're going to do a dash T and then the name of our app, all lowercase. So Slack school approval app. Then I know this seems weird. We're going to do a space and a period. Now what you just saw there was Docker actually building the container for this. And you'll notice it actually shows you how much time it takes. It's normal that this is going to take a little bit of time. Mine took 11 seconds. That's pretty typical. Yours will probably take something like that too. All right. The next thing that we need to do is this command that I've just put in here. It's Docker run dash P 3000 colon 3000 dash dash ENV file dash file space dot ENV space Slack school approval app. I know that's a lot. You can copy it from the notes in the Slack school approval app. I know this is a lot. In the Slack school channel, in the Slack community, I've got all these instructions written out. So if you want to copy paste them and just go grab it from there. So once I've typed that in, I can hit enter. And what this is going to do is it's going to build everything. And now I got that message that I got before. The approval bot is running, but this time it's running inside of our Docker container. That means we're ready to take our entire app in its container and then host it someplace. That's fantastic. Well, there you have it. Getting our app downloaded from Git into our computer, getting NPM installed, and then installing Docker and getting our entire app into a container in just a few minutes. That is pretty cool. We're ready now to take our app and deploy it into a server or host it someplace so that we can actually now go and use it. This is difficult stuff, but I'm really happy that you were able to follow along. Let us know what you thought of the episode by joining us in the Slack community workspace at slackcommunity.com. Jump into the Slack school channel and say hi, or give me an idea for another episode. I'd be happy to hear from you. Don't forget to like and subscribe, and we'll see you next time. Oh, hey, learning a lot of new stuff like this can be very difficult, but you should feel good about yourself.