How to setup a Virtual Host locally with XAMPP in Ubuntu

The usage of virtual hosts in xampp is the practice of running more than one web site (that targets local resources) on a single machine.

Virtual hosts are IP-based, meaning that you have a different IP address for every web site, or "name-based", meaning that you have multiple names running on each IP address. This practice using XAMPP comes in handy when you want to simulate a production environment (however working in dev environment) locally accessing to your project by a normal URL in the browser.

To setup a custom virtual, we need to follow these steps:

• Allow the usage of the vhosts.conf file editing the httpd.conf file.
• Now create a custom domain in the hosts file of the system (/etc/hosts).
• Create your own virtual host.
• Start apache.
• Test it.

Let's get started!

1. Allow the usage of custom virtual hosts

By default, xampp in ubuntu won't use the httpd-vhosts.conf file (the location of the virtual hosts), therefore we need to indicate that this file will be included during the runtime of apache. Open with your favorite code editor the httpd.conf file located tipically in /opt/lampp/etc or just execute the following command in your terminal to open a simple editor:

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

Now locate yourself in (about) the line 487 where you probably will find the following lines:

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

As you can see, the Include statement that includes the httpd-vhosts.conf file is commented. Proceed to modify the line uncommenting that line:

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

And you're ready to configure your custom vhost.

2. Create a custom domain in the hosts file of your system

You need to create a custom domain where our apache virtual host will point to. This domain will be normally an ip (127.0.0.xx based) and a custom name.

To start, edit the hosts file located in /etc using your favorite code editor, or just by executing the following  command in the terminal:

sudo gedit /etc/hosts

And proceed to add your custom host. In this example, our ip will be 127.0.0.3 and the domain myawesomeproject. So finally, our hosts file will look like:

127.0.0.1	localhost
127.0.0.5	myawesomeproject

#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, and now the domain myawesomeproject is an alias for the local address 127.0.0.5.

3. Create your first virtual host

Tipically, you need to create the virtual host in the httpd-vhosts.conf file located in /opt/lampp/etc/extra. Use your favorite editor to edit that file or just execute the following command to edit it in a terminal:

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

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

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

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

The deep and custom configuration of your VirtualHost is up to you. Save the file, and you're ready to test it.

4. Test your virtual host

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

<?php
echo "Hello world!";
?>

Start apache, mysql (entire XAMPP) using the following command (or whatever the way you start apache and the other required services):

sudo /opt/lampp/lampp start

Navigate in your favorite browser to http://myawesomeproject/ or http://127.0.0.5/ and you should get as output "Hello World" in the browser.

Happy coding !