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.

MAMP port settings

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 $9 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
Disable Web Sharing in System Preferences (it gets switched on by VHX)

VirtualHostX

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 MAMP.

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 and install MAMP support (using VHX’s startup guide)
Add the virtual hosts we want to use
Ensured Web Sharing is disabled in System Preferences
Restart Apache (in MAMP)
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.

Comments

Spencer Barfuss
December 7, 2008

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!

eli
December 7, 2008

Sean.

You just rocked my world. I had about 95% of this, but the vmware secret IP just shaved a solid 30 minutes of ifconfig checking out of my work week.

I owe you an insane number of beers.

Brian Warren
December 7, 2008

Yo Sean! Well done sir. I’ve always just typically manually edited the host and conf files needed, but I’ll check out Virtual Host X.

Can you explain why you change the Apache and MySQL ports? I’ve never done and and it’s been no big deal for me.

Also, regarding changing the windows host file: for those who fear the terminal, you can just give it your local IP address (find it in the network preference pane). But know you’ll have to change it if you move to a new network or get a new IP address for any reason. As for me, I’m going to do that ifconfig terminal trick, I didn’t know about that before. Good article bro!

Sean
December 7, 2008

Can you explain why you change the Apache and MySQL ports? I’ve never done and and it’s been no big deal for me.

Good question Brian. The main reason I set to default Apache and MySQL ports is so I don’t have to specify ports in certain applications. Particularly, it helps to use the default port for MySQL.

Another reason is that I’ve found MAMP to be finicky when dealing with virtual hosts that specify a port different than the default set in httpd.conf.

And I guess the lamest reason I use the regular ports is so I don’t have to type “localhost:8000/MAMP” in the browser when I want to get to the MAMP start page. :)

Jeff Byrnes
December 7, 2008

I realize it’s a slightly more expensive solution, but have you looked at MAMP Pro? It seems to combine the regular functionality of MAMP with VHX’s virtual host editing prowess. I’m a fan of having to use as few apps as possible, but I’d love to hear reasons to do it this way. Not sure how well MAMP Pro ties into VMWare, however.

On another note, anybody using Parallels instead of VMWare Fusion? Just curious if this can be set up there as well, as I’m a Parallels user. Cheers!

Kev Rodgers
December 8, 2008

Thank you for this post. It looks like a great way to setup a local Web environment without tampering with OS X’s underpinnings. As information, VMware® is spelled with a lowercase w.

Leslie
December 8, 2008

Great write up. For those working with EE in a dev environment here is “the trick” to add to Sean’s post.

The settings in EE’s config.php will override the db settings. So keep two copies of config.php, one for the dev site, one for the live site. This greatly simplifies the process of moving between the two.

Dalton
December 8, 2008

This is perfect. Worked like a charm. Thank you so much for this post. Just one note, in case anyone ran into this, I was not able to list multiple vhosts on the same line, like so:

1.1.1.1 host1 host2 host3

When I moved them out to separate lines, it worked….like so:

1.1.1.1 host1
1.1.1.1 host2
1.1.1.1 host3

Sean
December 8, 2008

The settings in EE’s config.php will override the db settings. So keep two copies of config.php, one for the dev site, one for the live site.

Right. Thanks for the tip. (I’ve been meaning to ask you guys if there is a good way to keep the MySQL in sync without overriding local server paths. Any ideas?)

I was not able to list multiple vhosts on the same line

Yes, I should have clarified that I had tried the same thing without success. Best to keep each virtual host on its own line.

Richard Angstmann
December 9, 2008

@Leslie, could you explain in a bit more detail what you mean about overriding the db settings. Apologies, but I don’t usually do local dev, and generally work on a live EE install.

Leslie
December 9, 2008

@Richard – I don’t want to derail Sean’s thread. There is more info in the EE Wiki (search for config.php) and the EE forums. But the basic idea is to use config.php to set things independently of the db to make it easier to switch between a local dev environment to a live server.

