Expose localhost (behind NAT/firewall) to the internet for testing on a mobile

Usually I just use Chrome's dev tools to test the look and feel of an application as a mobile device. However recently I've had to fix a bug that requried me to use an actual iOS webkit browser because I couldn't replicate it on my desktop chrome.

I couldn't have my iPhone join the work network and I didn't find an easy way to establish a network connection over usb. But after a quick google search I've found ngrok.io which lets you expose a locally hosted site to the internet without any hassel.

  1. Download ngrok
  2. Extract it anywhere and run ./ngrok http $PORT
  3. ngrok will now tunnel any traffic from someurl.ngrok.io -> localhost:$PORT and you can access it from any device

This solution worked great and I managed to fix the bug :).

What's also pretty cool is that because ngrok is acting as a sort of man-in-the-middle you can use it to inspect the traffic to your application. Just open http://localhost:4040 and you'll see all the calls to your application. This is especially useful when you're dealing with a mobile device such as an iPhone where you can't easily inspect the network traffic.