Setup a Virtual Host for Your site in XAMPP

In my previous blog I explained how you can setup a Drupal site in you local environment using XAMPP. As I already mentioned there that it is great to run a website in a local machine  using http://localhost but it have a drawback. By default you have a single domain and you have to pull all your work under the same domain in different directories. This isn’t very real and can cause problem while using server side includes and root relative links. But there is always a solution to every problem.

What if I tell you you that you can run multiple domains in your local machine and each one of them is separated from each other? Yes, this can be achieve using Virtual Hosts

Virtual Hosts gives you the ability to host multiple web-sites and domains in you local machine. Using this you can separate your websites like http://localhost/site1 & http://localhost/site1 as http://site1 and http://site2. When you type in the Virtual Host URL in your browser it doesn’t go to the internet to search the site but pull out the sites from your Web Server. Plus you don’t need to place each working site under htdocs or var/www (For Ubuntu) directory. With Virtual Hosts you can place your directory anywhere in your computer and place the correct path to the directory under the hosts.

Adding a Virtual Host in XAMPP is not very difficult. All you need to do is to edit two files but with administrative permissions.

Step 1: 

Add a new entry to the hosts folder. A host file contains all the hosts IPs to point to the domain running in your Virtual Hosts and lets you re-direct to particular domain and tell your computer to NOT go out looking in internet when you type in a particular URL.

Go to C:\windows\system32\drivers\etc\  and open the file hosts in a Notepad with administrative rights.

You may not be able to see the windows folder–some files are hidden by default under Windows. Here are instructions to make those files visible.

Add the following line to the end of the hosts  file.

127.0.0.1 site1.dev

127.0.0.1 is the localhost. This is how the computer refers itself. Its a kind of saying “ME”.
The second part is the host that will you will enter in the browser. This can be anything of your choice ranging from site1.local to simply site1.

Save and close the file and you are done adding a host. Now as there is a host setup with a domain we need to inform our Web Server about the same.

Step 2:

Again in Notepad open the file C:\xampp\apache\conf\extra\httpd-vhosts.conf

This is the file which tell the Web Server about the Virtual Hosts residing your computer.

I suppose you have a directory placed under C:\xampp\htdocs\site1 then you can go ahead and add the following line to end of the file.

NameVirtualHost *
  <VirtualHost *>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
  </VirtualHost>
  <VirtualHost *>
    DocumentRoot "C:\xampp\htdocs\site1"
    ServerName site1.local
  <Directory "C:\xampp\htdocs\site1">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

These line turns on the Virtual Hosts feature in Apache  and set up
the C:\xampp\htdocs folder as the default location for http://localhost.

<VirtualHost *>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
  </VirtualHost>

 

These add the Virtual Host to your WebServer. This is more or less same every Virtual Host you add in your system. The DocumentRoot tells the server where to fetch the director of your site. ServerName adds the site domain name as you have given in the hosts.
Whenever you need to add more Virtual Hosts just copy the code from here and paste. You need to change the directory portion though.

<VirtualHost *>
    DocumentRoot "C:\xampp\htdocs\site1"
    ServerName site1.local
  <Directory "C:\xampp\htdocs\site1">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

 Now save the Apache configuration file and close. You need to restart the Apache from XAMPP control to reflect your changes.

Now that we are all setup lets hit the URL in  your browser and check if everything is working.
Just type http://site1.local and you will have your website running under this URL. How cool is that 😉

However if you don’t see your website there cross check the directory names and host names.

So, this is how you can setup a Virtual Host in your Windows machine using XAMPP. Will also show you how you can do the same in Ubuntu. Feel free to put your questions/doubts/feedback in the comment section.

Follow me to get the latest blogs as soon they get published.

Cheers 🙂