How to Setup Virtual Host with Xampp

xampp

Well, you might be familiar with the name Xampp which is used as a local host to run your site locally and test it as well. I have already written one tutorial over how you can install WordPress on a localhost using the same Xampp.

Now, talking about the problem which you might be or are facing is that whenever you are running any site on localhost, your domain name will be somewhat like this http://localhost or http://127.0.0.1 or http:// localhost/yoursite. Also when you are migrating your website on a cloud server you might face a problem with the connection. You might be thinking that can’t we use a custom domain in a local host? Well, the answer is Yes! Ofcourse you can do that. If you are using the same domain over localhost which you are using for migrating over the cloud than there is no issue. So, today I am going to show you the same through this tutorial.

Step 1 : Modify The Windows Host File

The windows’s host file is a simple plain text file which connects your hostname with the ip address. For Windows 8, the location is C:\Windows\System32\Drivers\etc.

The default file of Windows 8 is as shown below:

Now we will make an entry into this file which will map our custom domain with 127.0.0.1 . This 127.0.0.1 is an ip address also known as a lookback address of every computer. This is a special ip address which is used in every pc.

Now before editing this file take a backup of this file.

Important note : For Windows 8/8.1 and windows 7 there is a UAC ( User Account Control) which won’t allow you to edit the administrator level files. But don’t worry you’ll not require to edit any UAC settings. You just need to follow the below steps to edit that file.

Step 1: Go to start and find notepad over there. Right click on it and in the bottom of the options provided, select “Run as administrator”.

edit host file

Now go to menu File > Open and navigate to the following location : C:\Windows\System32\Drivers\etc folder and open the host file. After opening this file, add the following line at the bottom of this file :

127.0.0.1 yourwebsite.com.  Save and close this file.

Now your host file will look like this:

Now whenever you open your domain in a web browser, your domain connects to the ip of your pc and not the internet because we have mapped it to 127.0.0.1. Hope you understood. 😛 You can add as many custom domains you want in this way.

Now let us see how you can connect your domain with the website root directory.

Step 2 : Modify Apache virtual host File

Note : While editing your httpd-vhosts.conf file take care that your xampp server is off. Don’t worry if it is ON, you can just shut it OFF or Stop it. You have to do this because only after this you’ll be able to access the virtual host otherwise not.

We can make many local sites with the help of Apache’s virtual host and also can serve with the help of custom domains on online basis.

Now navigate to C:\xampp\apache\conf\extra and in this folder you will see a file named httpd-vhosts.conf and to edit this use any plain text editor like notepad, notepad++ or Sublime text and add the following at the end of this file.

The above line is important because we wont loose the htdocs folder. So, now we are ready to edit the virtual host.

Now add the below mentioned line after adding the above lines.

Where,

1. DocumentRoot is the root directory of your website where you have added your website’s every html, css and js files.

2. ServerName is a  custom domain which you have added in the host file of windows.

At the end your file will look like this:

In this way you can use many local websites with custom domains.

So, now let us see how you can add more websites to this and how it’ll look like.

Now I am pretty much sure that you got the idea of how to do it. Just follow the same format to add lines in your host file.




There are 17 comments

Add yours
  1. ratnesh

    Nice post buddy
    this post is really unique and best. Thanks for the info i am really excited by reading this post n surely try this trick… 🙂
    Once again thanks for this wonderful, awesome post… 😀

  2. Samir

    Explained it in very detailed! I’m already using Xampp and also Wampp which would be very useful for testing my website themes and also other things.

    Thanks

  3. Mahaveer Verma

    I use Xampp whenever it comes to testing my PHP knowledge or experimenting with WordPress. I install WordPress on a virtual host and experiment themes and customization in it.

  4. Raj Kumar

    Superb tutorial and I guess its really complicated to use xampp as sometimes it shows nonsense errors and by following the tutorial its really easy.

    Thanks

  5. Lisa Chaves

    Well, Brilliantly Described Points.

    Actually, In my career, faced Problems with this number of times.

    So, I would say, Very Good Information shared, keeping in mind, it will help many in upcoming days..

    Keep the good work up.

    Have a nice weekend.


Post a new comment