How To Configure Virtual Host using XAMPP on Windows 10 & Solve Different Issues?

XAMPP is a commonly used and most popular web server which is locally used by programmers in the computing world.

After successful installation of XAMPP, you create a website inside the folder htdocs. So programmers first create a folder on behalf of a current project name that is create_website and open a link to via http://create_website:8088.

This means you can access your entire project on the address 8088  port number that is by default given by the XAMPP server. 

Now you need a DNS entry that recognises create_website.

So, now we discuss….

Apache:

First of all make sure that what is the port number apache is listening to? You can see in the above image it is listening to port 8080  for  http traffic  and port 444 for https traffic.

Now you can  change this by clicking on the config button XAMPP admin console.

Now you can change the ports as your own interest.  don’t use port 80  because it is mostly used by your PC for the internet.

After setting the ports, save it and restart Apache in the XAMPP admin console.

Now we are going to discuss Virtual Host:

Next is to create the virtual host that tells Apache how to create_website should be interrupted.

Go to the folder: \apache\conf\extra and open file: httpd-vhost.conf

Let’s assume create_website in the folder \htdocs\create_website-1.2.3.Now add the following section to the end of the file and modify it to your all project needs.

“
 
ServerAdmin [email protected]
    DocumentRoot "C:/XampServer/htdocs/create_website-1.2.3"
    ServerName create_website
    ServerAlias create_website
    Order allow,deny
        Allow from all 

“
After saving the file, restart the XAMPP server, not MySQL.

Modify DNS:

While working on Windows PC we have to modify the DNS settings in our local host file.

How to open a DNS File on your PC?

Open the file: \system32\drivers\etc\hosts.

Generally you cannot access the file and you have to modify the attributes to make it editable.

Now add this following entry to this file then again modify it to your own needs.

127.0.0.1 create_website #Xampp c:\Xampserver\htdocs\create_website-1.2.3

Here # is just the comment but it helps us where the entries could be found on the web server.

Now you are done and can access: http:\create_website:8088, on your local web server.

Now the main issue is here,

How to solve different issues that arise while setting up the XAMPP server as a virtual host?

Suppose there is an issue arises on XAMPP is running on port 8081 as 80 is being occupied by some Windows process I need to use virtual host for that I configure with following code in

C:/xampp/apache/config/extra/httpd-vhosts.config (or C:/xampp/apache/conf/extra/httpd-vhosts.conf in newer releases

<VirtualHost *:80> 
             ServerName comm-app.local 
             DocumentRoot "C:/xampp/htdocs/CommunicationApp/public" 
             SetEnv APPLICATION_ENV "development"
                        <Directory "C:/xampp/htdocs/CommunicationApp/public" 
                                  DirectoryIndex index.php 
                                  AllowOverride 
                                  All Order allow,deny 
                                  Allow from all 
                       </Directory> 
</VirtualHost>

and also update the hosts file with 127.0.0.1 comm-app.local and try to restart apache but it is showing an error.

• 15:03:01 [Apache] Error: Apache shutdown unexpectedly. 
• 15:03:01 [Apache] This may be due to a blocked port, missing dependencies, 
• 15:03:01 [Apache] improper privileges, a crash, or a shutdown by another method. 
• 15:03:01 [Apache] Press the Logs button to view error logs and check 
• 15:03:01 [Apache] the Windows Event Viewer for more clues 
• 15:03:01 [Apache] If you need more help, copy and post this 
• 15:03:01 [Apache] entire log window on the forums

So how to solve this issue?

Error On:

<VirtualHost *:80> -> Fix to :8081, your POrt the server runs on 
                 ServerName comm-app.local 
                 DocumentRoot "C:/xampp/htdocs/CommunicationApp/public" 
                 SetEnv APPLICATION_ENV "development" 
                 <Directory "C:/xampp/htdocs/CommunicationApp/public" -> This is probably why it crashes, missing >
                                                DirectoryIndex index.php 
                                                AllowOverride All 
                                                Order allow, deny 
                                                Allow from all 
             </Directory> -> MIssing close container: </VirtualHost>

Solution-1

Used Fixed Version

<VirtualHost *:8081> ServerName comm-app.local 
             DocumentRoot "C:/xampp/htdocs/CommunicationApp/public" 
             SetEnv APPLICATION_ENV "development" 
            <Directory "C:/xampp/htdocs/CommunicationApp/public"> 
                          DirectoryIndex index.php 
                          AllowOverride All 
                          Order allow,deny 
                          Allow from all 
                </Directory> 
        </VirtualHost>

One thing to mention:

You can always try and run command:

service apache2 configtest

This will tell you when you got a malformed configuration and maybe even can tell you where the problem is.

Furthermore it helps avoid unavailability in a LIVE system:

service apache2 restart

Will shutdown and then fail to start, this configtest you know beforehand “oops I did something wrong, I should fix this first”. But the apache itself is running with an old configuration.

Solution-2:

Step 1) C:\WINDOWS\system32\drivers\etc\ Open the “hosts” file :

