[toc]

Setting Up a Virtual Host

Add an entry to the hosts file
Enable the Virtual Hosts File
Add an entry to the Virtual Hosts file

Using the Edit Hosts Application

When all is said and done, you will need to edit three files. Finding the files can be tricky, and saving them can be trickier, since they may be in protected locations.

To make things easier, you can download the Edit Hosts application, available from: https://github.com/manngo/edit-hosts/releases/latest.

Do this now, and avoid the fuss.

The three files you need to be edited will be loaded into separate tabs, and you can just edit them and save them. You will be asked for Administrative approval.

Add an Entry to the `hosts` File

When the browser requests a site, it does this using the domain name. This needs to be translated to the IP address. As there are many domain names to translate, this is normally handled by the Domain Name Server, DNS, which is a global distributed database.

However, it is possible to short-cut this process using the hosts file. This is a simple mapping of domain names and IP addresses, and is usually checked before resorting to the DNS. This way you can add entries that are not normally available in DNS. You can even hijack a domain name by adding a legitimate domain name in your hosts file; of course this only applies to your local computer.

The hosts file is located in one of the following locations:

MacOS: /etc/hosts
Windows: C:\windows\system32\drivers\etc\hosts

Unfortunately, this location is protected by the operating system, so you normally can’t edit the file directly. The simplest method is:

Use the Edit Hosts Application.

Failing that, you could:

copy the hosts file to somewhere accessible
make your changes
copy the modified file back; you will probably need to supply your password

Format

The entries in the hosts file are a simple format:

#   ip address      domain name
    127.0.0.1       www.example.com

Note:

Lines starting with the hash # are comments: they are ignored
Lines can be indented as much as you like for readability
The format is: ip address, spacing, domain name
You can use any number of tabs or spaces for your spacing

The domain name must be a complete name. The hosts file doesn’t work with wildcard names.

For practical purposes, you can map the same IP address to many different domain names.

Changes

The original hosts file may or may not have any existing entries, and may or may not have a number of comments. Leave the original entries as they are, and add the following:

#   ip address      domain name
    127.0.0.1       www.example.com
    127.0.0.1       www.example.net
    127.0.0.1       misc.example.com

or whatever you like.

Enable Virtual Hosts

In XAMPP and MAMP, the default is not to include Virtual Hosts, so you will need to change this:

Edit the httpd.conf file

Find the following:

# Virtual hosts
#Include etc/extra/httpd-vhosts.conf

Remove the hash # to enable the Include:

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

Finding the `httpd.conf` File

You can use Use the Edit Hosts Application to edit the httpd.conf file.

Alternatively, you can find the file and edit it yourself. The location of the httpd.conf file is typically:

Server	`httpd.conf` File
XAMPP Macintosh	/Applications/XAMPP/etc/httpd.conf
XAMPP Windows	C:\xampp\apache\conf\httpd.conf
MAMP Macintosh	/Applications/MAMP/conf/apache/httpd.conf
MAMP Windows	C:\MAMP\conf\apache\httpd.conf

Restarting the Server

You will need to restart the Apache Server, but not yet. The next thing to do is to add your virtual hosts.

Add Entries to the Virtual Hosts File

Seriously, the easiest way to do this is to use the Generator tab in the Edit Hosts Application.

The Virtual Hosts file httpd-vhosts.conf has sections for one or more hosts. Each section takes the form:

<VirtualHost *:80>
    ServerName www.example.com
    ServerAlias www.example.com
    DocumentRoot "…/…/example"
    ErrorLog logs/example.log
    CustomLog logs/example.log combined

    <Directory "…/…/example">
        Options FollowSymLinks Indexes
        AllowOverride All
        #   Access Directives

    </Directory>
</VirtualHost>

The Access Directives differ between XAMPP and MAMP. This is because MAMP uses a slightly older version of Apache.

The httpd-vhosts.conf file is normally located at:

Server	Path
XAMPP MacOS	`/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf`
XAMPP Windows	`C:/xampp/apache/conf/extra/httpd-vhosts.conf`
MAMP MacOS	`/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf`
MAMP Windows	`C:/MAMP/bin/apache/conf/extra/httpd-vhosts.conf`

The following sections will give templates for a Virtual Host. In the templates:

[placeholder]	Meaning	Example
[project]	Simple Name of Project	`example`
[domain]	Domain Name	`www.example.com`
[root]	Full Path of Root Folder	`/Users/…/Documents/example` `C:\Users\…\Documents\example`

XAMPP

There are two features specific to the XAMPP server:

XAMPP uses Apache 2.4, so the Access Directive is newer
In order to enable the default Dashboard, you need to enable an additional default server.

This gives us a template of:

#   XAMPP   Required Default !!Do Not Repeat!!
    <VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
    <Directory "/Applications/XAMPP/xamppfiles/htdocs">
        Options Indexes FollowSymLinks Includes execCGI
        AllowOverride All
        Require all granted
        </Directory>
    </VirtualHost>

#   [project]: [domain]
    <VirtualHost *:80>
        ServerName [domain]
        ServerAlias [domain]
        DocumentRoot "[root]"
        ErrorLog logs/[project].log
        CustomLog logs/[project].log combined
        <Directory "[root]">
            Options FollowSymLinks Indexes
            AllowOverride All
            Require all granted
        </Directory>
    </VirtualHost>

MAMP

MAMP uses a slightly older version of Apache (2.2), it has two requirements:

Apache 2.2 Specifically needs to be told to use Name Virtual Hosts
The Access Directive is the older form

The Template becomes:

#   !! Do Not Repeat !!
    NameVirtualHost *:80

#   MAMP    [project]: [domain]

    <VirtualHost *:80>
        ServerName [domain]
        ServerAlias [domain]
        DocumentRoot "[root]"
        ErrorLog "logs/[project].log"
        CustomLog "logs/[project].log" common
        <directory "[root]">
            Options Indexes FollowSymLinks
            AllowOverride all
            Order Deny,Allow
            Deny from all
            Allow from 127.0.0.1
        </directory>
    </VirtualHost>

Restarting the Web Server

You can now restart the Web Server.

Useful Tools

There is an online helper tool available at: https://html-tools.internotes.net/virtual-hosts

To make things easier, you can download the Edit Hosts application, available from: https://github.com/manngo/edit-hosts/