Easy (and free) way to test local sites with iPads, iPhones, and other mobile devices

So you have a virtualhost set up for Apache and your local site is running at http://yoursite.local and everything is working great on your computer. Now you want to test that awesome responsive design you've been working on with some other device(s), so you try to go to yoursite.local which won't work unless you want to modify the host file on the device(s), which is something you can't even do to an iPhone/iPad without jailbreaking it. Gah.

So, then you try to access the site with your device by just using your computer's IP address + the path to your docroot (for instance 10.0.1.10/mysite/trunk/htdocs/) - great idea and now the site at least sort of loads, but all the links to the CSS/JS and image files are broken...

In my own search to avoid jailbreaking I finally figured out how to enable normal-looking-pages access to devices following a bit of trial and error. The whole setup to enable this is done on the computer your site exists on - no need to fiddle with any of your other device(s) settings:

1. Edit the /etc/host file on your computer and add you computer's IP along with the relative path to your site (relative to Apache's docroot). For example:

10.0.1.10 path/to/site/

2. Add a virtualhost to apache like so, using your computer's IP address as the server name and this time use the absolute path for the site:

<VirtualHost *:80>
DocumentRoot "/Users/myuser/Sites/path/to/site/"
ServerName 10.0.1.10
</VirtualHost>

3. Restart Apache and now you should be able to access your site with any other device on your network by simply using your computer's IP address as the url.

15 February, 2009

Comments

Or you could add a server alias mysite.10.0.1.10.xip.io to your virtual hosts definitions. Then access the site via http://mysite.10.0.1.10.xip.io in the same network from any device.

xip.io could be a good option for some. The only downsides I can think of is that for it work one has to be connected to the internet, plus it adds extra routing to each of your requests, which may or may not add latency.

Yeah developing then looking at your sites locally can be difficult. The best way is to run a local DNS server on your network so that if your using name based hosting then you can access the site that way. It is how I always worked at home. However in an office environment it is more difficult. such as we all use local.domain.com In a previous office we used yourname.domain.com and so a localdns server then pointed everything with yourname. at a specific ip. You can open ports and use dns to get around it but it is still messy. However this way will work to a degree.