Setting Up Virtual Hosts

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 host, we need to follow these steps:

1. Allow virtual hosts


By default, XAMPP 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.


/opt/lampp/etc/httpd.conf

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

Proceed to modify the line uncommenting that line:

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

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.


In this example, our IP will be 127.0.0.3 and the domain myproject. So finally, our hosts file will look like:


/etc/hosts

127.0.0.1	localhost
127.0.0.3	myproject

#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	

3. Add the virtual host path


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

<VirtualHost 127.0.0.1:80>
  DocumentRoot "/opt/lampp/htdocs/"
  DirectoryIndex index.php

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

<VirtualHost 127.0.0.3: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>	

4. Test your virtual host


Start apache and mysql (entire XAMPP).
Navigate in your browser to http://myproject/ or http://127.0.0.3/.