Step-by-Step Guide to Configure Multiple Virtual Hosts with XAMPP on Windows 10/11

In the vast landscape of web development, streamlining your workflow is essential. One way to enhance your efficiency is by configuring multiple virtual hosts in XAMPP. In this guide, we’ll take you through the process, demystifying the steps to create and manage multiple virtual hosts seamlessly.

Before we dive into the configuration, let’s clarify what virtual hosts are. In simple terms, they allow you to run multiple websites on a single machine, each with its unique domain. This is particularly handy for developers working on various projects simultaneously.

Before you go to step 1 you can create a folder you want to use for the virtual host you’ll be creating in the next steps.

Step 1: Locate Your Hosts File

Begin by finding your system’s hosts file. This file acts as a local DNS for your machine, mapping domain names to IP addresses. For Windows, it’s commonly found at C:\Windows\System32\drivers\etc\hosts. On Unix-based systems, you can locate it at /etc/hosts.

You can also use win+r/R to open the file directly- C:\Windows\System32\drivers\etc\

There you will see “127.0.0.1       localhost” is added already. Leave it as it is.
In next line write  ” 127.0.0.1       testvirtual.local”

Step:2 XAMPP Apache Configuration

Navigate to the Apache configuration file (httpd.conf), open the file httpd-vhosts.conf in a code editor (could be open in notepad as well). 

File location: W:\xampp\apache\conf\extra.

Now copy and paste the below code at bottom of the config file-

     <VirtualHost *:80>
                 DocumentRoot "DriveName:\xampp\htdocs\testvirtual.local"
                 ServerName testvirtual.com
                  <Directory "DriveName:\xampp\htdocs\testvirtual.local">
                  </Directory>
     </VirtualHost>

Or you can use the below VirtualHost container as well which we are using in this tutorial:

<VirtualHost *:80>
     DocumentRoot "C:\xampp\htdocs\testvirtual.local"
     ServerName testvirtual.com
          <Directory "C:\xampp\htdocs\testvirtual.local">
               Require all granted
          </Directory>
</VirtualHost>

Save and close the file.

Step 3: Restart XAMPP

Once you’ve configured your virtual hosts, restart XAMPP to apply the changes. This ensures that Apache recognizes the new settings.

Congratulations! You’ve successfully configured multiple virtual hosts in XAMPP. This powerful feature simplifies your development environment, allowing you to work on diverse projects without the hassle of constant configurations.

By integrating this into your workflow, you’ll notice a significant boost in productivity. Experiment with different setups, and tailor your local environment to suit your development needs effortlessly. Happy coding!