Sometimes, you want to see what is going on when your nice shiny new App is supposed to connect to your awesome API and get some data from it/to it. Unfortunately – your App will (mostly) not connect to your API when it’s running on localhost. Android provides a nice little get around by using the DNS 10.0.2.2 – but this isn’t much use from an iOS device. And I find I really prefer to test from my development phones, rather than an emulator.
Recently I came across an amazing tool to help me out with this – ngrok. This creates an externally accessible URL poiting to your localhost. Even better – there is a Visual Studio extension that will start a tunnel for each application within your solution.
Getting Started
These instructions assume you are on a Windows machine, but the process is very similar for Linux and OSX – you can checkout the official instructions here.
Create an account with ngrok and download it. Unzip to wherever you want the executable to live. Log in to your ngrok account, navigate to ‘Your Authtoken’ and copy the provided token. Open your command line at the ngrok folder you have unzipped and enter ngrok authtoken <your token>.
Download and install the Visual Studio extension (unfortunately this is only available for Visual Studio on Windows). The easiest way is to go to Extensions > Manage Extensions, type ‘ngrok’ into the search and select the Ngrok Extensions. You will need to restart Visual Studio in order for the extension to be installed.
Once Visual Studio is re-opened, go to Tools > Options and scroll down to the ngrok entry. Set the exectuable path to where your ngrok.exe is located.
Now open the API in Visual Studio and press F5 to debug. The API should open displaying the localhost URL:-
Back in Visual Studio, click on Tools > Start ngrok Tunnel.
A command line window will open and show the tunnels created – one for http and https.
Now you can use the ngrok API URL in your app and it will hit your localhost API running in debug on Visual Studio, allowing you place breakpoints and step through as needed.
Conclusion
There is a bit of setup needed for this process, but it doesn’t take long and once it’s done you have a nice easy way to debug your App connecting to your API whenever you need it. For anyone who is concerned about the need to create an account with ngrok, I’ve had my account for several months and have had no unwanted emails.
Honestly, I wish I’d known about this a lot sooner!
I hope this is useful to some of you 😀
Resources
https://developer.android.com/studio/run/emulator-networking
https://marketplace.visualstudio.com/items?itemName=DavidProthero.NgrokExtensions
Lisa's Dev Blog 