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.conffile to allow the use ofvhosts.conffile. - 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.confSearch the following line in the file using find and comment it out by removing pond (#) sign :
#Include etc/extra/httpd-vhosts.confSave 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/hostsNow 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-allroutersSave 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.confAnd 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 startStart 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.
