The App: Really Cool Test/Debugging Setup

The App: Really Cool Test/Debugging Setup

Trying to host a local site on your local machine while communicating with other hosts can be a huge pain. But it's really important for debugging and seeing the traffic and what's going on.

If you're trying to do that, here's a series of steps that make it much easier if your trying to do something with a web project out of Visual Studio 2015.

Create your web project in VS2015

  • This will create an entry in the IIS Express applicationhost.config file with your project name and assign a port number to go with it.
  • You'll need to know these later.

Install ngrok

  • Download NGROK from here.
  • Install it somewhere convenient.
  • Modify the properties of the executable and make sure to "unblock it".
  • Update your system's environment variable (ask Cortana where) and add the location where you installed it to the Path variable.

Launch ngrok

  • In a command windows, do this: ngrok http <your project's port number>
  • You will see a pair of URLs.
    One is your local host and port number that you can use to see the incoming traffic. It looks like this http://127.0.0.1:4040
  • The other is the address forwarding that's available on the internet. It looks like this: http://7af58814.ngrok.io -> localhost:<your project's port number>
  • Launch your favorite browser and navigate to the above localhost and port number. You can't do anything yet, but you'll be ready to see when things start happening.
  • Leave the ngrok command window open and ngrok running. Restarting it gives you a new port forwarding address each time and you'll have to start over. There might be a way to fix this, but I haven't found it. Haven't looked that hard, either. {Edit 8/22/2016: This is true if you get a free copy, but they have a subscription version that will let you create a subdomain within ngrok.io that is fixed. Beyond cool.}

Change IIS Express to bind the incoming traffic to your project

  • Navigate to your project's solution folder.
  • In the .vs/config folder, edit the file applicationhost.config.
  • Look for your project name in the settings.
    It'll look like this:
    <sites> ... <site name="<your project's website name>" id="2"> ... <bindings> <binding protocol="http" bindingInformation="*:<your project's port number>:localhost" /> <binding protocol="http" bindingInformation="*:<your project's port number>:<your ngrok subdomain value>.ngrok.io"/> </bindings> </site> ... </sites>
  • The first binding protocol entry will already be there. You'll need to add the second one referencing your ngrok subdomain .
  • Mine looked like this:
    <binding protocol="http" bindingInformation="*:43276:localhost" /> <binding protocol="http" bindingInformation="*:43276:7af58814.ngrok.io"/>

Edit Windows to allow it to serve incoming traffic

  • Windows isn't going to let just any traffic come ploughing into your machine, right?.
  • Open up a command prompt as admimistrator.
  • Enter this command:
    netsh http add urlacl url=http://<your ngrok subdomain>.ngrok.io:<your project's port number>/ user=everyone
  • Later, when you're cleaning up, you can remove that entry from a command prompt (as Administrator) like this (don't forget the trailing slash):
    netsh http delete urlacl url=http://7af58814.ngrok.io:43276/
  • If you forget which ones you have, you can list them like this:
    netsh http show urlacl

Stop Visual Studio 2015 and start it up again, running it as admin

  • Navigate to the ngrok route http://<your ngrok subdomain>.ngrok.io
  • You should see your project's website.

Each time anyone accesses your website (using the ngrok URL) all your traffic will be showing in the browser you used to navigate to http://127.0.0.1:<ngrok port number> Mine was http://127.0.0.1:4040

Now I can monitor incoming traffic from other website (to see webhooks and redirects, etc.).

Neat stuff.