Create virtual host in XAMPP, Ubuntu 16.04/18.04/20.04/22.04

xampp-virtualhost.md

I’ll go step-by-step on how to create a virtual host in the XAMPP environment. As we know, the default http://localhost points to /opt/lampp/htdocs as the root directory. The desired result is to be able to visit http://examplevhost.local, with the root directory being /opt/lampp/htdocs/examplevhost.

Note: The steps below are done on Ubuntu 16.04, but they should also work on most other Linux distributions (Debian, Mint, Arch).

Note: I’ll assume that XAMPP is installed in /opt/lampp/. If it’s different on your setup, please read carefully and adjust accordingly.

Enable virtual hosts in apache configuration file

Note: This should be done only once per XAMPP installation. If you want to add another virtual host later you can skip to the next step.

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

• Find the line that looks like this:

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

• Uncomment the one that starts with “Include”:

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

Create the files

$ mkdir /opt/lampp/htdocs/examplevhost
$ gedit /opt/lampp/htdocs/examplevhost/index.html

Add the host to /etc/hosts

$ sudo gedit /etc/hosts

• Add this line to the bottom of the file:

127.0.1.1	examplevhost.local

Add the host to /opt/lampp/etc/extra/httpd-vhosts.conf

• Since we enabled this file in the first step we can start editing it. Add this:

<VirtualHost *:80>
    DocumentRoot "/opt/lampp/htdocs/examplevhost"
    ServerName examplevhost.local
    ErrorLog "logs/examplevhost.local-error_log"
    CustomLog "logs/examplevhost.local-access_log" common
</VirtualHost>

Note: You can re-use this snipped for any number of virtual hosts. The directives that need changing are DocumentRoot and ServerName (ServerName must exist as an entry in /etc/hosts, and DocumentRoot must exist as a directory in /opt/lampp/htdocs/) and that's it to see the site working. However, consider adjusting ErrorLog and CustomLog to find your error and access logs easily.

Note: It's safe to remove the example virtual hosts that come by default.

Test!

$ sudo /opt/lampp/lampp restart

• Visit http://examplevhost.local and you should see the content of /opt/lampp/htdocs/examplevhost/index.html.

Use this(without comment line):
ServerName examplevhost.local
instead of:
ServerName examplevhost.local # entry in /etc/hosts
if you are getting this error:
AH00526: Syntax error on line 44 of /opt/lampp/etc/extra/httpd-vhosts.conf: ServerName takes one argument, The hostname and port of the server

Use this(without comment line):
ServerName examplevhost.local
instead of:
ServerName examplevhost.local # entry in /etc/hosts
if you are getting this error:
AH00526: Syntax error on line 44 of /opt/lampp/etc/extra/httpd-vhosts.conf: ServerName takes one argument, The hostname and port of the server

I updated the snipped to be without the comment and put the note elsewhere. The syntax error shouldn't happen anymore.
Thank you!

Access forbidden!
You don't have permission to access the requested directory. There is either no index document or the directory is read-protected.

If you think this is a server error, please contact the webmaster.

Error 403
localhost
Apache/2.4.41 (Unix) OpenSSL/1.1.1d PHP/7.4.1 mod_perl/2.0.8-dev Perl/v5.16.3

Access forbidden!
You don't have permission to access the requested directory. There is either no index document or the directory is read-protected.

If you think this is a server error, please contact the webmaster.

Error 403
localhost
Apache/2.4.41 (Unix) OpenSSL/1.1.1d PHP/7.4.1 mod_perl/2.0.8-dev Perl/v5.16.3

Hi @rajnavadiya786

Please refer to my other Gist regarding htdocs/ permission setting for XAMPP at https://gist.github.com/ibrahimtuzlak0295/5332ff369393bf8f35d2650cdee02fe1

(Note: It's only meant for development environments, NOT production)

sudo gedit /etc/hosts

127.0.0.1	localhost
127.0.1.1	tradebook.local

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

<VirtualHost *:80>     
	DocumentRoot "/opt/lampp/htdocs"     
	ServerName localhost     
	ErrorLog "logs/localhost-error.log"     
	CustomLog "logs/localhost-access.log" combined
</VirtualHost>

sudo gedit /etc/hosts

127.0.0.1	localhost
127.0.1.1	tradebook.local

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

<VirtualHost *:80>     
	DocumentRoot "/opt/lampp/htdocs"     
	ServerName localhost     
	ErrorLog "logs/localhost-error.log"     
	CustomLog "logs/localhost-access.log" combined
</VirtualHost>

@bravotanmoy looking at the /etc/hosts file, your /opt/lampp/etc/extra/httpd-vhosts.conf would look like this:

<VirtualHost *:80>     
	DocumentRoot "/opt/lampp/htdocs"     
	ServerName localhost     
	ErrorLog "logs/localhost-error.log"     
	CustomLog "logs/localhost-access.log" combined
</VirtualHost>

<VirtualHost *:80>     
	DocumentRoot "/opt/lampp/htdocs/tradebook"     
	ServerName tradebook.local
	ErrorLog "logs/tradebook.local-error.log"     
	CustomLog "logs/tradebook.local-access.log" combined
</VirtualHost>

Assuming that you've created the DocumentRoot (and index.html inside) like so: /opt/lampp/htdocs/tradebook/index.html