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
- Hosts file
- 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.
