How to setup multiple websites in XAMPP

By default XAMPP is setup to run at http://localhost and serve pages that are kept under C:/xampp/htdocs. In this situation, if you want to develop multiple websites, you will need to create a folder under C:/xampp/htdocs for each website and keep the website files thereunder. For example, for a website xyz.com, you may create a folder such as C:/xampp/htdocs/xyz as the root folder for xyz.com and then during development, access it with URL http://localhost/xyz/. Likewise, for another website abc.com, you will create C:/xampp/htdocs/abc as the root folder and access it with URL http://localhost/abc/.

This is not a very nice way of working with multiple websites on your XAMPP. You would rather prefer to replicate the exact situation as if xyz.com was hosted on an internet server and access it with URL http://www.xyz.com.

How to achieve this?

With a little extra effort, you can configure your XAMPP in such a way so that you can access xyz.com with URL http://www.xyz.com and abc.com with URL http://www.abc.com. To achieve this, you need to setup multiple virtual hosts under XAMPP.

To explain the concept and the method, we will take the example of website xyz.com. The steps to achieve this are as follows:

Step 1. Create a folder for xyz.com

Create a folder C:/xampp/htdocs/xyz.com/public_html. Now, we will setup public_html as the root folder for the website of xyz.com so that when you access http://www.xyz.com, the Apache web server will serve page from this public_html folder.

Step 2. Create a virtual host under Apache web server

Navigate to the folder C:/xampp/apache/conf/extra. Open the file httpd-vhosts.conf in a text editor. At the bottom of this file insert the below lines of code/directives.

 ServerName xyz.com
 ServerAlias www.xyz.com
 DocumentRoot "c:/xampp/htdocs/xyz.com/public_html"

Now restart Apache, i.e. Stop and Start.

Note that you can have multiple entries of the above lines of code, one for each website that you add under your XAMPP.

Step 3. Local DNS Setup

Next, you need to tell your Windows OS, to which IP address it should resolve the domain name www.xyz.com or xyz.com. Since xyz.com is hosted locally, it should resolve to the localhost IP, viz. 127.0.0.1. To achieve this, navigate to C:/Windows/System32/drivers/etc/ folder and open the hosts file in a text editor. At the bottom of the hosts file, add the below line of code.

127.0.0.1  xyz.com  www.xyz.com

Now you are all set to start building your website for xyz.com locally while remaining offline.

After you have completely built your website and tested it thoroughly and then deployed it on an internet server, just comment the above line of code (as shown below).

# 127.0.0.1  xyz.com  www.xyz.com

Once commented, xyz.com will no more resolve to the local IP 127.0.0.1. Instead, it will resolve to the actual IP of the internet server where xyz.com has been eventually deployed. Every time you need to do local development on xyz.com, you can switch back to local mode by un-commenting the code.