Difficulty setting Virtual Host on Port 8080

I am using XAMPP and running PORT:8080. I am trying to set up a virtual host and have tried every thing on the internet to set it up but still finding it difficult.

It shows this ERROR on chrome

ERR_SSL_PROTOCOL_ERROR

and this ERROR on Firefox

Error code: SSL_ERROR_RX_RECORD_TOO_LONG

Please need help on this…

My vhosts.conf file

NameVirtualHost *:8080

<VirtualHost *:8080>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:8080>
    DocumentRoot    "C:/xampp/htdocs/lsapp/public"
    ServerName      lsapp.dev
    ServerAlias     www.lsapp.dev
    SetEnv APPLICATION_ENV "development"
    <Directory "C:/xampp/htdocs/lsapp/public">
        DirectoryIndex index.php
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

my windows host file

127.0.0.1       localhost
127.0.0.1       lsapp.dev

Answer

Source

A while back, Google purchased the .dev TLD (Top Level Domain). At that time, they announced that they had no plans for it and that they were only going to use it for internal purposes. For years, the .dev TLD was primarily used for developers and designers to use in their local development environments. It was considered general acceptable use and, as a result, developers everywhere are now running sites locally which may now be affected.

Recently Google announced that in a soon to be released update to Chrome, they will be forcing .dev to HTTPS. In short, this means that if you are running local sites using .dev AND running Google Chrome, you will find your site unreachable. Fortunately, there are a couple of options which are fairly simple to implement to get around this issue. Keep in mind that since .dev has been a standard TLD for local development for some time, this new policy by Google will affect you whether you are using DesktopServer or any other local development tool which utilizes the .dev TLD. This issue is NOT specific to DesktopServer.

In short you need to change your .dev extension to anything else. If you still want to use .dev in the virtual host than you can try this workaround:-

NameVirtualHost *:8080

<VirtualHost *:8080>
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
</VirtualHost>

<VirtualHost *:8080>
DocumentRoot    "C:/xampp/htdocs/lsapp/public"
ServerName      dev.lsapp.com
ServerAlias     dev.lsapp.com
SetEnv APPLICATION_ENV "development"
<Directory "C:/xampp/htdocs/lsapp/public">
    DirectoryIndex index.php
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
</VirtualHost>

And in your windows host file:-

127.0.0.1 dev.lsapp.com

Don’t forget to restart the server to load new changes.