God isn't bland. The Church shouldn't be, either.
The Ultimate Sandbox

I think it’s safe to say that cross platform web development can be a pain in the butt. Although browsers are more similar than ever, there are still countless rendering inconsistencies to keep you up at night. Add the differences between Windows and OS X to the mix, and you’ve got the recipe for a stressful development process.

Thankfully, there are some terrific tools available to make this process quite a bit more streamlined. The situation is even better if you’re on a Mac, where great virtualization programs like Parallels and VMWare Fusion allow users to run one machine with dozens of operating systems available for your testing needs. But what if you’re on a tight budget?

In this brief guide, we’ll show you how to turn that shiny new Mac into the Ultimate Sandbox for web development, and all for less than $1.00.

Why a Mac?

It’s time for a confession: I love my Mac, but that hasn’t always been the case. For years, Macs were just the expensive computers that looked cool but couldn’t reasonably function as a reliable work horse. OS X held a lot of promise with the new technologies built into the core of the operating system, but it was still a piece of software in it’s infancy.

Around 2005, OS X Tiger began to woo me with its lightning fast “Spotlight” search and other features that began to make my trusty copy of Windows XP begin to feel long in the tooth; I found myself lingering at the new Mac in our testing suite longer than necessary, lusting after it’s snappy new OS and wonderfully designed native applications. In November of that year, my wife and I purchased a new iMac and never looked back.

Shortly after our switch to the Mac, something magic happened. Steve Jobs announced a new partnership with Intel that would deliver faster chips for their computers and more possibilities for the growth of their platform. This was a welcome change of course, but the big news to me was the new found ability to run a virtualized copy of Windows at almost full speed.

Although my love for OS X had increased exponentially since switching over to the platform, it was always an arduous process to develop sites on our Mac and then find a Windows machine to use for hours of testing (the same could be said for developing on a PC and testing on a Mac). With one fail swoop, Jobs and Co. gave the development community something of a “holy grail” for web development: one machine that could be used to develop and test sites on all platforms from start to finish, without the need for musical chairs and hours in lost productivity (something that can’t be done on Windows).

Are you ready to take advantage of your Mac’s untapped potential? Put on your favorite album, grab a cup of coffee and get ready to make your development process a whole lot less stressful. Let’s get started!

Step 1: Install Virtual Box and a copy of Windows XP

Last week, I found a great mini-guide covering an open source virtualization solution from Sun called Virtual Box. Much like VMWare Fusion and Parallels (only free), Virtual Box allows you to run multiple operating systems directly inside of a window in OS X (Virtual Box is also available for Windows, Linux and Solaris). Combine this with freely available (and legal!) disk images from Microsoft, and you have a potent one-two punch for the budget-conscious web developer.

The folks at Yeti Software have developed an excellent guide about the installation process; I’m not going to reinvent the wheel here, so go follow the guide to install Windows XP SP3 with Internet Explorer 6. Join me back here at step 2 when you’re finished.

Step 2: Internet Explorer is fickle, so install several versions for testing

If you’re reading this, it’s likely 30 minutes later and you’re excited about your free testing copy of Windows XP running IE 6 like a champ, all from within OS X. Good job… I’m proud of you; now lets get to the cool stuff.

So, Microsoft has different disk images available to test the multiple versions of Internet Explorer, but who wants to go through the trouble of downloading and installing 3 separate images just to test a web browser? I know I don’t.

This leaves us the option of finding some sneaky way to force Windows into running multiple versions of Internet Explorer from the same install. Over the last year, I personally have used TredoSoft’s standalone version of IE 7 with great success. However, with the recent release of IE 8, we need a more flexible solution.

Internet Explorer Collection

Thankfully, the folks at Edskes Software have come to the rescue with their excellent bundled collection of every version of Internet Explorer imaginable. It installs quick, works great, and has been extremely stable in my testing so far. Grab the Internet Explorer Collection here and follow the instructions to get everything installed in your Virtual Machine. When you’re all set up, move on to Step 3 to put the final touches on your sandbox.

Step 3: Install other popular browsers and start your server

Now that you have more versions of IE than you can shake a stick at, take a few more minutes to get your Virtual Machine set up with other popular browsers available for the Windows platform. For your convenience, here are some links to the most popular ones:

