Do you develop your websites on your local machine? Do you need to test those sites across multiple devices, and face hassles using them to access the locally-hosted site? Have you tried different methods, processes, workarounds, tutorials, and blog posts about how to connect to your local machine? If you are like me, then you answer all of these questions with a loud, "yes!" The solution is xip.io, a service so simple that I spent a long time trying to figure out exactly what it does!. It's a free site from 37Signals, the makers of Basecamp, that uses "wildcard" domain names to route requests to any computer on your network. After googling around to understand how xip.io actually works, I was able to configure my system to use it with complete success. My new workflow for testing is easy, fast, and flexible! Let me show you how I did it.
My goal is to view my locally-hosted website on as many displays/devices as possible.
Before we get into the weeds. Let's take a look at where I was starting from.
- I used MAMP PRO to manage my sites.
- I used a wireless router within my house.
- I developed on a Mac, which gave me great access to Chrome, Safari, and Firefox. With a virtual box I could test Windows with IE7, 8, 9, and 10. It was slow, but serviceable most of the time.
- I had a Windows laptop connected to my local network. If I edited its hosts file, I could access the website being hosted on my Mac.
- I had an iPhone, iPad and an Android tablet -- and testing on those devices was not easy. I was constantly changing settings and configurations, altering settings in virtual hosts, using easyDNS, and cobbling together partial fixes to get a stable setup that worked for our testing process.
- I wanted all of my devices to agree that a particular domain name, like "http://www.my-client-web-site.dev", be served from my Mac.
If you have a similar setup and face similar problems, the steps I used to get xip.io working might be a good solution for you, too. If your setup is different, I hope it will make you curious enough to investigate alternatives and maybe even share your own development process in the comments!
Making it happen
With xip.io, and a simple addition to my localhost configuration (an alias in MAMP Pro), all of my devices can access my local site from a custom URL. I can grab my iPhone, connect to my wireless network, and enter an address like 'ahoy.192.168.1.14.xip.io' into Safari. The request is routed to my Mac, then MAMP PRO matches the first part of the address (ahoy) to the site alias that I set up. Once it's setup any machine on my local network can use the same address to test the site! Here are the setup steps I followed to get the magic running.
The site on my local Mac (http://ahoy.local):
My MAMP Pro setup:
The ip address for my local machine:
An additional MAMP Pro alias for this site:
This maps my local ip address, and the xip.io naming convention.
That's it!
The end result
I can now see my site (http://ahoy.192.168.1.2.xip.io) on all of my devices. By simply changing the prefix on #.#.#.#.xip.io to another site alias, I can use different names for different sites. Once it's set up, it just works!