如何配置虚拟主机在 Xampp 的 htdocs 目录下工作？

Question

I am following a laravel tutorial, where tutor sets up a virtual host to run their app. The app is located in /opt/lampp/htdocs/first-app . My port for running apache is 8000 . So if I visit localhost:8000/first-app/public , I can view my laravel app.

My httpd-vhosts.conf file looks like this:

<VirtualHost *:8000>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
    ServerAlias www.localhost
</VirtualHost>

<VirtualHost *:8000>
  DocumentRoot "/opt/lampp/htdocs/first-app/public"
  ServerName app.test
  ServerAlias www.app.test

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

My /etc/hosts file looks like this:

127.0.0.1       localhost app.test
::1             localhost app.test
127.0.1.1       pop-os.localdomain      pop-os
127.0.0.1       app.test

I have uncommented httpd.conf like so

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

But I am getting this when I visit app.test

Browser output when app.test is visited

What am I doing wrong?

Edit: I have discovered, if I visit www.app.test:8000, it works fine

Answer 1

Just found out that the browser automatically adds port 80. So since I am running apache on port 8000, I need to specify it.

Thus, the settings above actually worked. All I had to do was go to http://localhost:8000 or http://127.0.0.1:8000