To round out your installs, it’s probably a good idea to go ahead and install Flash along with other great tools like the Firefox Web Developer’s Toolbar.

Six Browsers Installed

So, you should now be all set up to test your HTML/CSS on a variety of browsers to your heart’s content. But what happens if you want to test some server-side code like PHP?

Thankfully, there’s a great solution in the form of the Apache Web Server built right in to OS X. Simply head to System Preferences > Sharing and enable Web Sharing to use the built-in server. You’ll need to host your code in “home/sites” in order for this to work properly. Once your files are in the right place, simply use the address listed in the Web Sharing screen to access your code from any machine on your local network (including your virtual machine).

Enabling Web Sharing

Step 4: Learn a new hobby (optional)

You’re going to have a lot more free time now that you’re not skipping from machine to machine to test your code; it might be a great time to start a new hobby (we recommend a career in competitive eating).

I hope this guide has been helpful in giving you a free and fast way to test all of your code. Oh, and in case you were wondering where the $1.00 came in, I just assumed you’d probably take a trip to the vending machine while some of this software was downloading. Enjoy your new sandbox!

Have any testing tips or software that you would like to recommend? Let us know in the comments below.

Share on TwitterShare on TumblrShare via email


  1. Tyler M. (Reply) on April 6th, 2009

    Great article Eric. I’m touched by your brief story of finding your love for Mac. I’m gonna try out these softwares.

  2. josh (Reply) on April 7th, 2009

    I have no idea what you just said but it sounded smart and cool. I’ll go back to rubbing two sticks together and trying to light a fire now…

  3. ben (Reply) on June 25th, 2009

    I followed the article and it worked great, thanks. I am running MAMP as my webserver locally in OS X. Is there a way to test the sites on the localhost of the mac from Virtual Box without having an internet connection?

  4. Eric Murrell (Reply) on June 25th, 2009

    Ben:

    Your local host address can be found in the web sharing panel if you’re using OS X’s built in Apache server. For instance, the web address I use to test my sites locally (both in Windows and OS X) is http://192.168.1.109/~ericmurrell/. This address should work from any other computer attached to the same network; it’s great for testing on a wide variety of machines.

  5. ben (Reply) on June 25th, 2009

    thanks eric. Yeah I understood that part from the article. But I am using a laptop on the go which is not connected to any network. So I was wondering if there was a way without being on a network.

  6. Eric Murrell (Reply) on June 25th, 2009

    I don’t believe there’s any way to do that gracefully without public hosting or VNC/some sort of tunneling :-(

  7. Nick Coleman (Reply) on July 16th, 2009

    You should be able to create an Airport network from your own laptop… that should create the necessary network. :)

  8. Nick Coleman (Reply) on July 16th, 2009

    Also… why not add the last bit to the puzzle… development domains on your own local webserver. Using VirtualHostX, it’s a BREEZE to setup. (http://clickontyler.com/virtualhostx/)

    EXAMPLE:

    Create sometestserver.dev in the VirtualHostX setup, pointing it at your /User/Sites/sometestserver folder.

    Then go on over to the Windows install, and edit the hosts file there (C:\WINDOWS\SYSTEM32\DRIVERS\etc\HOSTS) adding:

    192.168.1.201 sometestserver.dev

    Now, on Windows and Mac, you can just type in sometestserver.dev to access the site. This makes testing WordPress installs very easy, since later, all you have to change in the database and the code is sometestserver.DEV to sometestserver.COM

  9. [...] a Mac and a spare hour this weekend? Follow our simple guide to create a free and simple testing environment to use for all of your web projects. It will give [...]

  10. ArorkGolf (Reply) on July 14th, 2012

    Steroid Drug Detection Times Meaning Of The Medicine Pouch It is recommended that you wait at least 4 hours after waking up before you conduct any type of activity since you can still feel some of the effects in the morning. Ambien could really help you if you are suffering from insomnia and would like to enjoy a good night?s sleep; so if you think Ambien might be the right drug for you, we suggest you ask your doctor for more details. http://www.baronsorchids.com/ – generic ambien cost Ambien is the fast release version of the drug while Ambien CR is its extended release version. Ambien is known to produce allergic reactions in some patients.


Connect with Facebook