HTML

Setup multiple sites on your local machine using XAMPP or Apache

Hello Everyone,

Its been long time, was busy with some project works.

Traditional approach (what we used to do):
As a web developer you might have come across a situation where you need to setup multiple sites on your local machine. May be you are working on multiple projects or working on your personal site and your regular project. Earlier what we used to do is change the doc root in your apache’s httpd.conf file [C:\xampp\apache\conf\httpd.conf]. Similar to this


DocumentRoot "C:/xampp/htdocs/myproject1"

So this will help us to point the localhost directly to myproject1 folder. In other words when you hit http://localhost/ you will get the contents of myproject1. If we had another site to be configured we need to change this DocumentRoot again and restart the apache.

New approach:

You can make your localhost to point to different folders on different port numbers. Follow these simple steps:

Step 1: Make your apache to listen to multiple ports. Go to C:\xampp\apache\conf\httpd.conf and search for the key word Listen you can see something like this Listen 80. Now tell your apache to listen to multiple ports, replace that with below content

Listen 80
Listen 8001
Listen 8002
Listen 8003

Step 2: Now go to “C:\xampp\apache\conf\extra\httpd-vhosts.conf”, this is the actual player. At the end of the file you can specify something like this below:


    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/sample_project"
    ServerName localhost:8001

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/personal_site"
    ServerName localhost:8002

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/myworks"
    ServerName localhost:8003

Which tells your apache to take different folders on hitting different port numbers. That is when you hit http://localhost:8001/ it will take the contents from sample_project, similarly http://localhost:8002/ will point to your personal_site folder. http://localhost:8003/ will point to your myworks folder.

Default http://localhost/ will point your Document root folder that you have mentioned in your  httpd.conf folder. i.e in my case it is myproject1 foder.

By this we will be able to run 4 different sites on local machine. Hope this helps you people.

Note: You need to restart your apache whenever you change something in httpd.conf or httpd-vhosts.conf

For Mac Users

Lets go to the httpd.conf file at this location “/Applications/XAMPP/xamppfiles/etc/httpd.conf”

Also open the httpd-vhosts.conf from “/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf”

So now your editor will ask for the password, enter your login password or your root password.

Now Search for listen in and replace the content there with this

Listen 80
Listen 8001
Listen 8002
Listen 8003

Now at the end of the httpd.conf file, add this line

"AcceptMutex flock"

Also search for the and below you should make “AllowOverride” to “All” and above this line add these options “Options Indexes FollowSymLinks ExecCGI Includes” i.e

    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride All

Search for “# Virtual hosts” and remove the comment (#) below this line
i.e

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Finally go to the httpd-vhosts.conf file and make sure your folders are configured as said above.
Here is a example:


    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/clientx/front_end"
    ServerName localhost:8001
    ErrorLog "logs/dummy-8001.example.com-error_log"
    CustomLog "logs/dummy-8001.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/testing_ground/test"
    ServerName localhost:8002
    ErrorLog "logs/dummy-8002.example.com-error_log"
    CustomLog "logs/dummy-8002.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/client1/development"
    ServerName localhost:8003
    ErrorLog "logs/dummy-8003.example.com-error_log"
    CustomLog "logs/dummy-8003.example.com-access_log" common

Google Font API

Hi all,

On Wednesday, May 19, 2010 google has announced google web fonts. Its a open source and its the end of all our typographic problems. We were using flash, images etc to achieve the rich typography in the front end. Now all these things will be replaced with new concept from google.

All you need to do is visit this page http://code.google.com/webfonts choose the font which you need,
They will give you the code for it. Means its a new link tag similar to this

<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css">

You have to include this link tag in your page. And you need to specify the font family for this where ever you require that.

.class2{
	font-family: 'Reenie Beanie', arial, serif;
	font-size: 1.5em;
   }

Thats it. You are done. Interesting part is it works with IE6 also !!! 🙂
I have created a example page here.

More info at
http://code.google.com/apis/webfonts/

Google font API example

Google font API example