Why we need to create virtual host ?  


Running a Web server on your desktop computer is a great way to speed up Web site development. By previewing your Web pages directly through a Web server on your own computer you can test out server-side programming like server-side include files, form processing scripts, or database-driven Web pages. However, there’s one problem associated with running a server on your own computer: by default, you only have a single "domain"–http://localhost/–so if you work on more than one Web site you put them all under "localhost" in different directories. This isn’t very real world and can cause problems when using server-side includes and root-relative links. Fortunately there’s a better way.

Virtual Hosts

Virtual Hosts give you the ability to "host" more than one Web site and domain on your computer. With a virtual host you can have separate local domain names for each of your Web sites: for example, http://clientA/ for one site and http://clientB/ for another. When you type the URL for the Virtual Host in your Web browser, the browser doesn’t go out onto the internet to find the site, but instead asks for the proper file from the Web server running on your computer. Not only does a Virtual Host let you run multiple Web sites on your computer, but it also lets you store the files for those sites anywhere on your computer and not just in the C:\XAMPP\htdocs folder. Note: You must have administrator privileges on your Mac to do this, so if you’re trying to setup Virtual Hosts on a computer at school, or some other computer that you’re not the admin for, you can’t do this without the help of an administrator. Adding a Virtual Host is a 2-step process:
  1. Add a new entry to your computer’s hosts file. A hosts file can be used to point requests for a domain to a particular IP address–in other words, it lets you re-direct communications to a particular domain. In the case of a virtual host, it can tell the computer to NOT go out on the internet when you type a particular URL like http://clientA/, but instead look for that particular domain on your own computer.
  2. Edit the Apache configuration file to accept Virtual Hosts and define the particular Virtual Hosts you want to setup on your computer. The first step above, merely redirects requests from a particular domain to your computer, but this step prepares the Web server on your computer for handling those requests. In this step, you not only provide the name of the Virtual Host, but also tell Apache where the files for the site are located on your computer.

Detailed Steps to configure virtual host in MAMP 

  1. Launch Terminal (it’s in the Utilities folder in the Applications folder.
    You’ll be editing a file on your system.
  2. Type:
     sudo cp /etc/hosts /etc/hosts.bak
     You need admin privileges to work with this file, so you’ll get a prompt for your password. This step is a safety precaution: it makes a back up of the hosts file so that if you make a horrible mistake in the next few steps you can always revert back to the old file by typing:
    sudo cp /etc/hosts.bak /etc/hosts
  3. Type: 
    sudo pico /etc/hosts
    This opens the hosts file in a text editing program named pico.
  4. Press the down arrow key (or press Ctrl-V) until the cursor appears at the bottom of the file.
  5. Type:
    127.0.0.1    clientA.local
      127.0.0.1 is how a computer refers to itself—it’s an IP address that points back to the computer, kind of like a computer’s way of saying "ME." The second part (clientA.local) is the "domain" of the virtual host. To visit this domain in a Web browser you’d type http://clientA.local. Of course, you should change clientA.local in the above example to match whatever you want the localhost to be. In addition, you don’t have to add the .local part to the hosts files—you could just as easily add 127.0.0.1 clientA and access the site in your Web browser with http://clientA—but I find it helpful for differentiating between a real Web site out on the Internet like clientA.com, and the test sites I have running on my own computer.
  6. Press Ctrl-O, followed by the Return key (this saves the file), followed by Ctrl-X (this closes the file and the pico program.) That finishes the first part of this task. You’ve prepared your computer to handle requests to http://clientA.local. Now you need to tell the Web server, Apache, how to handle those requests. You can quit terminal now, you can complete the rest of the tasks with a text editor like TextEdit or even Dreamweaver.
  7. In TextEdit (or any text editor even Dreamweaver) open the Apache configuration file located at Applications:MAMP:conf:apache:httpd.conf Note: Make a backup of the httpd.conf file before you edit it. Just in case you make a mistake and Apache won’t start up again.
  8. At the bottom of that file add:
    NameVirtualHost *
<VirtualHost *>
DocumentRoot "/Applications/MAMP/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *>
DocumentRoot "/Users/YOU/sites/clientA/site"
ServerName clientA.local
</VirtualHost>
    The first five lines of code turn on the Virtual Host feature on Apache, and set up the Applications:MAMP:htdocs folder as the default location for http://localhost. That’s important since you need to be able to access the MAMP web pages at http://localhost/ so that you can use PHPMyAdmin. The stuff in yellow represents a single Virtual Host. You’ll add one chunk of code just like this for each Virtual Host (or Web site) on your computer Note: Make sure you set the ports to the default Apache and MySQL ports as described on the MAMP instructions page.
    http://sawmac.com/mamp/index.php?phpMyAdmin=K85PsD36cqNo3YRTvysYodEi0lb
    You’ll need to modify the stuff highlighted in blue. The first item — DocumentRoot — indicates where the files for this site are located on your computer. The second part–ServerName — is the name you provided in step 2 above: the virtual host name. For example, clientA.local. The third item — the <Directory> part — is the same path you provided for the DocumentRoot. This is required to let your Web browser have clearance to access these files.
  9. Save and close the Apache configuration file, and restart Apache from the MAPP control panel.
  10. Start a Web browser and type a URL for the virtual host. For example: http://clientA.local/. You should now see the home page for your site.

More Virtual Hosts

If you want to add additional Virtual hosts add the proper entry to the hosts file and add another block of text like that in yellow above to the Apache configuration file. For example, say you had another Web site for ClientB. You’d add 127.0.0.1    clientB.local in the hosts file and theApplications:MAMP:conf:apache:httpd.conf would look like this: 
NameVirtualHost *
<VirtualHost *>
DocumentRoot "/Applications/MAMP/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *>
DocumentRoot "/Users/YOU/sites/clientA/site"
ServerName clientA.local
</VirtualHost>
<VirtualHost *>
DocumentRoot "/Users/YOU/sites/clientB/site"
ServerName clientB.local
</VirtualHost>
Source: http://sawmac.com/mamp/