Configure vhosts for XAMPP in Ubuntu

After installing XAMPP for Linux I wanted to use my old trick of configuring virtual hosts for Apache.
There is a one-time configuration, and two steps for each virtual host.

One-time configuration is needed to actually use virtual hosts, and to restore access to original XAMPP documents. So here it goes:

1. Open terminal and edit httpd.conf file:

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

2. Now find the following line and uncomment it by removing the hash symbol (#) at the beginning:

Include etc/extra/httpd-vhosts.conf

3. Edit httpd-vhosts.conf file:

$ sudo nano /opt/lampp/etc/extra/httpd-vhosts.conf

4. Replace definitions for dummy-host.example.com and dummy-host2.example.com with following:

# Use name-based virtual hosting.
NameVirtualHost *:80

<VirtualHost *:80>  ## Restore access to localhost resources
    DocumentRoot    "/opt/lampp/htdocs/"
    ServerName      localhost
</VirtualHost>

<VirtualHost *:80>  ## Restore access to 127.0.0.1 resources
    DocumentRoot    "/opt/lampp/htdocs/"
    ServerName      127.0.0.1
</VirtualHost>
5. Restart Apache or reload its configuration. Then check if you can still access XAMPP Dashboard at:
http://localhost and http://127.0.0.1

6. Prepare directory for future virtual hosts, and give your user's group write access to it:

$ sudo mkdir /opt/lampp/vhosts
$ sudo chgrp $(id -n -g) /opt/lampp/vhosts
$ sudo chmod g+rwx /opt/lampp/vhosts

For each virtual host, name resolver needs to be informed about new local domain.
Then virtual host definition has to be added, and directory for host's files created.
Finally after Apache restart all should work.

7. Edit local name resolver hosts file:

$ sudo nano /etc/hosts

8. Add local/development domain, for example "helloapp":

127.0.0.1    helloapp

9. Edit httpd-vhosts.conf file:

$ sudo nano /opt/lampp/etc/extra/httpd-vhosts.conf

10. Add virtual host, setting correctly paths and names:

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

    # The same settings as for <Directory "/opt/lampp/htdocs"> in conf/httpd.conf
    <Directory "/opt/lampp/vhosts/helloapp">
        # Possible values for the Options directive are "None", "All",
        # or any combination of:
        #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
        Options Indexes FollowSymLinks ExecCGI Includes
        # AllowOverride controls what directives may be placed in .htaccess files.
        # It can be "All", "None", or any combination of the keywords:
        #   Options FileInfo AuthConfig Limit
        AllowOverride All
        # Controls who can get stuff from this server.
        Require all granted
    </Directory>
</VirtualHost>

11. Prepare directory for virtual host, remember about correct path:
(this works only if step 6. has been done, otherwise permission errors can occur)

$ mkdir /opt/lampp/vhosts/helloapp

12. Restart Apache or reload its configuration. Then check if you can access new virtual host at:
http://helloapp

See also:

• localhost/dashboard/docs/configure-vhosts.html
• Virtual Hosts Setup with XAMPP (Windows)