December 7, 2008 Setting Up a Killer, Local Web Development Environment on a Mac With MAMP and VirtualHostX
With a keen sense of internet awareness (Powered by Twitter™), I’ve observed a large amount of Switchers whose day job is to build the web. Because of this, I thought I’d provide a bit of a welcome gift, in the form of a small tutorial on setting up a killer work environment.
The setup I’m going to describe isn’t novel, nor is it for everyone. My workflow allows me to have a great deal of flexibility with how I develop (since I’m basically a one-man-department), so keep that in mind as you read. You may need to “season to taste”, so to speak.
Let’s get started.
MAMP
The heart and soul of the environment we’re going to build comes from MAMP — Mac, Apache, MySQL, PHP. The free version of MAMP contains everything most developers need. Simply download, install and run it as you would any normal application. We’re going to make a couple of easy changes in the MAMP preferences.
The first is to change the ports that MAMP uses. Click on the “Ports” tab and set the Apache and MySQL ports to their defaults (80 and 3306, respectively). You’ll be prompted for your admin password.
Secondly, I like to uncheck all of the options in the “Start/Stop” section. This comes with some potential performance and security hits since it means you’ll have to manually stop the servers if/when you’re not using them.
Don’t worry about any other options. We’re going to circumvent MAMP’s default document root with virtual hosts.
VirtualHostX
Now that we’re serving Apache+PHP, we can access whatever document root we have setup in the MAMP preference via a web browser with the URL http://localhost — but that sucks. Instead, we’re going to use virtual hosts, allowing any URL to any document root we want. That’s right. Any URL to any directory.
To do this, we can edit the Apache httpd.conf file manually, or use Tyler Hall’s fabulous VirtualHostX, a $19 utility that provides a clean and simple GUI for adding virtual hosts.
On first launch, VHX will ask you to create a backup of the current configuration — which you should do. It also provides an option for installing MAMP support.
Creating a virtual host is simple:
- Enter the domain name you’d like to use
- Choose a “website folder” to be the document root for the domain
- Apply changes
That’s it! (You can add advanced, custom directives if you’re into that sort of thing.)
One quick note: anytime you update the virtual hosts you should restart Apache (httpd) by stopping and starting the servers in VirtualHostX (command+shift+R).
VMware Fusion
At this point we have a near-perfect local development environment — except for testing. Sure this works great for testing in all the browsers you have available on your Mac (just type in the domain you chose in VHX in any browser you have installed). But what about testing how your sites look on a PC?
That’s where VMware Fusion (or another virtualization program) comes into play. Most of us (developers) already use virtualization in some form for testing, but in order to take advantage of this particular environment — MAMP with virtual hosts — we need to update the hosts file on the virtual machine so that it resolves the domains to the Mac’s IP.
One catch: if you’re on a latop, chances are the Mac’s IP will change often. That’s why we need to get the secret IP the VM uses to talk to the Mac. (Yeah, I didn’t know such a thing existed either.) Here’s how we find it:
Type ifconfig vmnet1 into a Terminal window. You should get a return like this:
vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
inet 192.168.115.1 netmask 0xffffff00 broadcast 192.168.115.255
ether 00:50:56:c0:00:01
The “inet” number is your “secret” IP (in my case, 192.168.115.1).
Now that we have that number, we can edit the hosts file on the VM. We find it in: C:/WINDOWS/system32/drivers/etc. Just open the host file with Notepad, and add each virtual host (domain) on it’s own line at the end of the document, like so:
192.168.115.1 dev.triumphofgrace.com
… and save. Afterwards refresh the VM’s DNS cache by typing ipconfig /flushdns in a command line window.
(Do this for each virtual host you added in VHX.)
Voila! Now you should be able to access the custom virtual hosts you created in VHX on your PC using that wonderful browser we all love, Internet Explorer.
Recap
So here’s what we did, in a nutshell:
- Download and launch MAMP
- Change default ports MAMP uses
- Download and launch VirtualHostX
- Backup settings (using VHX’s startup guide)
- Add the virtual hosts we want to use
- Restart Apache
- Add any virtual hosts we created in VHX to the PC hosts file
- Rock on!
There you have it. A killer, local development platform on your Mac. Once you have everything setup, you can now install and run your choice CMS (such as ExpressionEngine) right on your Mac. How cool is that?
Go forth and make the web a better place.
Sweet! Thanks for posting this! I think this will come in handy, for sure. Always looking for ways to speed up the work flow.
I wish someone would do this for the PC as well. Thanks again!
Spencer Barfuss
December 7, 2008