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.

Web Sharing

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:

Web Sharing

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:

Web Sharing

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!