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