Local Site Testing with xip.io

Oct 1, 2013

I use MAMP PRO for my website development work. MAMP PRO makes it a snap to create and manage virtual hosts right on my desktop. Testing a site on a LAN with other devices like tablets, phones, or other desktops however, always required extra setup, WIFI modifications and installing yet another utility program. That is until I met xip.io.

xip.io is a free “wildcard DNS service” provided by the folks who brought us Basecamp. Tired of "jumping through hoops to test our apps on other devices" these folks built a solution for everyone to use... for free.

Say, your development site has the virtual domain mysite, then on a Mac that runs MAMP PRO, you would access this site in a browser at http://mysite. But what about on any other computer/tablet/phone on your network?

With xip.io you use an url like this:

http://mysite.10.1.10.11.xip.io

where mysite is our virtual MAMP domain, 10.1.10.11 is the IP address of the local computer that hosts the site (your IP address will be different) and xip.io is the site url of the service. http://mysite.10.1.10.11.xip.io will resolve to 10.1.10.11 so a browser on you local network will point to your machine.

You have to add one line in MAMP's httpd.conf to make this all work. Around line 577 add:

ServerAlias MAMP_VirtualHost_ServerName_MAMP.*.xip.io

so the virtual host declaration reads like this:

<VirtualHost mamp_VirtualHost_IP_MAMP:MAMP_VirtualHost_Port_MAMP="">
    ServerName MAMP_VirtualHost_ServerName_MAMP
    ServerAlias MAMP_VirtualHost_ServerName_MAMP.*.xip.io
    MAMP_VirtualHost_ServerAdmin_MAMP
    MAMP_VirtualHost_DirectoryIndex_MAMP
    DocumentRoot "MAMP_VirtualHost_DocumentRoot_MAMP"
    MAMP_VirtualHost_ServerAliases_MAMP

    <Directory "MAMP_VirtualHost_DocumentRoot_MAMP">
        Options MAMP_VirtualHost_Options_MAMP
        AllowOverride MAMP_VirtualHost_AllowOverride_MAMP
        Order MAMP_VirtualHost_Order_MAMP
        Allow MAMP_VirtualHost_Allow_MAMP
        MAMP_VirtualHost_DirectoryCustom_MAMP
    </directory>

    MAMP_VirtualHost_AdditionalCustom_MAMP
</virtualhost> 

Restart MAMP PROs apache server and you are up-and-running.

You’ll find httpd.conf in the MAMP PRO menu File > Edit template > Apache > httpd.conf

Comments

Is there instructions anywhere on where to find and install xip.io? I saw xip-pdns on git, but don't understand how to install it. Terminal commands? I'm running MAMP Pro Mac environment.

There is nothing to install. You just use the local ip address as part of the xip.io url as described in the blog post.

MAMP Pro 4.0.5 now has an option in the Hosts window to select name resolution (on LAN only) via xip.io and then shows you the url in a separate field. Very handy and allows devices on the LAN to view your local dev sites

Add new comment