Richard Angstmann
December 9, 2008

Apologies Sean for hijacking the comments, not something I do often, please excuse me.

Thanks Leslie, I will take a look in the places you suggest.

Sean
December 9, 2008

I don’t consider this type of discussion hijacking at all. In fact, I welcome it so that others who have the same questions or issues can find the answers they’re looking for.

Kevin
December 16, 2008

Is there a tutorial where I can use the mamp pro? Instead of getting the virtual pro and what not.

Jeff Byrnes
December 16, 2008

@Kevin – Not sure if the makers of MAMP Pro have a tutorial, but the built-in help is pretty good, and it’s pretty simple to set up, honestly. Just give it a whirl!

abel
December 23, 2008

Thanks for the post. I am having a few problems. When I change the port numbers on MAMP, Apache and mySQL do not restart. So I change ports back to 8888 and 8889 and they restart, create a new virtual host using VirtualHostX. But when i surf to my virtual host it just show me the root level of my Sites directory.

To see the site i have to add :8888 at the end of the url. Im new at apache but trying to learn how it all works. Thanks for any help!

Sean
December 23, 2008

abel, make sure Web Sharing isn’t running (check in the Sharing preference pane in System Preferences).

abel
December 23, 2008

Sean, I unchecked web sharing and it worked for sites not using a database. When i changed the ports to 80 and 3306, mySQL did not restart. isn’t there some kind of mysql.sock issue with Leopard? What might cause mySQL to not restart?
thanks so much!

Alex
December 30, 2008

Hi Sean,

I think your post is fantastic, I am Very new to this and over the past 2 days have been scouring through forums on the net looking for a simple, easy to understand way of doing just this.

I went through all the steps up to VM Fusion (as I currently don’t have that much money to spend on the program). Only when I reconfigured MAMP as shown my Apache Server has gone from green to red.

I felt sure I may have overlooked something so I reset to original settings and I checked that web sharing was off. Still the same though.

Alex
December 30, 2008

OK, Silly me!!

My apologies Sean, problem solved, I feel like a twit, my servers were stopped. I neglected to realise the button saying “Start Servers” directly on the right. Hit that and all seems fine.

alex
January 8, 2009

not sure if anybody resolved this yet or not, but i just hooked up MAMP Pro to VMware Fusion without using VirtualHostX. MAMP Pro creates virtual hosts in the same way as VirtualHostX.

@Jeff Byrnes – I used to use Parallels, and can imagine you can probably rig the same kind of system up as with Fusion.

@sean – thank you so much!

robertas
January 15, 2009

hi,
does some1 can explain me a such phenomenon. i’ve proceeded as sean suggested. and…the second project (project2) was “canibalized” by the first one (project1). i’ve removed the project1 one from Sites folder. same thing…all i can see now is the default joomla temlate with some articles from the project1. where is my second (allmost finished) project with completely different template and look? is it possible to recover it? or this is a question of MySQL database file, which wasn’t (unfornutaley) backed-up?

Michael Rose
January 18, 2009

hmmm… this looks exactly the right solution for me, been using MAMP and just grabbed VirtualHostX.

But… when it comes to the terminal… the command

ifconfig vmnet1

returns

ifconfig: interface vmnet1 does not exist

I did a complete ifconfig and it gave a number of options, I tried all of these, in Windows hosts file, flushing the DNS each time. None worked.

So, as a recent swticher and n00b, I’m stuck. Any ideas?

I’m using Parallels… anyone got it working with Paralleles?

davy
February 11, 2009

does this work with java?

cancel bubble
March 15, 2009

There’s a great FREE alternative to VMWare, Sun’s VirtualBox. Check out http://www.10voltmedia.com/blog/2008/12/screencast-install-internet-explorer-on-osx-using-virtualbox/

It’s awesome!

Clint
March 17, 2009

This is great, thanks! I’m having two small issues though, hopefully someone has some insight:

