Developing and testing localhost websites on mobile devices

The Problem

I quickly realised an unproductive workflow in committing a web site and deploying it to Amazon’s Elastic Beanstalk (EB). I would be working within my Virtual Machine (VM) to develop a web site and after everything tested OK in desktop browsers I would deploy, only to see that it wasn’t all good on the mobile. Yes I can resize the browsers window to simulate mobiles to a degree and I can test on the IOS simulator (I’d rather not) but neither are perfect. And when there was an issue, the constant tweaking and trying again would get very tedious.

My VM is basically running so that no devices except those directly running on the host machine can request the web site in a browser. Knowing this how do I access the web site I’m developing via my mobile or tablet, in this case iPhone and iPad? I could start messing around with various networking options but before even contemplate something that already didn’t sit well for me I thought I can’t be the only one.

The Solution

After a few attempts at Googling around I found a workable option through tunnelling. The concept is simple, I create a tunnel between the web site running on my VM and a public service offering that generates a publicly addressable URL you can use to request your web site via any device.

I found out that there are a few offerings, as listed below:


Paid for

In Summary, the two free options didn’t really have much between them but in the paid for category Forward has some additional features that may suit. I’ll let you guys make up your own mind as I’m sure they’ll change over time.


While setting these up I did come across some things of note:

Virtual Hosts

I have a VM which is running multiple web sites via Apache virtual hosts. I want to be able to easily proxy one of these sites but alas this cannot be done with these solutions like you can do using Browserstack. In essence, you simply run the program passing in the port your web server is running on and that’s it. Therefore, to get this working I’ve simple made sure the site I wish to test is the default Apache VHOST.

Host Redirect

When I first got this working I noticed that I was being redirected to the production version of the site. Not what I initially expected but this did make sense. To explain, when setting up a website on EB you can choose your own subdomain that hangs off but if this doesn’t suit you can map a custom domain through a CNAME. To prevent the website being viewed on both the subdomain and custom domain name I created a mod_rewrite rule to redirect any requests that didn’t match the custom domain to that custom domain. Given that with this tunnel, requests were coming through a third party service, I had to add an ignore rule, for example RewriteCond %{HTTP_HOST !$ [NC]. Problem solved.


Once you are proxying your localhost site through one of these tunnels it is publicly available so depending on your position you may want to prevent the rest of the world from accessing it. To do so, a simple HTTP Auth login will do the trick.


I also noticed that Chrome on my iPhone was not clearing the cache on subsequent requests after changes made to the site. To address this you can simply run your site in an incognito tab. With Safari you can enable private browsing via settings.


It’s great to see that the amount of tools a web developer has within their arsenal keeps growing to make our lives easier and these local tunnels have certainly made my life easier. Anything to refine my work flow is always a win win and I hope this helps anyone reading this too. Also, as another boon, It’s great when collaborating with remote workers, where you need to keep tweaking and refreshing the page.


Just as I finished this post I came across an additional tool to aid debugging, the iOS WebKit Debug Proxy. Basically, it emulates what you can do already with Safari, in that with an IOS device connected via USB you can bring a web page up on your IOS device and debug through Chrome. Cool if like me that’s your default browser with all your add-ons installed.

Associated image “Tunnel” by BigPilou, available under an Attribution-NonCommercial-NoDerivs 2.0 Generic license.

1 Comment Developing and testing localhost websites on mobile devices

Leave a Reply

Your email address will not be published. Required fields are marked *