Exposing Local Web Server To Internet Using Ngrok

In this article, we will talk about how to expose a local web server to the internet using Ngrok.

I was recently working on some bot framework applications where I wanted to test that my bot application was working properly with different available channels like Facebook Messenger, Skype etc. But there was one problem. Before I could integrate my bot with different channels, I needed to publish my bot application and register it on http://dev.botframework.com/ site. Also, the endpoint should support HTTPS. This is where ngrok comes into play.

Ngrok allows us to expose a web server running on our local machine to the internet. We just need to tell ngrok on what port number our local web server is listening to. You can download the ngrok from https://ngrok.com/. It just contains one executable file called ngrok.exe. Add this executable to a path environment variable, so that we can execute commands in any directory using the command line.

Consider an example of a bot application (We can use any web application). If I run the bot application which I created using default project template in Visual Studio 2017, it starts listening for requests on port number 3979 as shown below (F:1).

Now I just need to execute the following command in command prompt to expose my local web server which is listening for requests on port number 3979 to the internet.

ngrok http 3979 --host-header=localhost:3979

In the above command, 3979 is the same port number on which my local web server is listening for incoming requests. The output of the above command is as shown below (F: 2)

As we can see in the above image, ngrok has created two tunnels for our local web server. Out of the two tunnels, one tunnel supports HTTPS. I can use the HTTPS URL to register my bot application and start testing.

Let`s open up the https://c48d5aca.ngrok.io link in the browser. Output is as shown below (F: 3)

As we can see in the above image, my local web server which is running on port number 3979 is now exposed to the internet at https://c48d5aca.ngrok.io/ URL. If we go back to the command prompt, we can see the HTTP request coming through the tunnel to our local web server as shown below (F: 4)

Ngrok also provides a real-time web UI using which we can also inspect the traffic to our local web server through the http tunnel. The URL for the web interface is http://localhost:4040/ (F: 5).

As we can see in the above image, there are two menus in the top navigation bar: Inspect and Status.

1. The inspection menu provides detailed information about incoming requests.
2. The status menu provides information regarding the tunnel like the total number of HTTP requests, connection duration, and tunnel configuration as shown below (F: 6).
   

There are a number of places where ngrok can be helpful. For example, while developing API for mobile applications, I can expose my local web server to the internet using ngrok and use tunnel URL in my mobile application to access the API locally. It will help me to easily debug and test my API in mobile application.

Conclusion

In this article, we talked about how to expose local web server to the internet using ngrok. I hope you enjoyed reading the article.