In this tutorial i will show you how you can set up your own virtual hosts in XAMPP so that you can access different websites or directories through different ports with a same IP or Domain Name.

For example: In your htdocs(or your preferred folder in which your websites  are stored), so in order to access different sites you have to type something like localhost/website1 or localhost/website2 etc. so with help of virtual host you can set up your server to listen on different ports and set each website on ports. Like set locahost:81 -> localhost/website1 or locahost:82/wbesite2.

Following are the steps:

  1. Go to apache directory and enter into ‘conf’ directory.
  2. Here you can see ‘httpd.conf’ file, Open in notepad.
  3. now search for ‘listen’, and when you see ‘listen 80’, just add ‘listen 81’ or with your desired port and save it. Now your server can listen for the port you set above to listen.
    # Listen: Allows you to bind Apache to specific IP addresses and/or
    # ports, instead of the default. See also the <VirtualHost>
    # directive.
    #
    # Change this to Listen on specific IP addresses as shown below to
    # prevent Apache from glomming onto all bound IP addresses.
    #
    #Listen 12.34.56.78:80
    Listen 80
    Listen 8080
  4. Now go to ‘extra’ directory and open ‘httpd-vhosts.conf’ in notepad.
  5. You will see something like this.
    ##<VirtualHost *:80>
     ##ServerAdmin webmaster@dummy-host2.example.com
     ##DocumentRoot "F:/xampp.old/htdocs/dummy-host2.example.com"
     ##ServerName dummy-host2.example.com
     ##ErrorLog "logs/dummy-host2.example.com-error.log"
     ##CustomLog "logs/dummy-host2.example.com-access.log" common
    ##</VirtualHost>
    
  6. Now just uncomment these lines (remove ##). Now set your desired port that you have set earlier and set the directory in the document root. It should be something like this.
    <VirtualHost *:8080>
     ServerAdmin webmaster@localhost
     DocumentRoot "F:/xampp/htdocs/website1"
     ServerName website1
     ServerAlias www.dummy-host.example.com
     ErrorLog "logs/website1.log"
     CustomLog "logs/website1" common
     </VirtualHost>

    here i have set ‘8080’ as port and ‘F:/xampp/htdocs/website1’ as my directory.

  7. Now in the same just add. Without it you will get “403 error”.
  8. <directory "F:/xampp/htdocs/website1">
     require all granted
     options all
     </directory>
    
  9. Now the final code would look like.
    <pre><VirtualHost *:8080>
     ServerAdmin webmaster@localhost
     DocumentRoot "F:/xampp/htdocs/website1"
     ServerName website1
     ServerAlias www.dummy-host.example.com
     ErrorLog "logs/website1.log"
     CustomLog "logs/website1" common
    <directory "F:/xampp/htdocs/website1">
     require all granted
     options all
     </directory>
     </VirtualHost></pre>
    

Now you are ready with it. Now access your localhost:port and see the results.!

You can find a video tutorial here.

Advertisements