Test Slack Bolt Apps Locally Using ngrok Tunnels (Full Transcript)

[00:00:00] Speaker 1: Do you want to learn how to test your Bolt app locally? 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 I'm going to show you how to do some local testing of our Bolt app. If you've been following along, we built a really cool app for basic approvals using Bolt. Bolt is one of the frameworks that we can use to build apps. You've got two to choose from, Bolt and Denno. When you're making that choice, one of the benefits you get from Denno is that you can do Slack run. Slack run is a command in our CLI that allows us to use a web socket. Don't worry about what that means. But the end result of that web socket and Slack run is that on my machine, I can quickly run my app in Slack. Now if you're doing that with Bolt, Bolt typically relies on an app being hosted somewhere. So we need to be able to pretend that we're hosting our app somewhere publicly, even though it's really still on our computer because we're still working on the code. We're going to do that today using ngrok. It's pretty easy and it's fun. Well, I think it's fun and I'm easily entertained. Let's get after it. Let's get started in VS Code. The first thing we need to do is install ngrok. So, oops, pretty straightforward. All we need to do, brew install ngrok. It's pronounced ngrok. If you want to pronounce it some other way, it's probably okay. If you say it super confidently, no one will tell you you're wrong. Maybe ngrok or grok. All right. We've got that successfully installed, but we're going to need an ngrok account. So what I'm going to do is just Google it. We'll find here. I'll click on this and sign up. I'm going to go ahead and sign in with my Google account and we'll agree to the terms of service and go and create it. While this is loading, what ngrok allows us to do, I'm going to skip that. We don't need it. What ngrok allows us to do is essentially create a tunnel between where Slack is going to run and our machine. Right now, our app is hosted in Railway, but I might want to change it. Maybe we're going to change the blocks in the block kit and we want to just change the look and feel of the app. Do something. It doesn't really matter what we're doing and I want to test those changes locally. Well, it's kind of a lot of work to go ahead and take all of those changes, package them all up into my container and then deploy the container and then make changes to source control. Maybe I don't want to do all of that. I just want to test out a small change to see if it's going to work before I commit it to source control. It's a very reasonable thing to do. What we would do is use ngrok to create a connection between our machine and Slack so that we can see those changes come to life. Pretty straightforward. Now we've got our account set up conveniently. It gives us all the instructions that we're going to use. We already did this brew install ngrok and now I've got this next one about authorizing. We learned about authorizing last time, so I'm going to explain this bit and then I'll show you exactly what's going to happen. We're going to take this ngrok config add-auth token. I'm going to copy it and come over here and I'm going to paste it. I'm going to hit space. I'm going to come back over here and I'm going to copy my auth token, which I get from here, and then I'm going to come over here and paste it. Of course, you can't see this part. I'm going to paste it. I just hit enter and I'm going to get something that says auth token saved to configuration file blah, blah, blah, blah, blah, blah, blah, which is all just dandy. Now I'm going to hit clear on my terminal so that you can see my screen again. Now I've got ngrok all the way up and running, but I need to tell ngrok I wanted to use my local 3000. We've seen 3000 in the app code in a couple of different places, so we can do that easily enough by typing this, ngrok HTTP 3000. When we do this, we're going to start to see a screen that gives us the URL that we can use for hosting our app locally. We're literally already done. This URL right here is going to now do the same thing as localhost 3000. So I'm going to go ahead and copy this, and then I'm going to go back to my browser and I'm going to go to api.slack.com forward slash apps. I'm going to pick my app here. I'm going to go down to the app manifest, and we've got two spots in here where we've added URLs. There's one up here for the slash command where I have this portion. I'm not going to get rid of the entire thing. I'm going to leave that slash slack events, but I'm going to paste over the ngrok URL that I just copied from my terminal. I'm going to go down here, and in the interactivity, we've got another one, going to do the same thing. I'm going to copy this portion. Again, I'm leaving the slash slack slash events, and I'm going to paste that in. I'm going to save those changes. So now I was able to update the manifest. So now my app is pointed to my ngrok URL, which is pointed to my machine. So now any changes I make locally are going to work, and I'm not actually using the hosted version of the app that is running in Railway. I've also not done anything in GitHub. So I haven't done anything in GitHub. So GitHub is still just fine. The container is just fine, and my hosted app is just fine, but any changes I make are going to be seen directly in my app because my app is currently pointed according to the manifest, which is what Slack uses. It's pointed to my local machine. So let's go ahead and turn our app on. Turning the app on when you don't have it hosted and we don't have it in a container is actually pretty easy. I'm going to come over here. I've got a little plus. I'm going to click that, and it's going to open up a new terminal. Here I'm just going to say node app.js. That is going to turn my app on. So now my approval bot, which is the name of my app, is running. So let's go jump into Slack and see what that looks like. Here's what it looked like when it ran before, so I should be able to see something very, very similar. Again, I just need to jump into any channel, and I'll do slash, open up my approval request. There we go. I didn't get any error messages, which is wonderful. Again, I'm going to test this by just choosing myself. Oops. This is super cool stuff. I'm going to hit submit, and I did get my notification, which is great. This seems good. But did you notice the other approvals are gone because this is running locally? And if I hit approve, it seems to work just fine. You'll notice this one, the local version, is different than this one, which is the hosted version. That's expected. It's supposed to work like that. Another thing I'll point out is that right now, I actually need both of these terminals. This one is where my node app is running, and this one is maintaining my tunnel, and that's important. If you go closing these, you're not going to get the same result. So there you have it. Testing locally is easy as anything. I do want to tell you there are some limitations, of course. We're using this in a free tier, and there's a couple of things that that's going to do for us. We can only have one ngrok connection at a time. So if I am doing something where I'm trying to test two things at once, it is not going to work unless I have two computers. Another thing is that every time you turn on ngrok and you start it running, you say that ngrok HTTP 3000, each time you do that, you're going to get a brand new URL. So if I test today and I test tomorrow, I'm going to have to update the app manifest in my Slack org every single time. That's okay for the purposes of testing, because remember, I didn't change my source control, and I didn't do anything with my container or the app itself. This was just for local testing. So once I've changed the app, I can copy my manifest file back, paste it in, update Slack, and we're done. The app is back to running normally. But if I'm trying to experiment and I'm trying to check to see if something works, using ngrok will allow me to run a pretty complicated app right here on my computer. And that is pretty cool. Let us know what you thought of the episode or give me an idea for a future episode by joining me in the Slack community at slackcommunity.com. Jump into the Slack School channel, give me some feedback on how it went for you, or just say hi to the other people who are on their Slack learning journeys. Don't forget to like and subscribe. We'll see you next time. Oh, and hey, you should be really proud. You're doing great. Are you going to be cool? No. You're not going to be cool, are you?