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

Advertisement