I recently wanted to start using real devices more as I develop web sites locally, using MAMP as my web server, so I can see how they respond to my code changes almost immediately. My starting point was to try out Adobe’s Edge Inspect, but I quickly came across the same problem that most people have: it doesn’t understand the local vhost configurations and so the page is not displayed in your connected device. What to do?
After some googling I found xip.io which was developed by the guys at 37signals to address the problem described above. The one thing I could not understand or find any direct answer to was: how do I install xip.io? After another hour of desperation, I found out that it is actually now part of the MAMP install (Version 3). You don’t need to do much apart from making sure your network settings are correct and adding some aliases.
I am using OSX Mavericks so apologies to developers on other systems.
So, here are the steps for getting this to work on any browser that is on the same wifi network as your master machine, using MAMP (free version) :
- Make sure your local server has a fixed IP on your local Wifi network, you can grab the IP address if you go into System Preferences > Network > Wifi.
- Let’s say your IP address is 10.60.85.140, and your local site has been setup in your httpd-vhosts.conf file* with a ServerName of “mylocalsite”.
- In your httpd-vhosts.conf file add/amend the ServerAlias for your local site in the form
[hostname].[server IP].xip.io. This would be “mylocalsite.10.60.85.140.xip.io” in this example case ** - Restart your MAMP servers, and enter that URL into your browser on a connected device, and you should see your localsite there! If you are working inside a network with a proxy, you might need to just disable the Ethernet connection so it doesn’t interfere with your access.
- ALSO – if you want to use Edge Inspect for remote debugging, just enter that same URL in your local browser, and you’ll be able to view the page in Edge Inspect on your connected device.
I hope this was useful, there’s certainly other solutions out there, but in the end this was pretty easy to setup.
Big shout out to @torharrington for help in figuring it all out!
*This is where your Virtual Hosts are usually configured. It can be found in Applications > MAMP > conf > apache > extra. In MAMP PRO you can do this through the admin console, but I’m cheap so I do it manually!
** This would look something like this:
<VirtualHost *:80> ServerName mylocalsite ServerAlias mylocalsite.10.63.84.160.xip.io DocumentRoot "/pathtolocalsiteondisk/mylocalsite" </VirtualHost>