Mesuva Web Development

We do the majority of our website development on macs, using MAMP as an easy to run webserver with Apache, PHP and MySQL. This setup is great for local development as the environment MAMP provides is very close to what most web hosts provide and the web server is easy to manage.

This setup works well to develop one site at a time, but when you are working on multiple sites and are jumping between them, it can become annoying to constantly have to change the document root and reboot the server. It is only recently that I’ve been motivated to configure Apache with what is known as virtual hosts to make development much easier. This allows you to run and access multiple sites simultaneously.

Below are the instructions on how to set this up under MAMP, but the instructions are pretty much the same for any Apache installation;

Step 1 – Shut down MAMP and open the config file

Shut down MAMP and Open MAMP’s httpd.conf file, located at /Applications/MAMP/conf/apache/httpd.conf

Step 2 – Turn on name-based virtual hosting

Scroll to the very bottom of the config file to find the lines:

#
# Use name-based virtual hosting.
#
NameVirtualHost *

The NameVirtualHost * line needs to be uncommented as above. I missed this first time around and was scratching my head for a long time.

Step 3 – Add in a default virtual host

This step may not be necessary, but it worked well for me. Add to the bottom of the config file a default entry to match the broadest directory you want to be able to access (this might be the folder you keep all you sites in). In the below example, clank is the name of my machine and/Users/ryan/Sites/ is where I keep all of my websites:

<VirtualHost *>
    ServerName clank
    DocumentRoot  /Users/ryan/Sites/
</VirtualHost>

Step 4 – Add in other virtual hosts

I wanted to access my development sites on my webserver via sub-domains, e.g. site1.clank, site2.clank. So for this step, add in a VirtualHost entry for each website. Some examples would be:

<VirtualHost *>
    ServerName site1.clank
    DocumentRoot  /Users/ryan/Sites/siteone/websitefile/
</VirtualHost>

<VirtualHost *>
    ServerName site2.clank
    DocumentRoot  /Users/ryan/Sites/sitetwo/websitefiles/
</VirtualHost>

Take care with ending each document root with a slash.

Step 5 – Reboot the webserver

Before the the virtual hosts will take effect, Apache needs to be restarted (just stop and start MAMP). The is only half of the process, so read on.

Step 6- Edit the hosts list on each machine that needs to view the sites

To be able to view the sites, any machine that wants to access the sites needs to be told where on the network these new subdomains are. On my local machine, I needed to edit the file/etc/hosts to look like the following:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost 
fe80::1%lo0 localhost
127.0.0.1   clank
127.0.0.1   site1.clank
127.0.0.1   site2.clank

As I’m editing this file on the same machine as the webserver, 127.0.0.1 is the loopback address, so all this is doing is saying to look at the local machine to find site1.clank, etc.

For another machine on the network, the same thing applies, but instead of the loop back address, the host’s IP address is needed. So on our other development machine it looks very similar, but instead of 127.0.0.1, a specific IP is given (in my case it is something like 192.168.1.102). Once the file is saved, the above sites should be accessible.

A note about virtual machines

We use VirtualBox to be able to run Windows to test our sites in the various versions of Internet Explorer. These virtual machines need to be treated as if they were additional machines on the network and therefore the hosts file on Windows needs to be edited as well.