Accessing your local development environment on tablets and other devices

With tablets and mobile devices taking an increasing share of how web sites are accessed, testing on multiple platforms has become essential. It can also be a bit of pain. Accessing your work can involve convoluted solutions such as uploading it to a publicly available area where you can browse to it on your tablet or mobile. Wouldn't it be so much easier if you could just view your local environment?

Luckily, 37 signals are here to help with a clever little solution that allows you to do just that. In this short tutorial we'll look at how you can setup your local development environment to be available to other devices on your local network. 

How does it work?

37 signals provide a free service via the domain Xip.io which essentially acts as a DNS server that can route traffic to a designated IP address. So if you have a local web site of mysite.dev and an IP of 192.168.1.1, you can use mysite.dev.192.168.1.1.xip.io which will resolve to your machine's IP address, thus allowing your tablet or other device to view your local application. 

 

Setting it up

The setup is pretty much as easy as setting up any other virtual host on your computer...

Add your domain to your hosts file (on windows this is usually found in C:\Windows\System32\drivers\etc)

127.0.0.1 yourlocaldomain.dev.xx.xx.xx.xx.xip.io

Note, I use the domain extension '.dev' for all my local sites but this can be whatever you would normally use.

Update your httpd.conf file (location will depend on server software, for wamp this can usually be found here: C:\wamp\bin\apache\apache2.2.22\conf).

NameVirtualHost *:80
<VirtualHost *:80>
DocumentRoot "path/to/your/site/"
ServerName yourlocaldomain.dev.xx.xx.xx.xx.xip.io
</VirtualHost>

Test Away!

...and that's about all there is to it! You can now access your local application on the url yourlocaldomain.dev.xx.xx.xx.xx.xip.io. Whenever you add a new site from now on, add an additional vhost record for other devices on your local network and testing your applications will get a whole lot easier.

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.