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.
- 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 - 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.ioDocumentRoot "/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.
- 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
By Adobe Shadow – WordPress – localhost – virtual host | Arnaud Banvillet June 21, 2012 - 5:31 am
[...] à l’excenlent blog d’Adobe Shadow la solution pour utiliser shadow en gardant c’est virutal host existe. C’est le [...]
By Claudio June 21, 2012 - 5:39 am
Hey Matthew,
thank you for this hint. Do you have any idea why a connected tablet cannot display sites hosted on localhost although I have followed the steps above? Any other (public) sites are working fine.
Kind regards
Claudio.
By Bruce Bowman June 21, 2012 - 5:49 am
Hi Claudio,
Please join us on the Shadow Community Forums, where we can more easily help you with these kinds of questions.
http://adobe.com/go/shadow_support
Thanks!
Bruce
By Joel June 24, 2012 - 5:38 am
xip.io with Shadow looks great but there seems to be a problem when trying to access a WordPress multisite which is based on subdomains. A redirect kicks in and you end up at eg.:
http://yoursite/wp-signup.php?new=yoursite.10.0.0.1.xip.io
I have xip.io working for regular WordPress installs, so it’s not purely PEBKAC.
I tried to post at http://adobe.com/go/shadow_support but I just get prompted for a screen name and when I submit one I get sent back to the same prompt page. Not sure how else to report this bug. Anyone have any suggestions?
Thanks.
By Matthew Johnson June 25, 2012 - 7:59 am
Joel,
This redirect to the signup page is the standard behavior of WordPress when it gets a subdomain it doesn’t recognize. I’m not sure if there’s some configuration that will allow WordPress will to reconcile the xip.io names without rewriting them as redirects and preventing the device clients from being able to access them, but I’ll try to play around today and see if I can find something.
Matt
By Mark July 9, 2012 - 6:15 am
I couldn’t get this to work?
I have the following ‘test’ host created in MAMP Pro: http://cl.ly/0W1P3Z2y0g3c1F3Y3I0q and I edited my ‘httpd.conf’ file within /private/etc/apache2 as specified, and then I went into the /extra/ folder and edited the httpd-vhosts.conf to include…
DocumentRoot “/path/to/files”
ServerName test
ServerAlias test.*.xip.io
…but when I try to access the files via http://test.192.168.0.40.xip.io/ all I get is the “It works!” default directory rather than where I’ve specified the DocumentRoot?
Any ideas?
By Matthew Johnson July 9, 2012 - 7:41 am
Do you have Web Sharing turned on in OSX? If so, please turn this off in the Sharing preference pane.
Also, is MAMP on port 80? I believe the default is 8080, so if you haven’t changed that you may need to use http://test.192.168.0.40.xip.io:8080/
Finally, you may need to add a Directory element to the virtual host entry in your http-vhosts.conf file similar to this:
DocumentRoot “/path/to/files”
ServerName test
ServerAlias test.*.xip.io
<Directory “/path/to/files”>
Order allow,deny
Allow from all
</Directory>
Let me know if any of these suggestions help.
By Mark McDonnell July 12, 2012 - 1:48 am
@Matthew_Johnson unfortunately that didn’t work.
I have Web Sharing turned off.
To recap:
- I’ve added ServerAlias client.*.xip.io to MAMP Pro
- I’ve updated the httpd.conf file so virtual hosts line is uncommented
- I’ve updated the httpd-vhosts.conf file with the following content…
DocumentRoot “/Users//Dropbox/Sites/”
ServerName test
ServerAlias test.*.xip.io
- I’ve then tried accessing via my web browser (both desktop and mobile): http://test.192.168.0.40.xip.io/ and also http://test.192.168.0.40.xip.io:8080/
None of which has worked
By Chris July 13, 2012 - 7:39 pm
Users of the non-pro versions of MAMP should add :8888, the MAMP Apache port, to the end of their url.
Ex:
http://client2.10.0.1.5.xip.io:8888/
By Mark McDonnell July 18, 2012 - 9:46 am
I’ve set-up a stack overflow for this now: http://stackoverflow.com/questions/11546356/xip-io-with-mamp-pro-doesnt-work
By Matthew Johnson July 18, 2012 - 10:40 am
Mark,
I have responded to this over at stack overflow.
By Sebastian July 18, 2012 - 1:38 pm
If you are using MAMP Pro 2.x (there seems no need to configure hosts file, since it is enabled by MAMP itself) you can may only need to add the Adobe Shadow friendly URL to the Aliases section of the MAMP host setup:
Server Name: mobile.dev/ #my regular mamp server URL for the site ‘mobile’
Aliases: mobile.–MY-IP-Address–.xip.io #Adobe Shadow friendly URL
then all I enter the alias URL into the Chrome browser window is the alias URL and it display in Showdow on my mobile phone.
NOTE: I am using a static IP address with DHCP for development. In MAMP Pro 2.x you cannot enter a * character into the Aliases fields!
UPDATE: you may also only enter the following into the
‘Customized virtual host general setting’ area under the Advanced tab:
ServerAlias mobile..xip.io*
and then load the URL with your IP address:
mobile.xx.xx.xx.xx.xip.io/ in Chrome
By djekl July 24, 2012 - 1:46 pm
If your just doing local web dev testing, then why not just replace the IP with the localhost IP address of 127.0.0.1 so that the web address becomes http://client1.127.0.0.1.xip.io/ or even just http://127.0.0.1.xip.io/ for no vhost
By Matthew Johnson July 30, 2012 - 7:31 am
client1.127.0.0.1.xip.io resolves to 127.0.0.1 which will always mean the current device. This will work on your desktop since that is where your content is hosted. However, on any of your mobile devices, it will not point to your desktop and so it will not show the correct web content on these.
By Gabe January 31, 2013 - 11:00 pm
I managed to get Mamp Pro virtual host domains (example: http://mysite.dev) working with some help from the stackoverflow link above ( http://stackoverflow.com/questions/11546356/xip-io-with-mamp-pro-doesnt-work ), however I still cannot get things to work properly with local WordPress installs.
I get the same old issue of content loading, but no linked assets (CSS, JS, images, etc) do not load. When I used to use http://localhost/ urls I got the same issue unless I set each WordPress install to use the machine’s IP address, which was annoying when working from different locations.
Now that I’ve set up virtual hosts and am using .dev domains, which I really like for a variety of reasons, I’m back to square 1, where Edge Inspect becomes useless.
By Bruce Bowman April 17, 2013 - 11:24 pm
Hi Gabe,
We recently became aware of a new plug-in for WordPress that should fix this problem for you. The root of the problem is that WordPress uses absolute URLs internally, which doesn’t work when the URLs are used on other devices. This plug-in makes WordPress use root-relative URLs, which should fix the problem. Please respond in the comments to let us know.
We’re working on a blog post to cover this in more detail.
Bruce
By Dennie February 21, 2013 - 5:16 pm
I have had a lot of trouble with this as well on macbook pro and xampp. For me it did not work with my local ip adress ( the one shown in the abobe edge inspect extension chrome popup ). When I use my “real” ip adress it works like a charm.
Maybe it helps someone…..