127.0.0.1 localhost 127.0.0.1 test.com 127.0.0.1 example.com

Step 2) xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80> DocumentRoot C:/xampp/htdocs/test/ ServerName www.test.com </VirtualHost> <VirtualHost *:80> DocumentRoot C:/xampp/htdocs/example/ ServerName www.example.com </VirtualHost>

Step 3) C:\xampp\apache\conf\httpd.conf. Scroll down to the Supplemental configuration section at the end, and locate the following section (around line 500), Remove the # from the beginning of the second line so the section now looks like this:

#Virtual hosts Include conf/extra/httpd-vhosts.conf

Step 4) Restart XAMPP and now run in your browser :

www.example.com or www.test.com

Solution-3:

Add this Code in C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80> DocumentRoot "C:/xampp/htdocs" ServerName qa-staging.com ServerAlias www.qa-staging.com <Directory "c:/xampp/htdocs"> Order allow,deny Allow from all </Directory> </VirtualHost>

Now Add your virtual host name in the below file.

C:\Windows\System32\drivers\etc\hosts

127.0.0.1 qa-staging.com

If you are not able to save this code in host file then right click on notepad select Run as administrator and then you can able to save your custom code now restart your XAMPP

Solution-4:

Write these codes end of the 

C:\xampp\apache\conf\extra\httpd-vhosts.conf file,

“
DocumentRoot "D:/xampp/htdocs/foldername" ServerName www.siteurl.com ServerAlias www.siteurl.com ErrorLog "logs/dummy-host.example.com-error.log" CustomLog "logs/dummy-host.example.com-access.log" common
“

Between the virtual host tag.

And edit the file System32/Drivers/etc/hosts use notepad as administrator

add the bottom of the file.

127.0.0.1 www.siteurl.com

Solution-5:

<VirtualHost *:80> 
             DocumentRoot "D:/projects/yourdirectry name" 
             ServerName local.yourdomain.com 
            <Directory "D:/projects/yourdirectry name"> 
                       Require all granted 
            </Directory> 
</VirtualHost>

Save the Apache configuration file.

Solution-6:

Just change the port to 8081 and following virtual host will work:

<VirtualHost *:8081> 
ServerName comm-app.local 
DocumentRoot "C:/xampp/htdocs/CommunicationApp/public" 
SetEnv APPLICATION_ENV "development" 
           <Directory "C:/xampp/htdocs/CommunicationApp/public"> 
                        DirectoryIndex index.php 
                        AllowOverride All
                        Order allow,deny 
                        Allow from all
           </Directory> 
</VirtualHost>

Solution-7:

In Your disk drive:\xampp\apache\conf\extra\httpd-vhosts.conf exists an example and you could edit it with your configuration:

##<VirtualHost *:80> ##ServerAdmin [email protected]
##DocumentRoot "C:/xampp/htdocs/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 
##</VirtualHost>

It would be like this, as example and don’t forget to add VirtualHost for localhost itself to have possibility run phpmyadmin and other project at the same time on the port 80, as example I will show with store.local project:

<VirtualHost *:80> 
DocumentRoot "C:/xampp/htdocs" 
ServerName localhost 
</VirtualHost> 

<VirtualHost *:80> 
ServerAdmin [email protected] 
DocumentRoot "c:/xampp/htdocs/store.local/public" 
ServerName www.store.local
ServerAlias store.local 
<Directory C:/xampp/htdocs/store.local> 
            AllowOverride All 
            Require all granted 
</Directory> 
</VirtualHost>

Then as mentioned above you must add in: 

C:\windows\system32\drivers\hosts to the bottom of the file

127.0.0.1 store.local 

127.0.0.1 www.store.local

Restart Apache and try in the browser:

store.local or www.store.local

Maybe at the first time you must to add like this:

http://store.local or http://www.store.local

To use other ports, you must add follows, before your VirtualHost:

Listen 8081 or another which you prefer

Then just use the port for your VirtualHost like this:

<VirtualHost *:8081> 
             ServerAdmin [email protected] 
             DocumentRoot "c:/xampp/htdocs/store.local/public" 
             ServerName store.local 
             ServerAlias www.store.local 
            <Directory C:/xampp/htdocs/store.local> 
                        AllowOverride All 
                        Require all granted 
           </Directory>
           </VirtualHost>

then restart Apache and try in the browser

store.local:8081 or www.store.local:8081

and only project for which you add the port will running on this port, for example other projects and phpmyadmin will be still running on port 80

Also Read: What is Email Hosting?
Also Read: What is Managed Hosting?
Also Read: What is WordPress Hosting?
Also Read: What Is Shared Hosting?
Also Read: Does Your Pet Need Its Own Domains?
Also Read: 8 Most Common Mistakes Small Businesses Make Website.