It’s not Scary, I promise

Not sure how comfortable or experienced the average web designer or developer is with configuring web-servers,  but we are going to tweak our local machine’s web server anyway.

Note: System Administrators are amazing. They handle the hassles of file permissions, domains, sub-domains, and all the other general server configurations stuff any sane web designer or developer would avoid. But for better or worse we are going to mess with our web server and pump up our setup and in the process learn a little about one of Apache’s powerful features — Virtual Hosts.

I am going to quickly take you through how to setup your local web-server using Virtual Hosts.

Don’t worry, this won’t hurt.

What am I doing again?

We are going to create Virtual Hosts! What is that you might ask? In a nutshell, they little text file configurations of awesome that allow us to run multiple web-sites on one machine. By using this practice on our local machine for development we can better mimic server practices and get one step closer to server Zen or Quan.

So in our /var/www/ folder we should have 3 sub-folders.

/var/www/JimsAuto
/var/www/JanesDelishDeli
/var/www/KimsKazyCakes

Well, typically to see this in our browser we would have to go to http://localhost/JimsAuto , or http://localhost/JanesDelishDeli . If we want to go to a child page of either of those websites, we have to view http://localhost/JimsAuto/about.html . Now this isn’t a problem by any means, but we can definitely improve on this setup.

Our Configuration

Let’s start by taking this awkward localhost/127.0.0.1 and giving our local server a name with some context. This is a local development machine so why not call everything locally we are working on DEV. Makes sense right?

Then, let’s go the next step and make our sites appear in a cleaner format, like JimsAuto.dev, JanesDelishDeli.dev, and KimsKrazyCakes.dev? Much cleaner right? Basically we are going to reserve these addresses on our machine so if we type dev, or any client.dev into our browser we know we will be getting a local development site.

Let’s Start Editing Stuff

We are going to be editing 2 files

1. Hosts file
2. Apache conf.

On windows  our hosts file (not sure about Windows 7) is located at c:\windows\system32\drivers\etc\ folder. The Ubuntu/Debian users will find it at /etc/hosts.
in the hosts file we should see and Ip to name mapping, like below.

127.0.0.1	localhost

All we have to do is add our own mapping for each site we have, like so:

127.0.0.1	dev
127.0.0.1	jimsauto.dev
127.0.0.1	janesdelishdeli.dev
127.0.0.1	kimskrazycakes.dev

Now, lets edit our Apache conf so our server knows what files to serve up to the browser for each hosts entry.

On windows with an WAMP install it’s located at

c:\wamp\Apache2\conf\httpd.conf

For us Ubuntu folks navigate to and edit

/etc/apache2/sites-enabled/

Now for the fun part.
You should see some stuff already in the file. The default should look something like this:

<VirtualHost *:80>
	ServerAdmin brian@iambrianadams.com
	DocumentRoot /var/www
	<Directory />
		Options FollowSymLinks
		AllowOverride All
	</Directory>
	<Directory /var/www/>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
	</Directory>

	ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
	<Directory "/usr/lib/cgi-bin">
		AllowOverride None
		Options  ExecCGI -MultiViews  SymLinksIfOwnerMatch
		Order allow,deny
		Allow from all
	</Directory>

	ErrorLog /var/log/apache2/error.log

	# Possible values include: debug, info, notice, warn, error, crit,
	# alert, emerg.
	LogLevel warn

	CustomLog /var/log/apache2/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>

</VirtualHost>

Remember, the directories will be slightly different for the Windows/Mac users.
All we want to do now is add a virtual host for each of our client sites like so:

<VirtualHost *:80>
	ServerName jimsauto.dev
	DocumentRoot /var/www/jimsauto
	<Directory /var/www/jimsauto>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
	</Directory>
</VirtualHost>
<VirtualHost *:80>
	ServerName janesdelishdeli.dev
	DocumentRoot /var/www/janesdelishdeli
	<Directory /var/www/janesdelishdeli>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
	</Directory>
</VirtualHost>

Remember to just add the virtual host entries to the file and not overwrite what was already there. And make sure the virtualhost tags are opened/closed properly

Now what…..?

Now open your browser and navigate to any of the new sites you setup and voila, you should get what your expecting. Jimsauto.dev/home.html and so forth should be handled by apache.
If you need some readouts, check the apache error logs (/var/log/apache2/error.log) if things don’t go as planned.

Feel free to comment if you need more specifics about the virtual host setup. I TRIED (probably not so well) to keep it informative, but simple.