Skip to content

Instantly share code, notes, and snippets.

@manngo
Last active June 7, 2019 05:50
Show Gist options
  • Save manngo/19243df264c25a22b26b1efb93819f7a to your computer and use it in GitHub Desktop.
Save manngo/19243df264c25a22b26b1efb93819f7a to your computer and use it in GitHub Desktop.
Setting Up a Virtual Host

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:

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment