Shadow + xip.io: Virtual Hosts Workflow Simplified

With the recent introduction of xip.io from 37signals, using Shadow with local virtual host configurations just got much easier.

In a previous post we described how you could configure Shadow and Charles Proxy to support the testing of virtual hosts in Shadow. This method required configuring your virtual hosts in your web server, editing your local hosts file (e.g. /private/etc/hosts), setting up Charles Proxy, and modifying the settings on your mobile device. Using xip.io you need only configure your virtual hosts appropriately and use a xip.io URL when testing – no other configuration required.

Setting up Virtual Hosts for xip.io

The following describes how to configure virtual hosts in apache2 and should apply to OSX Web Sharing and most MAMP/XAMP/WAMP installs. For other web servers there should be step-by-step guides available to achieve the same setup.

  1. Enable Virtual Hosts. In your httpd.conf uncomment the following line by removing the #. Note that the path in this include may vary depending on your specific installation.
    #Include /private/etc/apache2/extra/httpd-vhosts.conf
  2. Define Virtual Hosts. In the httpd-vhosts.conf file referenced by the Include, declare your virtual hosts like below. Here we are defining two different sites client1 and client2 mapping to two different directories:

        DocumentRoot "/Users/matthewj/Sites/Client1"
        ServerName client1
        ServerAlias client1.*.xip.io

        DocumentRoot "/Users/matthewj/Sites/Client2"
        ServerName client2
        ServerAlias client2.*.xip.io

    The key to this virtual host configuration is the ServerAlias parameter which provides alternate URLs the server should map to the site.

  3. Restart your server. After adding the virtual host configuration you must restart your web server so that it picks up the changes. With OSX Web Sharing, just uncheck and recheck the Web Sharing box. For MAMP/XAMP/WAMP, use the admin tools provided.

Test your Sites With Shadow

When testing with Shadow, instead of using the http://client1 or http://client2 addresses in Chrome, use the xip.io address http://client1.10.0.0.1.xip.io and http://client2.10.0.0.1.xip.io where the 10.0.0.1 address is replaced by your machine’s IP (you can find this IP address in the Shadow Chrome extension popup). All devices will be able to follow along with no additional configuration required on the desktop or device.

Matt Johnson
Sr. Software Engineer
Adobe Shadow

This entry was posted in Workflow enhancements and tagged , , , , , , . Bookmark the permalink.

17 Responses to "Shadow + xip.io: Virtual Hosts Workflow Simplified"