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 https://www.apachefriends.org/index.html 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
To
# 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.
ServerAdmin webmaster@localhost.com
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.
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
ServerName dummy-host.example.com
ServerAlias www. dummy-host.example.com
ErrorLog "logs/dummy-host.example.com-error.log"
CustomLog "logs/dummy-host.example.com-access.log" common
As you can see in the above code, we have ServerAdmin, DocumentRoot, ServerName, ServerAlias, ErrorLog, CustomLog.
ServerAdmin:
Description: Email address that the server includes in error messages sent to the client
Syntax: ServerAdmin email-address|URL
ServerAlias:
Description: Alternate names for a host used when matching requests to name-virtual hosts
Syntax: ServerAlias hostname [hostname] ...
ServerName:
Description: Hostname and port that the server uses to identify itself
Syntax: ServerName [scheme://]domain-name|ip-address[:port]
DocumentRoot:
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:
ServerAdmin webmaster@xai.com
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.
ServerAdmin webmaster@site1.com
DocumentRoot "C:/xampp/htdocs/site1"
ServerName site1
ServerAlias site1
ServerAdmin webmaster@site2.com
DocumentRoot "C:/xampp/htdocs/site2"
ServerName site2
ServerAlias site2
ServerAdmin webmaster@site3.com
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
127.0.0.1 localhost
127.0.0.1 site1.local
127.0.0.1 site2.local
127.0.0.1 site3.local
………………….
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"
