Virtual Host in Windows 7 with XAMPP server

How to Setup Virtual Host in Windows 7 with XAMPP server

As a Developer, I would love to be called a “full-stack” Developer, whose job is not limited only to clean code & bug-free delivery, but also responsible to provide infrastructure, database, back-end code, front-end code and project management ;). I’m sure you won’t be interested in client call and daily stand up call, but this is a part of our work which helps in a successful product delivery as well as client satisfaction. 

Recently, I have moved on from Linux to Windows. You can understand a pain of a Developer when it comes to change your machine from hands-on machine to all new environment machine. It’s all new world with reinstallation of supported tools, drivers, applications that suit to your machine. 

As a Drupal Developer, I do deal with web servers. In this tutorial, I am going to share something that everybody would like to read about and i.e. “Virtual Host with XAMPP”. You must be aware of XAMPP before this tutorial also. XAMPP is a cross platform open-source web server bundle that consists of Apache, PHP, MySQL, & Perl. Anyone, who is new to the development or heard rarely about XAMPP, can visit and download supported version for your machine. 

Why do we need to set up Virtual host ?

Setting up a virtual host allows you to use an alias name for your localhost. We can setup multiple vhost as per our need so that each local website can be accessible through specific name. Virtual address means IP-based, you can use different IP or different name for each IP’s. In other words, let’s say your site resides in "localhost/site1" and you want to load all the assets. There is always an issue when we follow traditional step like creating a folder inside "..\xampp\htdocs\site1". This is the place where we used to place our hosting site in Windows, and always get an issue when they want to fetch any file resides in those directory. In this case, URL becomes "http://localhost:8012/site1/sites/default/files/image.jpg". Due to an invalid path, files become inaccessible and as a result they won’t get loaded in the page.

Using Vhost, you can load from the root of your document without any movement of your site files.

There is nothing wrong on setting up Vhost in your local machine. Using this, you can also set up multi-site that uses wildcard DNS with sub-domain name. 

What I am running on:
I am running latest version of Xampp server with Windows 7 32-bit operating system. XAMPP having Apache 2.4.25, PHP 7.1.4, MySQL 5.0.12

How can we achieve:
Here we need to deal with three important files
1.    Host file
2.    Httpd.conf file
3.    Httpd-vhosts.conf file

Step 1: Let me start with httpd.conf file, which is apache configuration file. By default httpd-vhosts.conf becomes comment out in Ubuntu as it doesn’t uses. But in Windows, it uses vhost file, so we need to tell apache to include vhost file. If you find codes like below, then remove the comment (#) and save the file.

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf


# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Location: C:\xampp\apache\conf\httpd.conf

Step 2: Create a virtualhost file. 
To create a virtualhost for your website, you need to push your code to the httpd-vhosts.conf file.

         DocumentRoot "C:/xampp/htdocs"
         ServerName localhost

As you can find in the above code, I have included DocumentRoot and ServerName inside the virtual-host tag. Unlike the major tag, there are many other tags available. And you can use them as per your requirement.

    DocumentRoot "C:/xampp/htdocs/"
    ServerAlias www.
    ErrorLog "logs/"
    CustomLog "logs/" common

As you can see in the above code, we have ServerAdmin, DocumentRoot, ServerName, ServerAlias, ErrorLog, CustomLog. 

Description:    Email address that the server includes in error messages sent to the client
Syntax:    ServerAdmin email-address|URL

Description:    Alternate names for a host used when matching requests to name-virtual hosts
Syntax:     ServerAlias hostname [hostname] ...

Description:    Hostname and port that the server uses to identify itself
Syntax:    ServerName [scheme://]domain-name|ip-address[:port]

Description:    Directory that forms the main document tree visible from the web
Syntax:    DocumentRoot directory-path Location: C:\xampp\apache\conf\extra\ httpd-vhosts.conf

Below is my machine code:

    DocumentRoot "C:/xampp/htdocs/site1"
    ServerName site1
    ServerAlias site1
             Order allow,deny
        Allow from all

In a similar way, you can add many virtualhost for your local web directory. In my case, port no is 8012. Please do change accordingly.

    DocumentRoot "C:/xampp/htdocs/site1"
    ServerName site1
    ServerAlias site1

    DocumentRoot "C:/xampp/htdocs/site2"
    ServerName site2
    ServerAlias site2

    DocumentRoot "C:/xampp/htdocs/site3"
    ServerName site3
    ServerAlias site3


Step 3: We are almost done. As we have made changes in httpd.conf and httpd-vhosts.conf files please save it. Now, it’s time to tell the browser how to handle your new servername. In Windows, host files located in C:\Windows\System32\drivers\etc\hosts       localhost       site1.local       site2.local       site3.local


vhost url browser


Like above, you can add as many as you create a new mapping for your local website.
Now, Restart your Apache and visit the site using URL. "http://site1:8012" , "http://site2:8012"  "http://site3:8012"


Drupal 8 installation in Windows with XAMPP

Create Apache2 Virtual Host