How to Expose your localhost server using Ngrok
Have you faced a situation where you want a remote team to access your APIs, test webhook integrations or a client to get a quick look and feel of your web application that’s running on your local machine? If so, you may want to check out ngrok, which is a tool available to be installed on multiple platforms. In this article we shall specifically take a look at how to generate a public URL and seamlessly test a local ASP.NET web app using ngrok on Windows.
What is ngrok?
Ngrok is an easy-to-set up, cross-platform tool that builds a secure tunnel over the internet through your NAT or firewall to let someone start testing your localhost web application in a matter of minutes. Ngrok saves you the hassle of reconfiguring your firewall settings when deploying code changes, while being served over a dynamic IP. If you’re a UI/UX developer wanting to perform mobile device testing or to get feedback from users, rather than deploying you can rely on ngrok to quickly generate a public URL that can be shared with others.
What’s cool above all is that ngrok comes with a web UI that keeps track of HTTP traffic going through the tunnel and it also lets you replay requests! Dramatic, isn’t it? Before we dive into this let’s see how to get started.
Getting started
To install ngrok click here and then head over to ngrok.com and create an account. Having an account gives you free access to dashboards, longer tunnel timeouts and more. Once installed make sure you add the path to your environment variables.
In the dashboard you should see the authtoken provided for your account. Run ngrok.exe and type the command below with your authtoken in the terminal.
ngrok authtoken <your authtoken>Next, tell ngrok to open up a HTTP tunnel to the port your web server is listening to. By default, it is probably port 80, so the command below will generate a temporary random public URL similar to
https://d78e-175-157-46-176.ngrok.io
which can be used to access your web server over the internet.
ngrok http 80
You can also set up a password to authenticate tunnel requests using the command below
ngrok http -auth="username:password" 8080When you shut down the ngrok terminal the same URL can no longer be used, and starting it over again will create a new URL. However, a paid account enables you to have a custom domain or subdomain so that you don’t need to keep updating the URL. See here for pricing details
Debugging a ASP.NET app with ngrok
Let’s start working on an actual development web server. To speed up things, the open source ngrok extension on Visual Studio automatically installs ngrok to your machine, figures out the right ports and opens up a tunnel for you!
Let’s see how this is done.
Go to Extensions > Manage Extensions > Visual Studio Market Place > Search ‘ngrok’. Install Ngrok Extensions. Don’t forget to set the path in environment variables.
Next, go to your firewall settings and open the port (in this case 44364) that your program uses by setting up new inbound and outbound rules as you see fit.
Once that is done, run your local app, then click on ‘Start ngrok Tunnel’ from Tools menu and that should fire up the ngrok terminal as shown below.
Copy the above https URL to you web browser or share it with anyone to access your localhost web application.
To manually fire up a tunnel on ngrok, type the command below.
ngrok http -host-header="localhost:44364" 44364You can debug your app by setting up breakpoints on your code and anyone using your app will hit those breakpoints.
If you have a web API, and you want to GET or POST data, your API endpoint could for example be accessed using,
https://4f08–175–157–46–176.ngrok.io/api/employee
Here comes the best part of it all — the web UI. To monitor all HTTP traffic through your tunnel, simply open up the http://localhost:4040 in a web browser and you should see details about all request and responses.
What’s more? Ngrok let’s you replay these requests individually to inspect its lifecycle. Click on any request and hit the Replay button on the top right corner of the dashboard. It also lets you replay with modifications to your headers or body.
Note that stopping or restarting your localhost app won’t terminate your tunnel session unless you close the ngrok terminal.
Ngrok’s dashboard has a status page that can be accessed on
This shows configuration and metrics information about the running ngrok process. Refer to the docs here for more tips and tricks to play around ngrok and adjust configurations suitable to your needs.
There’s more that you can do with ngrok; from accessing services running over TCP tunnels, debugging webhooks, working with chatbots to remotely accessing devices and more.
Ngrok is used by thousands of programmers and designers for quick testing. As a developer I think it’s an incredible tool that adds convenience to software development and makes testing and debugging a lot easier! It’s time you try it out yourself.
