Setup an Apache Virtual Host

You can serve a local website via a custom domain name on your local machine by setting up a virtual host on your local Apache server.

The main benefit of a virtual host is that you can run multiple websites on a single Apache server instance, freeing you from using only one URL http://localhost/ to access your local server. In addition, each domain can have it’s own web root directory so that you can take advantage of site-specific relative paths for any number of projects on your system.

The point of a virtual host is to rout the request for your local domain back into your local Apache server so it can serve-up a local website at a custom local domain.

Your local domain name can be called anything you want, so name it something useful to you like local.mysite.com.

The Hosts File

The hosts system file is used by your browser to decide weather or not a network request should go out and search the world, or stay on your local machine to find it’s response. We will add our local domain name and IP address to this file so that when a request is made it gets routed back to Apache.

  • Navigate to and open the hosts file for editing.

    On the Mac OS, the hosts file can be found at:
    /private/etc/hosts

    On the Win OS, the hosts file can be found at:
    C:\Windows\System32\drivers\etc\hosts

    NOTE: The hosts file is a core system file and by default you probably will not have the correct permission to edit it. Mac users can easily change permission by editing the file with the sudo user in Terminal, or changing the file permissions in Finder.

    Win users can open the file via the command prompt by first navigating to the directory:

    cd \Windows\System32\drivers\etc

    Then running a command to open the file with notepad:

    start notepad "hosts"
    

  • The hosts file content should look something like this:

    Mac OS:

    ##
    # 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
    

    Win OS:

    # Copyright (c) 1993-2006 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    #      102.54.94.97     rhino.acme.com          # source server
    #       38.25.63.10     x.acme.com              # x client host
    # localhost name resolution is handle within DNS itself.
    #       127.0.0.1       localhost
    #       ::1             localhost
    

  • For this guide we have chosen the local domain name local.mysite.com.
    Add the following line to the very bottom of the hosts file (using your own local domain name in place of local.mysite.com):

    127.0.0.1    local.mysite.com
    

    If you have other local definitions in this file you can keep them, simply add your new definition to the bottom of the file.

  • Save and close the hosts file.

You should now have an updated hosts file which will send all requests to your custom domain name back into your local machine (127.0.0.1) and into Apache!

We are not done yet. We have one more step…

The Apache httpd/v-hosts File

We now have to tell Apache to serve up our project directory when requested.

Each Apache LAMP stack (MAMP, XAMPP, WAMP) has it’s own slightly different file and definition for setting up a virtual host, but by-in-large the process is the same.

In the examples below, be sure to replace the domain name (local.mysite.com) with your local domain name, and replace the file path to the root directory (/Applications/MAMP/htdocs/mysite) with your local root path.

Find and open for editing the proper Apache config file for your LAMP stack:

  • Mac OS (MAMP)
    Open the Apache httpd.conf file located at:
    /Applications/MAMP/conf/apache/httpd.conf

    Add the following definition to the very bottom of the file:

    # MySite virtual host 
    <VirtualHost *>
        ServerName local.mysite.com
        DocumentRoot "/Applications/MAMP/htdocs/mysite"
    </VirtualHost>
    

  • Win OS (XAMPP)
    Open the Apache httpd-vhosts.conf file located at:
    C:\xampp\apache\conf\extras\httpd-vhosts.conf

    Add the following definition to the very bottom of the file:

    <VirtualHost *:80>
        ServerName local.steventexample.com
        DocumentRoot "C:/xampp/htdocs/mysite"
        <Directory "C:/xampp/htdocs/mysite">
            Options Indexes FollowSymLinks
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
    </VirtualHost>
    

  • After you have edited the Apache configuration file, save and close it.
  • You must now restart Apache for your changes to take affect. Simply stop, then restart your Apache server.