When your working on a development site, it's always best to mirror your production site. In most cases production site is always going to be installed in the webroot (root directory on your web hosting server). But how do we mirror this setup for MAMP running on a local machine if your development sites all lives under one directory where the sites are being served up by Apache web server?

The solution here is to create a Virtual Host so each of these development sites installed in a sub directory can act like it's own webroot directory on local machine. A virtual host can act like like a sub domain. Take my site as an example. If I installed Drupal in a sub directory called test, then my url address will be http://duvien.com/drupal/ and my sub domain will become http://drupal.duvien.com/ This is because a sub domain maps to a sub directory. Why is it better to work with a sub domain? because sub domain acts like the root directory so we can keep all the content relative url paths intact when we move the development site to production without needing to update any broken links (ie, for images or any hardcoded url paths). Before we begin to setup virtual host for MAMP on local machine, we'll add a host so we can point the domain request to the actual virtual host residing on local machine. Then we'll finish it off by creating the virtual host in httpd.conf file (the Apache config file).

Here are the quick step-by-step guide:

• Launch Terminal (you'll find it in folder /Applications/Utilities)
• In the terminal, type: sudo cp /etc/hosts /etc/hosts.bak
• It will asked for a admin password before it will allow you to execute the command to copy the host file and name is host.bak (it's just to create a backup of the hosts file).
• In the terminal, type: sudo nano /etc/hosts
• Enter your admin password. You will now see something like this: ## # 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
• Move the cursor down to the bottom on a new line so we can add a domain. You can name your domain anything you want but to keep things simple and easier to manage, i always keep the name the same as the sub directory. So the line you add should look like this 127.0.0.1       test.localhost
• To save it, press the down crtl key and the letter o key.
• 127.0.0.1 is the localhost IP (what the computer refers itself to)
• Now navigate to folder /Applications/MAMP/config/apache and open up httpd.conf in a text editor. Before that, make a backup copy, call it httpd.config.bak
• Search for: NameVirtualHost *
• Uncomment NameVirtualHost * by removing the # sign at the beginning
• now add the following lines so it looks like this: NameVirtualHost * <VirtualHost *>  DocumentRoot "/Applications/MAMP/htdocs"  ServerName localhost  </VirtualHost>  <VirtualHost *> DocumentRoot "/Applications/MAMP/htdocs/drupal"  ServerName drupal.localhost  </VirtualHost>
• Most important thing to remember here is that the Servername will be the url address to the sub directory in the DocumentRoot. So in this example the actaul webroot is htdocs folder. But we'll use the Servername here is serve that sub folder as root.
• Finally, save and close the Apache configuration file.
• Now restart your Apache. In your web browser type in the address bar: http://drupal.localhost/
• You should now see and access the site from the drupal folder or whatever you named your Servername to be
• You can add as many virtual host you want. Just repeat the process and add a virtual host below it, like: <VirtualHost *> DocumentRoot "/Applications/MAMP/htdocs/drupal"  ServerName drupal.localhost  </VirtualHost>
• But change the DocumentRoot to point to the sub directory you want and Servername for the URL to access it.

Tags: Site Developmentmampmac osxtutorialdrupal planet