Smarter Virtual Host Configuration on Windows

Sometimes our QA and Designer colleagues feels irritate when they need to setup some sites locally to test or fix design issues. Same thing for developers also. For setting up a new site we need to go through 4/5 steps. How about if we can reduce these steps into one?

Yeah, we can reduce these steps into one step. Just put your project folder maintaining an easy convention and you are done.

For example: you want to setup a site in your local machine with the following URL:
http://domain.local
Then the folder structure will be
local
    |
    --> domain

that’s it..

I found that Apache supports VirtualDocumentRoot, which give us some dynamic document root. Let, see how we can use this to achieve an smarter way to setup a site locally very easily. Before going ahead I just want to take a look on our OLD steps.

OLD Way: Setup a site for http://domain.local on your PC

  1. Create a directory for the site’s files.
  2. Create a line in hosts file for the domain, i.e. 127.0.0.1 domain.local
  3. Add a few lines to my Apache conf file to configure the virtual host

    <VirtualHost *:80>
        ServerName domain.local
        DocumentRoot D:\Projects\domain.local
        ...
    </VirtualHost>
  4. Restart Apache

But the New and Smarter way is

  1. Create a directory for the site’s files. Something like:
    D:\Projects\local\domain (for my case)

And you are done.. 😉

Now, for achieving this we have to do some configuration level changes for once.

  1. Edit your hosts file to add *.local domain in to host entry as bellow:

    127.0.0.1       localhost
    127.0.0.1       *.local
    ::1             localhost

  2. Enable vhost_alias_module modules/mod_vhost_alias.so in httpd.conf file (Apache configuration file). This will add VirtualDocumentRoot feature in the Apache.
    • usually you will find this file in [installed folder]\apache\conf\httpd.conf.
    • in this file find the above line and remove the preceding “#”.
  3. Now, go to {installed folder}\apache\conf\extra\ and edit httpd-vhosts.conf file as follows:

    NameVirtualHost *:80

    # Adding folder permissions
    <Directory "D:\Projects\local\*">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require local
    </Directory>

    # Pointing folder for URLs.
    <VirtualHost *:80>
        UseCanonicalName Off     # This is a must.
        ServerAlias *.local
        VirtualDocumentRoot "D:\Projects\%-1\%-2"
    </VirtualHost>

  4. Restart your Apache service

So, Your configuration is done. This settings is only for .local URLs.

Now, to add a new site in local environment, just put your project folder in the local folder and browse with URL like http://{foldername}.local, cheers..

Here, ServerAlias *.local to limit to the .local URLs. You can add more pattern like ServerAlias *.local *.dev *.stg etc.

In VirtualDocumentRoot I used a dynamic URI to point the dynamic folder. The %-1 returns last part from the URLs (which is local for our case) and the %-2 returns the 2nd part of the URL from the last. I prefer this structure because this helps me when I want to point multiple URLs on a single folder. It can be for multi-site in Drupal CMS. For example: abc.xyz.local and aaa.xyz.local need to point on local\xyz folder.

You can use any pattern you like, Please refer here for more details of the URI pattern those are supported by Apache.

For any confusion or problem, please comment here or send me a message..