Configure Virtual Host for Laravel in Xampp on Windows

If you’re a newbie in Laravel like me, you probably already set up a laravel app with composer. And every time, you’ll need to write the following code to serve the application.

php artisan serve

But what if we can always access our application by writing the address like ‘laraapp.test’ of our application in our browser’s address bar? In this article, we’re going to follow through the process to create a virtual host for our application and access it through our web browser. We’ll be using Windows 10 as our OS.

Install Xampp and Composer

First, we need to install Xampp. It’ll serve our environment for PHP with Apache Server. Download Xampp from the official link. After the completion of download, run the installer. For default settings, it’ll create a directory like ‘C:\\xampp\’.

Next, we will need to install Composer. Composer will work as our package or dependency manager for PHP. For windows, we can simply download Composer and run the installer. Remember to install Composer globally which means while installing, we’ll let all users to access Composer globally. We will set the settings for ‘All User’ when setting up Composer.

Then, let’s create a Laravel project. To access our laravel app through Xampp, we’ll need to create our application in the ‘xampp\htdocs’ folder. We may browse to the folder with Windows Explorer. Or we may simply click on ‘Start Menu’ and search for ‘Run’. In this application, write ‘cmd’ and hit ‘Enter.’ This will open a Command Prompt. We will write the following line.

cd c:\xampp\htdocs

This will change our current directory to ‘C:\\xampp\htdocs’ folder. Now we need to create our own Laravel application. To do this, we’ll have to write the following lines in ‘Command Prompt’ afterwards.

composer create-project --prefer-dist laravel/laravel ProjectName "5.7.*"

This will create a laravel application with version 5.7. You may switch to other versions too. For versions like 7.0, we’ll have to write-

composer create-project --prefer-dist laravel/laravel:^7.0 ProjectName

Configuration of Virtual Host:

To configure virtual host, first, we’ll need to configure the VirtualHost of Xampp. Browse through ‘C:\\xampp\htdocs\apache\conf\extra’ and open ‘httpd-vhosts.conf’ file with your preferred code editor.

We’re going to configure our virtual host such that it’ll listen to the port 127.0.0.2 and pull our application. To do this, write the following lines at the end of the ‘httpd-vhosts.conf’ file.

<VirtualHost 127.0.0.2:80>
     DocumentRoot "C:/xampp/htdocs/ProjectName/public"
     DirectoryIndex index.php
     ServerName laraapp.test
     <Directory "C:/xampp/htdocs/ProjectName/public">
         Options Indexes MultiViews FollowSymLinks
         AllowOverride All
         Require all granted
     </Directory>
</VirtualHost>

Next, we need our Windows to listen to the host ‘127.0.0.2’ and pull through it. So, let’s browse through ‘C:\\Windows\System32\drivers\etc\’ folder and open ‘hosts’ file. Make sure, you are logged in as Super User or Super Admin.
As I’m using ‘VS Code’ as code editor, it has an option to save file with admin privileges. We’ll add these following lines at the end of ‘hosts’ file.

127.0.0.2   laraapp.test

If you’re not a ‘Super User’, just copy the ‘hosts’ file and recreate it in other folders like on ‘Desktop’ and edit it there. Save it and the copy it again to paste the file in ‘System32\drivers\etc\’ folder.

And then, we’re done. Let’s restart our Apache Server by shutting it on and off with Xampp Control Panel. And Voila!!

Let’s go to the address bar of our browser and write ‘laraapp.test’. And our application will be shown like below:

We’ll cover few Laravel basics in our next article as my lesson improves. Thanks for reading. I hope, this article will help you along the way of learning Laravel.