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:
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:
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