ngrok - Wait...what is that?!?

After my first full month in the identity PG (I switched roles recently at Microsoft), I wound up being introduced to ngrok. In the back of my mind, I envisioned these tools existed, but didn't have first hand experience. After dealing with Azure Active Directory Verifiable Credentials and standing up a web app that can issue out verified credentials, leaning on ngrok proved to be invaluable.

So what is ngrok exactly? Well ngrok allows you to take your local development environment, where you might be building web apps, and provides a secure way to access that environment via the internet. More specifically, ngrok exposes your local web server or web app running behind NATs and firewalls to be accessible over the public internet with secure tunneling. Pretty nifty, aye? So if you're a tester or developer, you can preview whatever you're working on, debug webhooks from a number of APIs, and you'll receive a public URL for your local web application. Hell, this would even work for IT Pros who are handling changes to websites, webapps, etc. Gone are the days of everything sitting in one clear cut silo, right? Right.

So how do you get this all the way set up? And then how do you test? Probably good questions to answer, aye?

ngrok can be installed a few different ways. You could use Chocolatey (a personal favorite) by typing in choco install ngrok to your PowerShell prompt. You can also download the executable directly from ngrok's site. If you download the executable from ngrok's site, ensure you edit your system variable like what's called out in the separate blog post I link to. If you're a heavy Visual Studio Code user, you can also download the ngrok extension to use within your local dev environment.

After following one of those methods on your Windows machine (note there are different ways to install if you're using a Mac or a Linux machine), type in ngrok at the command line. You should see the following output and it means you've successfully configured everything correctly:

Let's quickly go over how this works and how to validate it's working as expected next!

Browse out to the directory where you have an application you're working on locally. I have a sample dotnet app in my example. Build the application and run the application from the command line:

Open up a different terminal (in my case, I have Visual Studio Code open as well). Browse out to the same directory where your app lives locally. After you're there, type in ngrok http 5000 (the port can be whatever port you want) and hit enter.

You'll then be presented with the following text:

The output indicates that the web server/app is online, the session will expire in 1 hour and 58 minutes, ngrok is using United States as my region, and you're presented with a forwarding address to test what this application looks like without having to stand up infrastructure, work on change requests to allow a firewall rule, etc.

When I browse out to http://62ee-73-9-123-192.ngrok.io/, I'm presented with a representation of my website:

I found this tool nifty and immediately flagged a few dev colleagues of mine at Microsoft to geek out about how cool the tool is! Unfortunately I was met with a lot of "What's ngrok?" Sooooo...I decided to put a blog post up! Hopefully this showcased how to use ngrok for testing your local dev environment out!