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
JavaScript & PHP Experts 