This post is about setting up virtual hosts on your machine. Whether you've installed XAMPP or WAMP your urls when developing web apps on your machine will look more like so:

• http://localhost/myapplication

By the end of this post we will cover how to convert the above to any domain you want it to be. For example, converting it to www.virtual-hosts.tm. Now let's get into it.

Windows host file

To redirect your "so called" urls to your local machine you need to first add them to the .host file:

1. Go to your host file located under C:\Windows\System32\drivers\etc and open it using notepad. Run as administrator
2. At the end of the file add the following line 127.0.0.1 www.yourdomain.com
3. Save your file

Apache Configuration

Let's add a virtual host inside your httpd-vhosts.conf file. I've installed xampp on my computer:

1. Locate your vistual hosts file under C:\xampp\apache\conf\extra
2. Open the file and add the following:

   NameVirtualHost *:80
   <VirtualHost *:80>
       ServerAdmin [email protected]
       DocumentRoot "C:\xampp\htdocs\yourprojectfolder"
       ServerName www.yourdomain.com
   </VirtualHost>

3. Save your file

When defining a virtual host you will always have to add NameVirtualHost *:80 at the beginning. Apache will look through your <VirtualHost> tag for any your "so called domains". The ServerName has to be the same as the domain you put on your host file. The DocumentRoot is your project under your htdocs directory. The folder you put there has to have some index page.

Now restart your server once you've made the changes. Make sure you follow these instructions to the precisely. If you forget to even put a closing ">" your server will not start so be careful when you type this. Should you encounter any errors when starting your server you will have to check the log file under C:\xampp\apache\logs and open error.log.

Restoring your control panel

If you've installed XAMPP like I have you might notice that when you've made the changes to the httpd-vhosts.conf file and you type http://localhost on the browser's address bar, you will be redirected to your application. Don't panic! This is because your domain points to the same IP address as XAMPP's the control panel address. So since there is no specific virtual host definition on the hosts file that points to the control panel's DocumentRoot its using the one you've defined. If you want your control panel back then you have to create a virtual host for it too. This is the implementation:

NameVirtualHost *:80
<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
</VirtualHost>

This will restore your control panel when you type localhost.

Conclusion

That's it. We have created our virtual host. You can create as many as you need and remember to be extra cautious when touching the virtual hosts config file inside your apache folder.