Let’s see how we can enable virtual host on XAMPP. So in this guide we are going to enable virtual host on Windows 10 And MacOS.
Virtual Host In Windows 10
Step 1
To start we first need to go to
XAMPP/apache/conf/extra/httpd-vhosts.conf
Here un-comment this line
##NameVirtualHost *:80
to
NameVirtualHost *:80
Step 2
We have a Laravel application where i want to use virtual host. Application name is “SKY”. It is like “htdocs/sky” directory where i have all project files. So for this i will define virtual host config as given below under
XAMPP/apache/conf/extra/httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/sky/public"
ServerName sky.test
<Directory "/Applications/XAMPP/htdocs/sky">
Options Indexes FollowSymLinks Includes execCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
If you are not using Laravel, Then you do not need to use “public” in this line of code
//For Laravel
DocumentRoot "C:/xampp/htdocs/sky/public"
//For Non Laravel
DocumentRoot "C:/xampp/htdocs/sky"
Replace "sky" with your application folder name
Step 3
Now go to this directory
//Navigate to this folder under C drive
C Drive > Windows > system 32 > drivers > etc
Here we need to open “hosts” file. With admin permissions. So .In Windows search type “notepad”. And when search results appear right click on notepad option. Then click on “run as admin option”. Open Hosts file from “C Drive > Windows > system 32 > drivers > etc” directory.

In hosts file just add entry for your project folder, So in our case we have Application name “sky”, And folder for project is under htdocs/sky. So entry should be like this.
// replace "sky" with your project/folder name
127.0.0.1 sky.test
Final Step
Restart the XAMPP and check in your browser “sky.test” or “Your project name.test”. You should see your application running. If not then something you missed or did wrong. As we have sky application up here.


Virtual Host In macOS
Now Let’s see how to setup Virtual Host In Virtual Host in macOS. I assume you have XAMPP already installed in your system.
Step 1
go to XAMPP/etc/extra/ and open a file named “httpd-vhosts.conf”.
Let’s say we have same project with name “sky”. In macOs as well. So to set it up we need to edit “httpd-vhosts.config” file and add this code.
<VirtualHost *:80>
DocumentRoot "/Applications/XAMPP/htdocs/sky/public"
ServerName sky.test
<Directory "/Applications/XAMPP/htdocs">
Options Indexes FollowSymLinks Includes execCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
Again we are making Laravel application so there is public included in Document Root. If your application is not laravel then remove “Public”
//For Laravel
DocumentRoot "/Applications/XAMPP/htdocs/sky/public"
//For Non Laravel
DocumentRoot "/Applications/XAMPP/htdocs/sky"
Replace "sky" with your application folder name
Step 2
In Finder. Look for option Go. Top right corner near apple logo. In Go find “Go To Finder” and type ” /private ” and click Go.

It will open a window where we need to go inside ” etc folder” and open ” hosts ” file with text editor. At bottom of this file add below given content
127.0.0.1 sky.test
//Replace sky with your project folder name
Step 3
Important: To enable custom virtual hosts to work you need to un-comment lines from ” XAMPP/xamppfiles/etc/https.conf”
un-comment lines from ” XAMPP/xamppfiles/etc/httpd.conf” as given below.
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf
#Virtual hosts
#Include etc/extra/httpd-vhosts.conf
To
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf
# Virtual hosts
Include etc/extra/httpd-vhosts.conf
Restart XAMPP and all should be working. You can access “sky.test” on local XAMPP server.
Do let me know if you face any issue so, I can help you with that.
You must log in to post a comment.