First, I can’t seem to get this to work with a local Wordpress install. Seems to work fine if I choose a root directory anywhere else on my machine, but the Wordpress install (which was living in /Applications/MAMP/htdocs/wordpress) wont load.

Second, I’m having a lot of trouble with the VMware portion of this. Followed the directions to the letter and no luck. I just get “Cannot Find Server” errors. I do get the “mystery IP” from Terminal, as intended, and have updated the hosts file in Windows but to no avail.

Anyone else had similar issues?

Thanks in advance!

Clint
March 17, 2009

Oh… so scratch the second part of that. VMware is working now. Fwiw, if others have the same issue, make sure to (a) run the flushdns command in an actual Command Prompt and not as a Run command in the Start Menu, and (b) make sure to restart afterwards. This combo fixed the issue for me.

But, still having trouble with my local Wordpress install inside the MAMP folder. Anyone else have luck with this?

Liz
April 3, 2009

Clint, you might have to change some of your settings in wordpress to match the new urls. There may a broken path in there.

I’m actually having the same issue you were having in parallels, where IE finds the correct ip address but can’t load the page. I tried restarting, and did the refresh in the command prompt. Any other ideas?

Clint
April 3, 2009

I actually sorted out the Wordpress problem. I forgot that Wordpress stores the URL of your blog in the database and uses that as its own “root” value, so you have to go in and manually edit the blog’s URL in a few spots.

As for the IE issue, I’m using VMWare, but the two steps I noted (flushing the DNS and restarting) fixed everything for me. I’ve heard some Parallels horror stories though so it might be something to do with whether its set up to share the Network connection with your host machine or have its own. That sort of network stuff is over my head though!

Liz
April 3, 2009

no one has gotten this to work in parallels have they…

Mayk Ruez Y
April 4, 2009

Mamp is good but no longer update since last year.
My question is, is it possible VirtualHostX act like Mamp?

Run VirtualHostX with additional others we need on Mac, as sample : – Install VirtualHostX – Install PHP – Install phpMyAdmin – Install mySql – or and install other software that we need for the development, ect. – Then RUN VirtualHostX

Will it be possible?
VirtualHostX running with local mac software installed side by side?

The reasons is, we can decided what we need to instal and or upgrade the software version with freedom when its needs..

Any advice? Thank you.

:) Maykruezy

Tim
April 22, 2009

And then there was sweetness ;-)
Thanks for taking the time to post your findings. After numerous attempts to get my G4 to behave with virtual hosts (the long way) Mamp, VirtualHostX and Sean Sperte made my day… now off to mirror my live site for ongoing development!

Shanx
May 8, 2009

Bitnami offers a much nicer solution. Even with Postgres for people who’ve moved on from MySQL.

Daniel
May 15, 2009

For those of you who have been asking how to use this set-up with Parallels instead of VMWare, here’s how I did it:

http://www.hyperarts.com/blog/using-mamp-and-virtualhostx-with-parallels/

Amanda
May 24, 2009

Mamp is good but no longer update since last year.
My question is, is it possible VirtualHostX act like Mamp?

Gianfranco
May 29, 2009

Great tutoria indeed!

Sean (and anyone else), I got a question about the local path to the directory where the websites are stored.

The VHX screenshot shows a setup like: /Users/Sean/Projects/“site”

Now, as far as I know, MAMP doesn’t allow you to have such configuration, but in order to work, you are OBLIGED to have your site folder in the MAMP folder.

As so:
/Applications/MAMP/“site”

Or is there a workaround to that, that I am not aware of?

Thanks for clearing this up to me.
;-)

casininio
June 9, 2009

Thank you for the tutorial

Dissertation
June 13, 2009

My question is, is it possible VirtualHostX act like Mamp?

Chris
June 24, 2009

I dont know what Im doing wrong but I cant get my php to run right trying to install a wordpress but all I get is php coding in my broswers