whateverthing.com

☰

When developing websites and web applications, you will often have a local environment set up for testing in your browser. But what if you want to test it on another machine or device on your local network?

Chances are, the hostname of your computer won't work as a valid virtual host on a mobile device (and some computers). Additionally, you might have multiple projects on the go that all need unique virtual host names to operate properly.

This problem used to be solved by the "hosts" file (in /etc/hosts on Linux/Mac and C:\Windows\System32\Drivers\Etc\hosts on Windows), but there's a better way! You can use IP reflection services or wildcard DNS records to let you use nearly any virtual host name you want.

The Preparation

Now, before I get started on the walkthrough, I should point out that this post was inspired by some tweets from @thomasfuchs (co-founder of Let's Freckle). He pointed out that it's a smart idea to give your development machine a static IP on your local network, so you always access it at the same location. This is an important first step, and it varies by your router and your operating system. Sometimes you can connect to the router and tell it "Always give IP Address 192.168.0.55 to MAC Address DE:AD:BE:EF". Other times, you just have to go into your network settings in your operating system and pick an IP address.

Thing you should do as a developer: give your computer a fixed IP on your home wifi.

— Thomas Fuchs (@thomasfuchs) October 3, 2013

@Sendoushi so you can access your computer from mobile devices via xip.io without having to constantly look up the IP

— Thomas Fuchs (@thomasfuchs) October 3, 2013

The Easy Way

Because DNS is essentially just a lookup table, it's equally as capable of pointing to internal-only LAN IP addresses as it is for pointing at Internet servers. You can use a pre-existing service like 'xip.io', which was mentioned in @thomasfuchs' tweet, like so:

http://mystaging.192.168.0.55.xip.io/

Assuming you have a corresponding virtual host name or alias in your web server configuration (or assuming that this is the only host on that server), that should be all you need to get going.

The Neat Way

On the other hand, if you don't trust a third-party service to always respond truthfully, you can achieve the same effect locally using wildcard DNS. I use Linode as my main DNS provider, and while their DNS manager tool doesn't natively support "*.local.example.com", there is a workaround using Domain Zones.

Go to the DNS Manager, and add a new Domain Zone for local.example.com - tell it not to populate the domain zone (we want it to be empty). Also, replace "example.com" with a domain you actually own, and if you don't like "local", you can change that as well.

The next step is to go back to the DNS Manager, and open open your top level domain (example.com). Then, add the five "NS" Records for the wildcard's Domain Zone.

  Name Server: ns1.linode.com (and repeat for 2 thru 5)
  Subdomain: local.example.com
  TTL: Default
  

Next, go back to the local.example.com Domain Zone, and add a new "A" Record such as the one below to complete the last step:

  Hostname: *
  IP Address: 192.168.0.55
  Time To Live: 5 minutes

After a waiting period of 15 minutes to 24 hours, you will be able to access virtual hosts like this:

  http://mystaging.local.example.com/
  http://newsite.local.example.com/

The good news is, once the DNS propagates, you're good to go for the foreseeable future. You can use any virtual host name followed by .local.example.com to access your projects.

The command $> dig newsite.local.example.com @ns1.linode.com will directly query the Linode servers to determine when they've updated. After they respond with the proper IP, it's only a matter of time before your ISP's DNS servers will catch the new configuration.

If you use another DNS provider, such as Amazon's Route53, the instructions are even easier: just add an "A" Record for *.local on example.com, and you'll be good to go once DNS propagates.

The tyranny of hosts files has been overcome! :)

Incidentally, if you're not sure how to set up virtual hosts in Apache (and how to use the ServerAlias directive to give a virtual host a newsite.subdomain.domain.com alias), Digital Ocean has an excellent how-to on configuring Apache Virtual Hosts. Deliciously, it even laments the confusion of /etc/hosts - so you'll be one step ahead of the curve by using wildcard DNS.