How to configure Apache server running on Ubuntu 20.04 to Serve Two Different Projects on Different Port?

I am building a web application with React as frontend and Laravel as backend. Both Laravel and React are built on separate project and I want both of these projects to deploy on the same server instance.

So for that, I put React project inside /var/www/react directory and Laravel project in /var/www/laravel directory.

So when the incoming request has the url domain.com, the request will point to /var/www/react directory. When request has url with some prefix for example domain.com/api, the request will point to /var/www/laravel directory.

For this purpose, I followed this tutorial and setup two virtual host. Both of these two virtual hosts points to same server but has different DocumentRoot for different port.

So first virtual host has /var/www/react as DocumentRoot which listen on port 80 while another virtual host has /var/www/laravel as DocumentRoot which listen on port 8080.

I have added the port 8080 in /etc/apache2/ports.conf file for it to listen.

After all this setup, when I goto my url domain.com, it actually loads the files from /var/www/react directory but when I try to open same url by specifying the port for example domain.com:80, it does not work.

Even the url with port 8080 does not work. domain.com:80

I get the following error

This site can’t provide a secure connection. domain.com sent an invalid response. ERR_SSL_PROTOCOL_ERROR

Here is my code

laravel.conf

ServerAdmin webmaster@localhost

ServerName domain.com

ServerAlias *

DocumentRoot /var/www/laravel

react.conf

ServerAdmin webmaster@localhost

ServerName domain.com

ServerAlias *

DocumentRoot /var/www/react

ports.conf

Listen 80

<IfModule ssl_module> Listen 8080 </IfModule>

<IfModule mod_gnutls.c> Listen 8080 </IfModule>