Ubuntu – How to run multiple web-sites on localhost with Apache

I’ve recently installed LAMP on Ubuntu 22.04.
Apache version: Apache/2.4.52

What I am trying to do is to enable multiple web-sites on my localhost. I’ve read and followed a few posts on this topic however I can’t make it work.

So this is what I’ve done so far to create two sites "prj1" and "prj2":

1. Created two folders

sudo mkdir /var/www/prj1
sudo mkdir /var/www/prj2

2. Created two index files in the folders:

sudo gedit /var/www/prj1/index.html
sudo gedit /var/www/prj2/index.html

They are simple, the first states:

Web prj 1. Location:


/var/www/prj1

The second:

Web prj 2. Location:


/var/www/prj2

3. Set permissions:

sudo chown -R www-data:www-data /var/www
sudo chown -R 775 /var/www
sudo chown -R www-data:www-data /var/www/prj1
sudo chown -R www-data:www-data /var/www/prj2

4. Created .conf files for each project:
   sudo gedit /etc/apache2/sites-available/prj1.conf

<VirtualHost *:80>
     ServerAdmin admin@prj1
     ServerName prj1
     
     DocumentRoot /var/www/prj1/
     <Directory />
        Options FollowSymLinks
        AllowOverride None
     </Directory>     
     <Directory /var/www/prj1/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
     </Directory>

     ErrorLog ${APACHE_LOG_DIR}/prj1.webdock.io_error.log
     CustomLog ${APACHE_LOG_DIR}/prj1.webdock.io_access.log combined
</VirtualHost>

sudo gedit /etc/apache2/sites-available/prj2.conf

<VirtualHost *:80>
     ServerAdmin admin@prj2
     ServerName prj2
     
     DocumentRoot /var/www/prj2/
     <Directory />
        Options FollowSymLinks
        AllowOverride None
     </Directory>     
     <Directory /var/www/prj2/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
     </Directory>

     ErrorLog ${APACHE_LOG_DIR}/prj2.webdock.io_error.log
     CustomLog ${APACHE_LOG_DIR}/prj2.webdock.io_access.log combined
</VirtualHost>

5. Enabled sites:

a2ensite prj1
a2ensite prj2

6. Edited apache2.conf:
   sudo gedit /etc/apache2/apache2.conf

I’ve added the following:

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

DocumentRoot "/var/www/prj1"
<Directory "/var/www/prj1">
            Options FollowSymLinks
            AllowOverride All
            Require all granted
</Directory>

DocumentRoot "/var/www/prj2"
<Directory "/var/www/prj2">
            Options FollowSymLinks
            AllowOverride All
            Require all granted
</Directory>

7. Added two lines in /etc/hosts:
   sudo gedit /etc/hosts

127.0.0.1 localhost prj1
127.0.0.1 localhost prj2

8. Restarted Apache:

systemctl restart apache2

Now I am using the following URL in the browser:

http://prj1.localhost/

this works as expected, it shows:

Web prj 1. Location:


/var/www/prj1

However if I use http://prj2.localhost/ it still shows the first site

Web prj 1. Location:


/var/www/prj1

What do I do wrong?