Line In

Nomadic Designer

Setting Up Virtual Hosts With MAMP on Mac OS X

I’ve been using the regular MAMP for a long time without problems but recently I wanted to start experimenting with subdomains on my local development server using Virtual Hosts.

I knew that MAMP Pro supported Virtual Hosts and so I fired up the trial and indeed they do make it very easy for you to add new host names: simply add a server name and a directory for your files and you’re good to go. If ease and convenience is important to you, then just get the Pro version and be done with it.

However, I like to know how things work and so, after a bit of poking around in my /etc/hosts and the various httpd.conf files in both the /Applications/MAMP and /Applications/MAMP Pro directories, I found that it was actually pretty straightforward to add new virtual hosts manually.

Adding Your New Domains to the Hosts File

Throughout this post I’ll be using the example domain name line-in.co.uk.

  1. Open up a terminal window and make a backup of your hosts file by typing
1
sudo cp /etc/hosts /etc/hosts-backup

(as this is a system file, you’ll probably need to enter your password)

  1. Edit the hosts file in Nano by typing the following:
1
sudo nano /etc/hosts

Near the start of the file, you’ll see the line: 127.0.0.1 localhost. You can simply add your new domain to this line so that it reads:

1
127.0.0.1 localhost line-in.co.uk

I also added each of my domains to the IPv6 version (which is declared a few lines later), so it looks like this:

1
fe80::1%lo0 localhost line-in.co.uk

This is a good idea because there are reports that OS X Lion’s DNS cache is a bit rubbish. I found that it was taking up to 5 seconds to resolve my new domain names. Adding the domains to the one line seemed to help fix this problem).

  1. Ctrl + x and then y will write out your changes

Preparing the Virtual Hosts in Your httpd.conf File

  1. Go to your MAMP application folder and find the configuration files for Apache. It should be in /Applications/MAMP/conf/apache/ For my version of MAMP, they use includes to separate out some aspects of the configuration files including virtual hosts. This seems like a nice way of keeping things organised and allows you to easily play around with virtual hosts without messing up your main httpd.conf file so that’s what we’re going to do here.
  2. Open up httpd.conf and scroll all the way down to the bottom. You’re looking for the line:
1
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf[/

It might have a # symbol at the start, meaning that it’s commented out. Delete that symbol. If it’s not there at all, simply add the line. 1. Save and exit out and go back into the configuration folder (/Applications/MAMP/conf/apache/). If you have a subfolder called extra, open that up. If not, create it. 1. Open up httpd-vhosts.conf. If it doesn’t exist, create it. If you didn’t create it yourself, you might see some example dummy hosts in there. You can ignore these or delete them. 1. If the following line doesn’t exist in your file, create it:

1
NameVirtualHost *:80
  1. The first thing we have to do is to create the default configuration. This is what Apache will use if it can’t find a server that is pointing to your localhost IP address but hasn’t been declared as a unique virtual host. Copy and paste this:
1
2
3
<VirtualHost 0.0.0.0:80>
DocumentRoot "/Path/To/Your/Default/Document/Rootì
</VirtualHost>

Replace /Path/To/Your/Default/Document/Root to the path where you store your web files (default in MAMP is /Applications/MAMP/htdocs, but you may have changed this).

Adding New Web Document Roots

With virtual hosts, you can use different folders for different document roots. For example, I have a web design clients folder and I hold all of my web files for that client in an individual webroot folder within that design folder. This makes archiving and organisation easy (though if you do move the folder, you’ll need to remember to update the Virtual Hosts file).

  1. Create a new folder for your virtual host somewhere on your system. Make a note of its location. You may also want to add a quick index.html file to that folder which will tell you if it’s working or not.
  2. Copy out the following into the httpd-vhosts.conf file, underneath the first VirtualHost declaration:
1
2
3
4
5
6
7
8
9
10
<VirtualHost *:80>
    DocumentRoot "/Path/To/New/Document/Root"
    ServerName line-in.co.uk
    <Directory "/Path/To/New/Document/Root">
        Options All
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Important things to note:

  1. The ServerName should be what you set your /etc/hosts declaration to (in this case, line-in.co.uk).
  2. Virtual hosts can contain most Apache directives. For directory-specific directives, create a new declaration. You generally want to copy your set up from your main Apache directory configuration (see `httpd.conf`) so that things work consistently across all of your hosts. One important declaration is `AllowOverride All`. This allows you to use `.htaccess` files in your new directory.

Save this file out and restart Apache. If everything is working, you should be able to open your browser and go to your new host (e.g. http://line-in.co.uk) and it should open up the index.html file you created.

Congratulations, you now have a working virtual hosts set up!

You can add as many of the declarations as you’d like, just remember to update `/etc/hosts` for each new domain you want to add.

Troubleshooting

Everything went smoothly following the above for me but your mileage may vary, especially if you are using older versions of MAMP or have heavily configured your httpd.conf file.

If Apache doesn’t start at all, check your httpd-vhosts.conf file for errors (make sure the closing quotes match, that you’ve closed all open directive tags and that you’ve spelled the directives correctly). If you just can’t get it to work, you can always open up your httpd.conf file and comment out (with a #) or delete this line:

1
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

This will effectively ëturn off’ your Virtual Hosts configuration and get you back to a working development server.