Impressing Your Hackathon with Ngrok, Python, and Flask

Impressing Your Hackathon with Ngrok, Python, and Flask

You might be running on your third cup of coffee and working with webhooks right now. Maybe you’re developing programs with Twilio API services. You might have seen the term ngrok a few times and heard how this tool can solve all of a developer’s problems – but how impressive is it really?  

Follow along to learn more about how ngrok helps you test locally, and allows your program to communicate with a temporary public domain. The URLs make forwarding incoming Twilio SMS requests or other webhooks to your local development setup fast, easy, and impressive!

As someone who used to attend and organize hackathons, I can tell you that ngrok will impress not only the organizers and judges, but also your team!

Tutorial Requirements

• Ngrok, the localhost tunneling tool by Alan Shreve

If you have a Mac, you can download the ngrok client as a file in the first box here. If you are like me and downloaded ngrok straight to your desktop, then you will see the executable file icon. Here’s my ngrok executable file chilling near my desktop toolbar.

Run ngrok

Time to see if ngrok has been installed properly! Depending on where your file is located, you might need to type ./ngrok instead of ngrok into your terminal to see the following screen:

However, this doesn’t look like the information you need for your app, does it? You’ll need to specify the port number in the terminal and within the folder with your app.

For example, to run the program, you can run the following command in your terminal:

If you were able to get away with typing `ngrok` without the leading `./`, it means that you were able to install the file globally, and call it directly inside of your working directory.  

Woohooo! Your console should show you the ngrok dashboard.

Notice that you can pick from two `Forwarding` URLs to plug into your Twilio Console to forward requests. This page will also show you how to check the status of your `POST` or `GET` requests when you have them. 

Important ngrok features

When developing with ngrok, it is important to note that if you kill the dashboard, your `Forwarding` URL will change; thus, you will have to manually replace the webhook URL if you share it with another service. 

Creating memorable URLs

The fun fact here is that you can prevent the hassle of replacing your URLs each time you kill the dashboard by typing this command into your terminal:

However, setting a custom domain such as  http://iammrrobot.ngrok.io is only a feature for paid customers.

Another trick is ngrok lets you route wildcard subdomains. If you have a domain registered to your account, you can use a leading asterisk to bind all matching traffic to one app, as seen here:

These features prevent you from the frustration of tunneling name changes or dealing with an unappealing URL. You definitely want a memorable URL to woo the judges when you’re demoing on stage!

A Chatbot essential

Working on a chatbot for your favorite social media platform? Ngrok makes it possible to connect the service you’re hacking on with the webhook from your local computer, also known as your localhost.

When you have ngrok running in a new tab on your terminal, you can have it open for as long as you want to make quick development changes and test things out as you go. This saves you a ton of time versus the alternative –  pushing changes to a host server.

See? Ngrok is super convenient when you want to make sure your chatbot is working properly!

It’s also possible to share the unique or customized URL of your newly created project with teammates in real-time. Way to impress them, amirite?

Forwarding to different machines

Speaking of convenience, instead of sending the unique URL, you could also run the following command:

Where the IP address is replaced with the network address and port of the destination.

Working on large-scale projects

Run tunnels simultaneously

Working with more than one forwarding URL and writing a complex program with multiple webhooks? Ngrok grants you the ability to pass multiple tunnel names upon starting to run them all at once!

All you have to do is type:

Or simply use the --all switch.

Test multiple incoming requests

Another huge time-saver is that ngrok allows developers to replay an incoming request from the dashboard - you can access this request with your unique URL.

After booting up your ngrok server, go to http://localhost:4040/inspect/http to inspect your traffic, and replay multiple requests to trigger and test the hook requests instead of manually resending requests.

The screenshot above shows every request I tried to make, in addition to a snippet of the TwiML message on the bottom right hand side.

TwiML is short for Twilio Markup Language, an XML-based syntax that the webhook can use to provide instructions to Twilio regarding how to handle a communication event. Check out TwiML and see all that it has to offer. You might be able to use it to spice up your hackathon project!

Compatible swag extensions and packages

Who doesn’t love free swag? Well, in this case, free extensions to upgrade your development setup.

There’s an extension for those who develop with Visual Studio, as well as an extension for (arguably) the best IDE, Visual Studio Code. If we’re learning how to make our life easier, might as well add on these extensions to make everything look aesthetically pleasing, y’know?

pyngrok is Python package that can make the development process a whole lot easier by automating our work and making ngrok available anywhere on the command line. You can also change the ngrok_path and use ngrok’s services to your advantage.

But wait! Is ngrok safe?

It’s worth mentioning that ngrok is indeed, safe to use, but your ngrok URL should only be shared amongst people you trust! The goal here is for you to make it convenient and snappy to share a project that requires a complex setup of environment variables and more.

However, since you’re usually in some kind of debug mode when using ngrok, your application is likely more vulnerable than it would be in production. Nonetheless, this is convenient because your whole team can debug together instead of having to set up the local environment multiple times.

Sending this link to someone on your team, such as the product manager, can also help them demo on stage with ease.

Lastly, ngrok does not store any of the data that is transmitted through your tunneled connections, so you don’t have to worry about anyone else seeing some sleep-deprived code in action.

What’s next for ngrok in action?

Now that we have a server running, why don’t we try out some other fun tutorials that require an ngrok server. Here are some ideas for you to truly understand the magic and power of this dev tool, and, more importantly, win that hackathon!

• Play chess with friends using Python, Flask, and Twilio Programmable SMS
• Create a chatbot for your favorite websites such as WhatsApp
• Build a backup system with a WhatsApp chatbot

Overall, ngrok is a powerful tool that developers working with Twilio APIs, Python, Flask, or any project with webhooks should explore and keep handy for fast and easy development.

Keep in touch to let me know what project you’re working on and how using ngrok has made your life much easier!

Diane Phan is a Developer Network Intern on the Developer Voices team. She loves to help beginner programmers get started on creative projects that involve fun pop culture references. She can be reached at dphan [at] twilio.com.