Virtual Hosts workflow for Adobe Shadow

We’ve heard many requests to enable Shadow to work in workflows that are using local Virtual Hosts. For many technical reasons, this is difficult accomplish in Shadow without additional machine specific configurations. We recommend a workflow that uses Charles Proxy. Charles is a popular tool mostly known for its ability to simulate bandwidth throttling, but it can also serve to resolve virtual hosts.

This blog post is for people who are already using virtual hosts in their workflows, and describes how you extend those workflows to include Shadow devices.

Setting up a Virtual Hosts Directory

You may skip this section if you have already have local virtual hosts set-up in your environment.

1. Enable virtual hosting in httpd.conf by uncommenting the below line. See detailed instructions for Mac OSX or MAMP/XAMP and step-by-step guides to defining virtual hosts for your respective environment. You will also need to add the virtual hosts to your /private/etc/hosts file (also covered in these guides).
   Include /private/etc/apache2/extra/httpd-vhosts.conf
2. Define your Virtual Host directories. In /private/etc/apache2/extra/httpd-vhosts.conf, our example snippet declares two virtual hosts “citrus.demo.com” and “meridien.demo.com” mapped to two different directories:

DocumentRoot “/Users/akishnan/Sites/Citrus”
ServerName citrus.demo.com

DocumentRoot “/Users/akishnan/Sites/meridien”
ServerName meridien.demo.com

Configure Charles Proxy

1. If you don’t already have it, download Charles Proxy and launch it
2. Make a note of your computer’s IP address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension). The default port number of Charles Proxy is 8888

Configure the HTTP Proxy on Android devices

1. On your Android device, go to Settings > Wifi (the exact path varies by device and OS version)
2. Press and hold on the wireless network to which your Shadow clients are connected
3. Tap “Modify Network”
4. Check “Show Advanced Options”, Choose Proxy Settings “Manual”
5. Enter the IP address* of the machine where Charles Proxy is running (you made a note of this above)
6. Save your changes

*NOTE: if your machine’s IP address changes, you will need to repeat step 5 for each device.

Configure the HTTP Proxy on iOS devices

1. On your iOS device, go to Settings > Wifi
2. Tap on the blue arrow next to the name of your current wireless network
3. Turn on HTTP Proxy and choose Manual
4. Enter the IP address* of your computer where Charles Proxy is running
5. Enter 8888 as the “Port”

*NOTE: if your machine’s IP address changes, you will need to repeat step 4 for each device.

Shadow & Virtual Hosts

1. Start Shadow on your devices (Android and iOS)
2. In Chrome, browse to one of your virtual host URLs, e.g., http://citrus.demo.com/ or http://meridien.demo.com/
3. You will see a permission prompt from Charles to allow the mobile device’s IP to connect using the Charles proxy: Choose “Allow”. You will see this permission prompt once for each connected Shadow device.
4. Paired Shadow devices are now able to see your virtual host URLs!

Note: If your IP address changes, you will be prompted once again.

In a future blog post, we’ll cover how to use the Charles Proxy Bandwidth Throttling features with Shadow so you can simulate slower connection speeds on Shadow devices.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow