[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](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](https://github.com/manngo/edit-hosts/releases/latest) 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](https://github.com/manngo/edit-hosts/releases/latest) 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](https://github.com/manngo/edit-hosts/releases/latest) 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`<br>`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](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/](https://github.com/manngo/edit-hosts/releases/latest)