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

Advertisements

Google amazes me every day : Now its Google Instant Preview

Google instant preview

Google search results with google instant

Hi,

You guys might have noticed this recently that : In search results page, if you keep changing keyword, below results are automatically refreshed on each key press. This new feature is called Google Instant.

A week back I have noticed something in google results page which I felt like a tag line of a car ad “Get Ready To Get Surprised”.

Old methodology: A firefox addon

In the past you might have come across a addon for Firefox called coolPreviews which basically show you the search icon on the each search results, on mouseover of it will get the preview of that site. This addon is compatible with firefox3 and above versions, other browsers don’t have this option. I tried this earlier, and lost interest in it cause of its slowness, and memory eating.

Google Instant Preview

Go to google dot com and search for any keyword. [Try it in modern and fast browsers like Firefox or Google Chrome or Opera or Internet explorer >= 8th version].

On the right end of each result’s title there is a search icon present. Just click on it once. You are done! Keep moving to the below or above results by mouse overing on them. You can see the preview of that site without actually going on to the site. And response is amazingly super fast!!!.

  • Huge Time Saving, really I mean it.
  • When searching for product review or description –  You can decide which site has more images? which site has good video demo of it, or which site has more pictures on it to get a good feel about the product.
  • You can avoid some sites which they only contains link to some other third site – this you will experience when you trying for some free MP3 files or ebooks.

In my point of view, from a web-development perspective, this is major mile stone achieved by google, Also which makes our clients to ask for “Give me the search results similar to google instant” 🙂

This is going to set bench mark for people in web to develop applications or sites to provide this kind experience. Its a major lesson for Microsoft! yeah, they will think again – “was it necessary for them to come to market with a product like Bing”?

When Bing released lot of articles on internet, news papers and even news channels yelled something like “Bing will take over Google” I can say then now “Kiss my ***”

This kind of user experience makes web a greater place to be. People will update there browsers to modern browsers like firefox or chrome or opera to get this kind of experience.