Exposing Local Web Server To Internet Using Ngrok

ngrok

5.00 ( 1 votes) | 313

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

I was recently working on some bot framework applications where I want to test that my bot application is working properly with different available channels like Face book messenger, Skype etc. But there was one problem. Before I integrate my bot with different channels, I need 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 in 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 on. You can download the ngrok from https://ngrok.com/. It just contains one executable file called ngrok.exe. Add this executable to path environment variable, so that we can execute commands in any directory using command line.

Consider an example of 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 request on port number 3979 as shown below (F:1).

Bot Application - Dotnetcontext

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

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

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

Output Of Ngrok Command

As we can see in 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 browser. Output is as shown below (F: 3)

Http Tunnel Using Ngrok - Dotnetcontext

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

Request Coming To Local Web Server Through Http Tunnels - Dotnetcontext

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

Web Interface For ngrok - Dotnetcontext

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

  1. Inspect menu provides detail information about incoming request.
  2. Status menu provide information regarding the tunnel like total number of HTTP requests, connection duration and tunnel configuration as shown below (F: 6).

ngrok Status Tab Information

 

There are number of places where ngrok can be helpful. For example while developing API for mobile applications, I can expose my local web server to 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.

Note: Only one thing if we close the command prompt, then tunnel connection gets closed and if we execute the command again new url is created for HTTP as well as HTTPS tunnel.

Conclusion:

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

Happy Coding!

Manoj Kulkarni - Dotnetcontext

Manoj Kulkarni

I am programmer, passionate blogger and foodie. I live in Nashik. I am a .Net developer. I like to learn new technologies to keep my self-updated and share that knowledge with my blog readers, friends and colleague.

Add a new comment