Setting up Virtual Host in XAMPP for Windows

This post will talk about setting up virtual host from XAMPP using windows. This post will work for XAMPP but but setting up WAMP should not be too different from the steps mentioned here.

What is virtual host and what are we trying to do?

If you are developing sites locally than you might have gone through the pain of typing long URLs to test you work like so http://localhost/my-project-folder/my-file but wouldn’t it be useful if you could test your site like mysite.test on your browser locally? This will what we will achieve in this post. So, here are the steps. 

Step 1:

I am assuming that you have installed your XAMPP on default location under C:\xampp\apache\conf\extra.
If you have another location just go the above location inside XAMPP folder. Inside extra folder you will find a file called httpd-vhosts.conf and open it up in your favorite editor. Now its time edit this file.At the end of the file paste the code given below

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
	ServerAlias localhost
	<Directory "C:\xampp\htdocs">
        AllowOverride All 
		Require local 
    </Directory>
</VirtualHost>

Please be mindful about the location of you htdocs or public files. Above code must come first and what this does is when you go to http://localhost it will get you to XAMPP dashboard and phpMyAdmin link. Make sure that you add this first.

Step 2:

Now its time to setup new virtual host and add new site. Every time you want to add new site just copy this code and make changes accordingly.

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\my-site"
    ServerName mysite.test
    	<Directory "C:\xampp\htdocs\my-site">
        AllowOverride All 
		Require local 
    </Directory>
</VirtualHost>

In this code make changes to DocumentRoot, ServerName and Directory. Document root should point to folder containing files with code or the base/root/public directory of your project. Servername can be anything of your choosing and it servers as the URL you visit for testing your site in browser.

NOTE: I had some trouble using .dev for test domain so I am using .test here.

Directory should contain the public directory of your project just like in DocumentRoot.

Step 3:

Now its time to edit the windows host file. Go to C:\Windows\System32\drivers\etc and open file hosts using your favorite editor using administrative previlage. At the end of the file add these two lines

127.0.0.1 localhost
127.0.0.1 mysite.test

The first line 127.0.0.1 localhost needs to be added once. It will make sure that when you go to localhost, you get to the XAMPP dashboard. Next like will add new domain in you local machine. Make sure that the name you give is same as you did in ServerName above. Thats it. Save the file and exit.

Now put you code inside the folder and visit mysite.test to see the result.

IMPORTANT: Once you change you vhost setting, restart APACHE otherwise your setup will not work. !!!

That’s it. If you have any problem do let me know in the comment section. Happy coding 🙂