Creating a Netlify Tunnel

[00:00:00]
>> We are going to clone the start branch of the Learn with JSON chat ops Frontend Masters repo. To clone this repo, we're going to run GitHub repo clone learn with Jason, and then chatops-frontend-masters. And then I'm gonna run a-- to get us out of the GitHub CLI and into just plain old git commands.

[00:00:21]
And I wanna clone this start repo, so -b for branch and start. So, this is gonna give us the start branch, and when I move into this, I can see that I'm on the start branch. So, here we have the pieces that we're gonna need, and there's not a lot in here.

[00:00:40]
These are all just stubbed out files so that we have a starting point to work from. And then we've got our big old file of type definitions so that we don't have to write any of those ourselves. You can look at those if you're interested but you won't need to be in this folder at all.

[00:00:56]
Then we have a couple other pieces that we'll want, like we've got the Netlify config setup here to grab the functions from the right place. And to set up a redirect so that we can use a slash API command instead of anything else. And yeah, that pretty much puts us in good shape here, so, Next, what I'm gonna do is I wanna get this ready for us to develop.

[00:01:20]
So, I'm gonna NPM install, and that gives us the dependencies that we need. There aren't a lot in this one. We're basically using Netlify functions and then the types node, we'll install, actually I don't think we'll install anything else as we go. This is a pretty lightweight bot which I always appreciate, because it means there's just less things to hold in your head as context as you go.

[00:01:43]
Then the other thing that we need to do is we need to actually deploy this to Netlify so that we can run the live tunnel, and that's because Netlify is using details from the project to set up the live tunnel. So we're going to run a GitHub repo fork.

[00:01:58]
And this is going to give me a copy of this repo in my personal account, and I do want to add a remote. Okay, so now that I've got this cloned on my own version of it, I can push this thing live and be able to use it.

[00:02:20]
So the reason we're gonna do this again is because we need to have a live tunnel, because Slack bots operate by sending requests to a live URL that we set up. So, similar to a webhook if you've ever set one up. And the way that a webhook works is that it's a URL available somewhere publicly on the web.

[00:02:37]
And whenever the app that you've added a webhook to has something for your particular command, it sends that payload to that live URL. So for us to test a Slack bot, we need to have that live URL, which won't work with local development. So, the Netlify CLI has this built-in feature to add a live tunnel into our local development box, which means that we can use the web hook public URL field on Slack with our local development box.

[00:03:10]
Which it's gonna make such a huge difference for the speed of development. Cuz our only alternative would be to actually deploy this every time we make a change to test it and see if it works, which is it's slow. It's frustrating. And it just tends to take, it takes me out of it if I have to wait five minutes between trying things.

[00:03:27]
And I tend to get distracted and move on to other projects, and I just tend to not make a lot of progress in those instances. So, now that we've got this thing forked, I am going to install the Netlify CLI. Okay, so we've got the Netlify CLI installed, wow, and I'm gonna run netlify-v to get the version.

[00:03:49]
So, we're running Netlify CLI version 15.2.0. Then I'm going to make sure I'm logged in by running Netlify login. And it says I'm already logged in. Why don't I log out so that I can show that actual flow? Okay, so I'm gonna run Netlify login, and it's going to open up my GitHub account, or my sorry, my Netlify account, and ask if I meant to log in, right?

[00:04:23]
So, I want to authorize that. Great, I can close this window. So I'm gonna close this one down and then back here. I'm now logged in. And if I run Netlify status, it will show me who I am and all that. But it says here, I'm not in a folder that's linked to a site, and that's expected cuz we haven't set one up yet.

[00:04:43]
So, we're going to set up that site by running Netlify in it, And we're going to connect, let's say we want to create and configure a new site. This is a brand new one that we wanna ship. So, I'm gonna put it on my team, and we can call it whatever we want, but because we're going to have to update this name in a few places, I'm gonna give it a name that I can remember.

[00:05:06]
So I'll just go with like a short name like that, and then we don't have a build command, we can keep the defaults there, it's gonna set all that up for us. Good, and now we're happy. So next, we can start this thing in live mode. So, the Netlify dev command will start a local dev server, it'll auto detect what's going on, because in this case we're using serverless functions, which we'll talk about in a moment.

[00:05:33]
Netlify is gonna auto detect all of that. But what we want to add is this live flag. And so what the live flag does is it tells Netlify to set up that live tunnel, which again, we need to be set up with a deployed site to use that live flag.

[00:05:48]
Because it's gonna use the name of the project, and just a few other things to actually make this function. So, this is now a live running instance of our development box, which is available on the web. So, if I go in here and I look at our function here, this is our function for the Slack, and right now it doesn't do anything other than return a 200 status.

[00:06:17]
And the body handles Slack interactivity. So, if I head back out, open that in the bigger window here, and I head over to API Slack, we've got, that's running in the web. And anybody who wants to can hit this if you go to the chatops-fem-22e106.netlify.live/.api/.slack, that is going to run on your computer right now for as long as my development instance is running.

[00:06:52]
And the reason this is exciting is it means that I can now use this. And whenever I make a change, That change is also available through that live URL instantly. And so that means that my local development will be reflected in the Slack/command on Save, instead of requiring me to deploy the serverless function every time.

[00:07:15]
And even if it only takes a few seconds, it just takes you out of your flow. So, this is a big reason, it's why the inconvenience of having to get that site deployed and set up in Netlify CLI, it's why it's worth it because you get this extra interactivity.

[00:07:30]
And this is handy in a lot of reasons. Like you can use this to share your work in progress with a co-worker without having to deploy it or all sorts of other things. But in this particular case, I don't know of any other way to do this other than setting up something like ngrok.

[00:07:43]
Which is, again, basically the same functionality but it's a little more involved and it's a separate service as well. So, that is gonna be the the foundation of running this bot.