How to setup a Virtual Host on localhost with XAMPP on Debian

Although a web developers can run and test as many as sites using localhost with their website’s folder address but sometimes they need to develop and run each website in its own environment like a production web server. Here it comes the uses of virtual hosts. It is the practice of running more than one website (that targets local resources) on a single machine.

Virtual hosts are IP-based (like 127.0.1.1), means you have a different IP address for each website, or ‘name-based’ (or say like domain name), means you have multiple names running on each IP address. This practice using XAMPP comes in handy when you want to simulate a production environment, while working in development environment, locally accessing to your project by a normal URL in the browser.

In short we need to follow these 5 steps to setup a custom virtual host :

• Step 1 : Edit the httpd.conf file to allow the use of vhosts.conf file.
• Step 2 : Create a custom domain in the hosts (/etc/hosts) file.
• Step 3 : Create a custom virtual host.
• Step 4 : Start/Restart Apache Server.
• Step 5 : Test it.

Step 1 : Allow the use of vhosts.conf file

httpd-vhosts.conf file is not used as default by the XAMPP. So to use this file during the runtime of Apache server, we need to include this file in httpd.conf. Open file httpd.conf in Gedit (you can use any of your favorite code editor) located in /opt/lampp/etc as administrator or superuser . httpd.confor just type and run the following command in your terminal :

sudo gedit /opt/lampp/etc/httpd.conf

Search the following line in the file using find and comment it out by removing pond (#) sign :

#Include etc/extra/httpd-vhosts.conf

Save the file and you’re ready to configure your custom virtual hosts.

Step 2 : Create a custom domain in the hosts file

Now we need to create a custom domain where our Apache virtual host will point to. Normally this custom domain is an IP (127.0.0.xx) and a custom name.

To do this we need to open hosts file located in /etc folder of system using Gedit as administrator/superuser, or just by typing the following command and run it in the terminal:

sudo gedit /etc/hosts

Now here in example our IP will be 127.0.1.2 and the domain mycustomproject.zyx. So at the end our hosts file should be look like as under :

127.0.0.1	localhost
127.0.1.2	mycustomproject.zyx

#don't touch other existent values
# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Save the file. Above here we have set the custom domain mycustomproject.zyx as an alias for the local IP address 127.0.1.2.

Step 3 : Create a custom virtual host

Now we need to create the virtual host for the above said custom domain in the httpd-vhosts.conf file located in /opt/lampp/etc/extra. Open the file in Gedit as administrator/superuser or just type and run the following command in a terminal to edit the file :

sudo gedit /opt/lampp/etc/extra/httpd-vhosts.conf

And we create our own virtual host in this file as shown in our custom domain in the vhost file of the system, the IP port that we are going to use is 127.0.1.2, therefore our virtual host will be:

<VirtualHost 127.0.1.2:80>
  DocumentRoot "/opt/lampp/htdocs/my-project"
  DirectoryIndex index.php

  <Directory "/opt/lampp/htdocs/my-project">
	Options All
	AllowOverride All
	Require all granted
  </Directory>
</VirtualHost>

Above is the minimal configuration of VirtualHost. Save the file, and we are ready to test it. Extended configuration example can be as below, if required and is up to you.

<VirtualHost 127.0.1.2:80>
	ServerAdmin yourEmailID@example.com
	DocumentRoot "/opt/lampp/htdocs/my-project"
	ServerName mycustomproject.zyx
	ServerAlias www.mycustomproject.zyx
	DirectoryIndex index.php
	ErrorLog "/opt/lampp/htdocs/my-project/error.log"
	CustomLog "/opt/lampp/htdocs/my-project/access.log" common

	<Directory "/opt/lampp/htdocs/my-project">
		Options All
		AllowOverride All
		Require all granted
	</Directory>
</VirtualHost>

Step 5 : Testing the configuration

To test our configuration we create a simple PHP file (index.php) that will contain the following PHP code in the folder /opt/lampp/htdocs/my-project:

<?php
echo "Hello! Vhosts Configured successfully.";
?>

Start XAMPP using the following command :

sudo /opt/lampp/lampp start

Start the browser and navigate to http://mycustomproject.zyx/ or http://127.0.1.2/ and you should get as output “Hello! Vhosts Configured successfully.” in the browser.