Python-powered chat apps with Twilio and SendGrid Transcripts
Chapter: Creating the Flask Python web app
Lecture: Allowing external systems to call our dev API with NGrok

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 So we've run into a bit of a problem and I have a fantastic solution for
0:04 you, but let me lay out the problem really quick.
0:06 We have our local Web API running right here, on local host.
0:12 We cannot get to it outside of this computer.
0:15 It's very unlikely we want to set up some mechanism to do so.
0:18 We've got this computer which probably is a firewall.
0:21 It's probably behind a wireless router,
0:22 which has some kind of NAT firewall.
0:25 Exposing that all the way out to the Internet is tricky.
0:28 And then our ip changes and all sorts of stuff can be complicated
0:31 there. I'm gonna show you a really cool general purpose way to expose local API's
0:37 and Endpoints and even just Web applications in general,
0:41 outside of our network, in a really,
0:43 really straightforward and simple way. But we're going to use a tool called in ngrok
0:47 The idea is that in ngrok will create an ssh tunnel from our computer all
0:53 the way out to the end. ngrok servers, then the ngrok servers,
0:56 Listen on the public Internet. So what we're gonna do is when a point twilio
0:59 studio at the public in ngrok Server,
1:02 which will, behind the scenes,
1:04 find a way for that request through ssh to actually get to our web endpoint as
1:09 if it came directly to us.
1:12 And that's going to be how we are going to develop and test this end point
1:16 is going to be really, really awesome.
1:18 All we gotta do is download in ngrok and you can see we're gonna run it
1:21 right there, like so it has a free version,
1:23 so that's great. So we're gonna hop over to the terminal if you're on windows
1:27 do this in the command prompt and what we're gonna type is in ngrok,
1:32 and then we're going to type the type of tunnel we're going to create.
1:35 What? We want to listen to http.
1:36 Also https traffic. And then we say,
1:39 the local port on this machine that we want to listen on.
1:43 You look over in flask. You can see that there's Port: 5000 right there.
1:48 So we say 5000 and check that out.
1:50 We got an http and Https port like so,
1:56 And if I just go throw that address into the browser,
2:02 check it out. It's cloud city.
2:04 But cake Company. So this is the actual end point.
2:08 This is our our local server running.
2:11 See, down here we're getting those requests by Erase that and make another request.
2:16 You can see there's our get right there.
2:18 So this is our local Dev machine,
2:19 our local Dev environment exposed out on the Internet in a public way.
2:23 This is a public end point so we can put something like this in the twilio
2:27 studio and test our code. However,
2:31 instead of just running it this way if you have a paid account.
2:35 No if you don't, this is fine.
2:37 Just do that. Take that.
2:38 You're all but notice if I rerun it and now have a totally different thing.
2:41 5c, if I rerun it again and now it's f0.
2:44 Every time you rerun it, it's going to be starting over.
2:48 So if you're doing this and you don't have a paid account,
2:51 just run it and leave it running.
2:52 It doesn't matter if the website up and running or not.
2:55 But what I'm gonna do is I'm gonna go over here.
3:01 I'm gonna say sub domain is Cloud City and notice this I can go to a
3:08 more stable endpoint cloudcity.ngrok.io. That way,
3:12 throughout the course, I don't have to keep changing it,
3:14 going back and sinking it up and whatnot again.
3:17 This requires one that domain to be available currently and to do you have a paid
3:21 account. But if you don't just use the temporary one,
3:24 So let's go over here and put this in, as the end point right here.
3:29 Now we don't want just this.
3:30 Remember, we want api/order,
3:33 but this may well do it.
3:35 It's it's save, and now we're going to be able to go and do our
3:40 post against that endpoint. Let's just double check that really quick with postman.
3:49 Do a post against https for Cloud City.
3:52 Send it and sure enough, we're getting something back.
3:56 Let me just make a change.
4:00 Show that actually this data is live.
4:02 It's not just some kind of caching.
4:04 There we go. It looks like a round trip through in ngrok,
4:07 exposing our API to the public
4:08 Internet is up and running. You can use ngrok for all sorts of amazing
4:13 tools. If you got to do like a Web hook at Git Hub.
4:16 If you're building a mobile app and you want to be able to debug,
4:19 the API calls that the APP is making all those kinds of things are possible and
4:23 easy with ngrok. Definitely, definitely recommend it,
4:26 and it's going to be what we'll use to integrate Twilio studio into our dev environment
4:30 before we push our API itself into production.