How to enable virtual host in xampp Windows 10 and MacOS 2020

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

<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.