How to enable Virtual Host on Xampp for Laravel?

Question

I have XAMPP running on Windows 7 Pro. I am trying to setup a Virtual Host so that when I use "dev.app" as a domain I get directly to my public folder of laravel installation.

Laravel is located at F:/xampp/htdocs/dev/public

I opened the httpd-vhosts.conf file located at F:\xamp\apache\conf\extra\https-vhosts.conf

and replaced everything with this

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#

NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#

<VirtualHost localhost>
    DocumentRoot "F:/xampp/htdocs/"
    ServerAdmin admin@localhost

    <Directory "F:/xampp/htdocs/">
        Options Indexes FollowSymLinks
        AllowOverride all
    </Directory>

</VirtualHost>

# Development
<VirtualHost dev.app>
    DocumentRoot "F:/xampp/htdocs/dev/public"
    ServerAdmin admin@localhost

    <Directory "F:/xampp/htdocs/dev/public">
       AllowOverride All
       Order Allow,Deny
       Allow from all
       Require all granted
    </Directory>
</VirtualHost>

then I opened my hosts file located at C:\Windows\System32\drivers\etc and added changed the localhost line to look like this

127.0.0.1       localhost      dev.app
127.0.0.1       127.0.0.1

However, when I go to dev.app in my browser I get this error

Unable to connect

Firefox can't establish a connection to the server at app.dev.

The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer's network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.

What am I missing here? What did I do wrong?

Note: I restarted Apache after I change the vhosts file. Also, I updated the app.php file in the config folder of laravel to have http://dev.app value in the url.

UPDATED after adding http://.... the site resolve but the images are not showing.

Answer 1

The hosts file should look like this so that it can be found on the IPV4 and IPV6 networks

127.0.0.1  localhost dev.app
::1        localhost dev.app

If you are using Apache 2.4.x this line in httpd-vhosts.conf

NameVirtualHost *:80

is no longer required or allowed for Apache 2.4.

The vhost file should look like this, you mixed Apache 2.2 and 2.4 syntax and while either is allowed as long as you have mod_access_compat activated, you should not mix them and the 2.4 syntax is better. You also missed a few other useful bits and pieces

<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs/"
    ServerAdmin admin@localhost
    ServerName localhost

    <Directory "F:/xampp/htdocs/">
       Options Indexes FollowSymLinks
       AllowOverride all
       Require local
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs/dev/public"
    ServerAdmin admin@localhost
    ServerName dev.app
    ServerAlias www.dev.app

    <Directory "F:/xampp/htdocs/dev/public">
       AllowOverride All
       Options Indexes FollowSymLinks

       Require local
       # if you want access from other pc's on your local network
       #Require ip 192.168.1
       # Only if you want the world to see your site
       #Require all granted
    </Directory>
</VirtualHost>