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

37 comments

  1. hey, Im trying to carry out your example so I can run multiple sites on my local host.

    basically Iv followed the instructions but when I search for http://localhost:8001/ i get a problem loading message. I have created a folder in the htdocs>sample_project is this correct?

    1. Yes, fine.
      1. check your httpd.conf file for this entry Listen 8001
      2. You need to have this in your httpd-vhosts.conf file

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


      3. You need to restart the apache server if you make any changes.

  2. omg your a genius thanks!! I’ve been pounding my head in for the last 3 days trying to sort out this multi-site problem I’ve been having, this simplified it and actually worked.

    Thanks again your the best!

  3. i have seen that this modification works fine
    http://localhost:8002/
    http://localhost:8003/ … so on,
    but i put Server Alias as

    ServerAdmin postmaster@abcdef.localhost
    DocumentRoot “D:/phpsites/abcdef”
    ServerName localhost:8001
    ServerAlias abcdef.localhost

    and then restarted the apache and try to access
    as http://abcdef.localhost/ did not work
    as i have mulitple site i cannot remember all the port number but i want some alias so that its easy to remember for me.

    1. http://localhost/ points your apache.
      In other words
      http://localhost:****/*/*…. points to your apache server.

      But what you are trying is defining a new host name that is not related to your apache. Your browser will try to find this from internet. So you should make a host entry in your host file [C:\WINDOWS\system32\drivers\etc\host]

      In your host entry you can add something like this
      localhost:8001 abcdef.localhost

      Means you need to redirect your host name to point to your localhost:8001

  4. Hi Expert,
    Thanks for your blog. It helped me a lot. I have one question. Which approach (traditional or New) do you think is better and why? Should I create multi-sites by chaning Document Root to point to “C:/” and create two folders for two websites underneatch “c:/” or should I use different ports? Thanks for your advice

  5. This didn’t work for me. I followed the instructions step by step and when I tried to restart Apache, it would go to “Not responding” mode for a few seconds and then it wouldn’t start.

    Then I tried setting up just port 8001 and 1 virtual host and it started. But then I couldn’t browse the default http://127.1.1.1 site, getting a 403 error.

    😦

  6. Thanks a million for this tut! But I need some help for the very beginning!
    My TextEdit on MBP is NOT asking for a pw, so I cannot save the changes.
    Where did I go wrong?

  7. Hi i am using windows XAMPP software. If i do add following code

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

    to file “C:\xampp\apache\conf\extra\httpd-vhosts.conf”, it was not working then i added the following code:

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot “C:/xampp/htdocs/myprojects/mysitename”
    ServerName localhost

    then it is working but for some directing pages like thank you pages are showing error message that file doesn’t exits.

    I gave http://localhost:8001/

    and also folder/files is not creating/uploading inside the root directory.

  8. Hi sorry, to seem dum..

    But I don’t understand this detail of your instruction

    “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
    1
    Options Indexes FollowSymLinks ExecCGI Includes
    2
    AllowOverride All”

    Do I add this into the httpd.conf code?

    Please can you explain in laymens terms

    Cheers!

  9. Thanks a lot for your tut. Worked for me, no special complications.
    Once you verify the server is indeed serving your files from the folder you specified, simply pour in there (that folder) all of the files that comprise your site.

  10. this is driving me nuts.

    If I set up one site on 8001 it works fine
    If I add a second site on 8002 then both localhost:8001 & localhost:8002 go to the site located at 8002.
    If I add a third site at 8003 then all three go to the localhost:8003.
    Anyone know why? I followed the instructions exactly.

      1. I can’t see anything wrong in there, I tried swapping the sights around to check but both 8001 & 8002 show the contents of the second folder. I also tried to change the serverAdmin in case that was confusing it. Here is the vhosts.conf, in this instance both localhosts show the contents of ccVisions.

        ServerAdmin postmaster@shirtsForMike.localhost
        DocumentRoot “C:/xampp/htdocs/shirtsForMike”
        ServerName localhost:8001

        ServerAdmin postmaster@ccVisions.localhost
        DocumentRoot “C:/xampp/htdocs/ccVisions”
        ServerName localhost:8002

      2. Thanks for the post expert, seems like this is just what i need, though I’m having the same problem as Chris, whereas all ports are being forwarded to the last most folder in the httpd-vhosts.conf file.

        ServerAdmin postmaster@dummy-host.localhost
        DocumentRoot “C:/Server/xampp/htdocs/ecoe”
        ServerName localhost:8001

        ServerAdmin postmaster@dummy-host.localhost
        DocumentRoot “C:/Server/xampp/htdocs/IPT”
        ServerName localhost:8002

        What I’ve noticed is that if I put the ecoe parameters at the very bottom of the file, this leads to errors, so i’m guessing there must be something wrong in the syntax, but I can’t figure it out.

      1. sorry to be the bearer of bad news but over a year later and I never fixed this. I now just write all three then comment out the 2 that I am not using at any given moment.

        Not ideal but the best solution I found

  11. I have set my document root to a folder say xyz. But I want to use wordpress themes on my localhost without changing this document root. I’m getting 403 error. Please help.

  12. What about for a live/remote server- so not using localhost but the ip address – how would you do that? I’ve tried it but doesn’t seem to be working.

  13. ..and my try:

    since I’m not connected directly to the Internet I use my local IP instead of my real ex.192.168.1.6
    I’ve done this so my three (WordPress and Joomla based) web sites to work:

    Listen 80
    Listen 8001
    Listen 8002

    NameVirtualHost 192.168.1.6:8001
    NameVirtualHost 192.168.1.6:8002

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot “C:/xampp/htdocs/wsite”
    ServerName 192.168.1.6:8001
    ServerAlias 192.168.1.6:8001

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot “C:/xampp/htdocs/jsite”
    ServerName localhost:8001
    ServerAlias localhost:8001

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot “C:/xampp/htdocs/wsite”
    ServerName 192.168.1.6:8002
    ServerAlias 192.168.1.6:8002

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot “C:/xampp/htdocs/wsite”
    ServerName localhost:8002
    ServerAlias localhost:8002

    In my case was irrelevant what I was writing at ServerAlias and NameVirtualHost.
    Everything was working fine no matter what I wrote there.

    P.S. I had full access and with my real IP and the names if the sites outside and inside my server.

  14. Nice post. I was checking continuously this blog and I am impressed!
    Very helpful information particularly the last part 🙂 I care for
    such information much. I was looking for this particular information for a
    long time. Thank you and good luck.

  15. Why not just assign different IPs

    127.0.0.2... | 4 | 95 | 129...

    etc. (not exceeding 254) to different ServerNames

    site/ | mysite/ | oursite/ | theirsite/...

    etc. (not omitting the /, else you get an error on some browsers) & do away with the different

    Listen 8001 | ...2 | ...3...

    ports & stuff. That’s how I roll on my local machine. Instead of trying to remember which port number belongs to which site, so as to type it correctly in the address bar, (with the ubiquitous

    localhost:

    ) you simply type the sitename and voila!!!

  16. you don’t need to listen on several ports with one more step : if you edit your hosts file (works on windows, *nix and mac, the location of the hosts file will be different) to add for example 127.0.0.1 my-site.lan. in your vhost conf then you write ServerName my-site.lan
    my-site.lan can be anything but the .lan extension is not valid on the internet and help youto remember you’re on a local website

  17. Hi, I have followed you instruction it is working fine all ports in linux ubuntu 14.4 . But all ports are supporting to the all application why

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s