Brass Blogs: Web Design & Development

Typically I do most of my work on my computer in a localhost environment. Makes for much faster editing – I can change the file on my computer and changes are immediately seen on the “site” locally (the alternative would be edit, upload, wait, reload page, and repeat). Now, on my PC, I used to run a neat little program called XAMPP to put Apache, PHP and MySQL on my computer and turn it into my own personal server. However, now that I’m a Mac user (I switched in early 2008), I use MAMP.

Today, I needed to install WordPress MU to aid in developing a theme for a client. I haven’t used MU in quite some time, and I’d forgotten that it won’t install on simply “localhost” (which is what my current setup is – or rather, was about 20 minutes ago). So, to install WPMU locally, I had to set up a virtual host (i.e. to access my localhost files via “http://localhost.com” instead of “http://localhost”). I discovered that, when using MAMP, it’s sometimes a difficult trial to pull off. I was lucky in finding the info I wanted though – I had it completed in a snap. So, I figured I’d share with you how I did it, so it’s all in one place (and maybe help you!)

I’ll assume you already have MAMP installed. I’m not going to cover that. If you don’t, feel free to do so now- it’s very easy – and then come back here when it’s installed and working.

I discovered from another tutorial that TextEdit WILL NOT WORK for this. The author of that one suggests TextMate or TextWrangler. I, myself, used Smultron.
What you’ll need is a plain text-editor, your Terminal Application, a browser window and MAMP up and running. (Initially, you’ll also want to hit the “Stop Servers” button on MAMP as well.)

Step 1: setting up the /etc/hosts
“Wait – what? Where is that? I’ve searched everywhere in my filesystem and I can’t find it!” you say.

Why yes, this is true (and this was the first issue I ran into). the /etc/hosts file is a hidden file on your system. This is why you need the Terminal window. So fire up that puppy, and simply type in the following:

sudo pico /etc/hosts

It’ll prompt you for your system password (you do have to have Admin rights to pull this off, so put in your password at the prompt) – and then you’ll see a bunch o’ stuff. What you want to pay specific attention to is the line that reads like so:

Be sure to make a copy of the default settings somewhere. If you mess this part up and stuff ceases to work, you can always type in the original settings and revert back to the way it was.

127.0.0.1       localhost

you’ll need to use your arrow keys to get down to that line. Once you get there, you’ll want to change that line to read like so:

127.0.0.1       localhost sitename.loc sitename1.loc sitename2.loc

the “Sitename” would be, of course, the URL you want to use in your browser window to access your localhost area. in my case, I wanted a basic “localhost” version, as well as one for my most recent WordPress installaiton, and one for the WordPress MU installation. So mine reads as follows:

127.0.0.1       localhost localhost.loc wordpress.loc wordpress-mu.loc

Now that you’ve done that, you need to save it, so hit “Control-O”, then the “return” key to save; then hit “Control-X” to exit out of the file. You’re all set and you can close the Terminal application.

Step 2: creating the actual folders

By default, MAMP has an “htdocs” folder where your localhost stuff is stored. This is where all of your files and stuff go to be viewed through the browser window. You may or may not be using this folder (personally, I am not – I have mine in a different location – which is defined in the DocumentRoot section of the httpd.conf file). In this area, you want to create your folder names. For simplicity’s sake, we’ll call the folders “htdocs2″ and “htdocs3″, but feel free to name them whatever you like.

Step 3: editing your Apache configuration

Now we move to our text editor. You’ll want to open the file “Applications/MAMP/conf/apache/httpd.conf”. You’ll want to find the section that says “Virtual Hosts” (in my case, it was the last section at the bottom of the file) – it’ll look something like this:

#
# Use name-based virtual hosting.
#

#NameVirtualHost *

We want to edit this to recognize the 3 “domain names” we’ve just created. So edit that part to this:

#
# Use name-based virtual hosting.
#

NameVirtualHost *

<VirtualHost *>
DocumentRoot Applications/MAMP/htdocs
ServerName localhost.loc
</VirtualHost>

<VirtualHost *>
DocumentRoot Applications/MAMP/htdocs2
ServerName wordpress-mu.loc
</VirtualHost>

<VirtualHost *>
DocumentRoot Applications/MAMP/htdocs3
ServerName wordpress28.loc
</VirtualHost>


Now save the file.

Step 4: test it out

Go to your MAMP Application and hit the “Start Servers” button (if you don’t see this, then you probably didn’t stop them as directed in the beginning – so stop and restart again now). Go to your browser window, and in the address bar, type in http://sitename.com and hit enter. You should be directed to the base localhost file system. If you type in http://sitename1.com, you’ll be redirected to the secondary localhost area, and http://sitename2.com will do the same.

You may now upload and install at will to any of these three folders and access them locally as much as you like. (If you want to make more than 3, or less, feel free to do so.)

Enjoy!