I’ve had Parallels Workstation installed on my Macbook Pro for around two months now. It’s been a real joy to test websites in IE6 without bleeding from the eyes using Virtual PC. However, I’ve come across a problem using virtual hosts.
Virtual Hosts allow me to access any of my local website development copies through an easy to remember local URL. An example would be this site, where I have an exact mirror accessible through:
www.cssdev.local
This way I can play around with the site in exactly the same conditions as if it were live.
The issue is when I want to access these sites in Windows through Parallels. The virtual hosts just plain don’t work, and if I type in the direct path:
http://10.0.1.2/Sites/cssdev/index.php
the links to the CSS, Images and JS all break as they’re pointing to the root directory.
So, what would be great is if I could just boot up Parallels, open IE6 and just type in ‘www.cssdev.local’. Things would be seamless and that would just make me a happy man.
After a bit of fiddling, I managed it. Here’s how to set up a virtual host in OS X Tiger using the built in Apache installation, and get it to work in Windows XP through Parallels:
Step 1
If you already have a virtual host set up in OS X, then you can skip straight to step 7.
First of all, turn off ‘Personal File Web Sharing’ in ‘System Preferences » Sharing’ by un-checking it. We want to disable Apache because we’re going to make a couple of changes to its configuration.
Step 2
Boot up the ‘Terminal’ application which is in ‘Applications » Utilities’. If you have Textmate installed then type the following command:
mate /etc/httpd/httpd.conf
If you are not running Textmate, you should be. Go and download a trial copy and see how good it is for yourself. Otherwise you might want to use “VI” which is a built in editor, just replace “mate” with “vi” in the command above.
Step 3
You should now see the ‘httpd.conf’ file in your editor of choice. This is the Apache configuration file and it’s in here that you can set up a virtual host. Search for the words “NameVirtualHost” and you should come across the same lines that you see in the screen grab below.
Remove the ”#” from the NameVirtualHost line, and change the ”*:80” to the IP address of your computer. If you don’t have a static IP address, you may want to get one (most routers can be configured for this). If your IP changes frequently then your virtual hosts will break.
Step 4
Now we are going to add our virtual host. Copy the following code, replacing your own IP address, ServerName, and DocumentRoot.
<VirtualHost 10.0.1.2>
ServerName www.cssdev.local
DocumentRoot /Library/WebServer/Documents/Sites/cssdev/
</VirtualHost>
Place this in the httpd.conf file below the commented out example, which ends with ”#”. Your httpd.conf file should now look something like this:
Step 5
Save the “httpd.conf” file as we’ve made all the changes we need to. Next we need to modify your hosts file, so that your computer knows that ‘www.cssdev.local’ points locally. In ‘Terminal’ type the following command:
mate /private/etc/hosts
After the commented section of the file ending in ”##” type in the following line, replacing your own IP address and virtual host name:
10.0.1.2 www.cssdev.local
Make sure you place a [tab] after the IP address, and not a space. Your hosts file should now look something like the following:
Close and save the file.
Step 6
Now we can test. Turn on ‘Personal File Web Sharing’ by following the instructions in step 1, but checking the box instead.
Open up your web browser and try typing in your virtual host URL. If the site displays, then well done, things are working in OS X. Now we can make a quick change in Windows and we’re done!
Step 7
Boot up Parallels Desktop and get Windows XP loaded and waiting for you. Head to ‘Start » Run’ and type in the following:
wordpad c:\\windows\\system32\\drivers\\etc\\hosts
Now, we want to make this file a carbon copy of our hosts file in OS X, so, same as in step 5, add the following lines after the header comment:
10.0.1.2 www.cssdev.local
Save and close the file.
Step 8
Things should now work perfectly under windows in every browser but IE. Here’s the final thing. Open up IE and go to ‘Tools » Internet Options » Lan Settings…’.
Make sure that ‘Automatically detect settings’ is unchecked.
That’s it! If you followed everything perfectly you should now be able to access your virtual host through OS X and Windows. You can of course add as many virtual hosts as you wish by repeating the steps for each site.
I hope this step by step guide helps people out. Virtual hosts are really handy, especially if you are having path issues between live copies and development copies. Enjoy!
Before using 
My favorite of the three features I mentioned above is snippets. This is one of TextMate’s features that I took some time to really get used to. I’m one of those people who tends to retype code over and over again, just because I don’t want remove my fingers from the keyboard to select and copy a block of code. Snippets allows me to assign a keyword to code that I regularly have to retype, then all I need to do is type this keyword and hit tab. The code magically appears and even lets you tab between input locations within it. This has been an amazing time saver, TextMate already has hundreds of snippets pre-bundled.