How to create Virtual Hosts on XAMPP in Windows10

virtual-host-creation.md

image credit goes to https://www.ibm.com/

Why do we Setup "Name-Based Virtual Host":

The term Virtual Host refers to the practice of running more than one web site (such as Demo.Website1.com and Demo.Website2.com) on a single machine. Virtual hosts can be "IP-based", meaning that you have a different IP address for every web site, or "name-based", meaning that you have multiple names running on each IP address. The fact that they are running on the same physical server is not apparent to the end user.

With name-based virtual hosting, the server relies on the client to report the hostname as part of the HTTP headers. Using this technique, many different hosts can share the same IP address.

Name-based virtual hosting is usually simpler, since you need only configure your DNS server to map each hostname to the correct IP address and then configure the Apache HTTP Server to recognize the different hostnames. Therefore you should use name-based virtual hosting unless you are using equipment that explicitly demands IP-based hosting. Historical reasons for IP-based virtual hosting based on client support are no longer applicable to a general-purpose web server.

Steps to Configure Virtual host for our application "Demo-app"

Assuming Demo-app as our application here.

To create Name-based virtual host we need to make changes in below 3 files only:

• C:xampp\apache\conf\httpd.conf
• C:\xampp\apache\conf\extra\httpd.vhosts.conf
• C:\windows\System32\drivers\etc\hosts

Step 1

Open Virtual Hosts Apache configuration file httpd-vhosts.conf from C:\xampp\apache\conf\extra\

Step 2

Search for Virtual Hosts and remove '#' after line # Virtual hosts as shown in below image

After removing #, file should look like this:

Step 3

Now Open httpd-vhosts.conf file from C:\xampp\apache\conf\extra

Step 4

Add below code at last line for demo-app in httpd-vhosts.conf file.

<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs\Demo-app\public"
ServerName demo-app
ServerAlias www.demo-app
<Directory "C:\xampp\htdocs\Demo-app\public">
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

Step 5

Now Open hosts file from C:\Windows\System32\drivers\etc

Step 6

Add the following line in the Host file

demo-app
127.0.0.1 demo-app
::1 demo-app

Step 7

Our first Virtual host is ready.

Now Restart the Apache and mysql servers on XAMP control panel

Step 7

Now Open "http://demo-app" on your favorite browserand Check your newly created Virtual host for Demo-app

---

Final Words

That’s it! I hope you have a clear idea of setting up Virtual Hosts for your website with XAMPP running on Windows 10. If you have any queries or suggestions, feel free to ask me via the comment section below.

Reference for deep understanding on Apache Virtual Hosts

Thanks..

---