How to create virtual hosts on your local XAMPP web server

How to create virtual hosts on your local XAMPP web server

This article shows how you can easily create virtual hosts with an Xampp web server.

Xampp web server

Xampp is a commonly used and popular web server to install locally on your PC or Mac. You can download it here: link.

Objectives of this article

After successful installation you create your websites in the folder htdocs Let's say you have a project named popcorn and you would like to open via: http://popcorn:8088. This would mean that you have to address 8088 as the port that is "listened to" by your Xampp web server and you need a DNS entry that recognizes popcorn.

How to do this in Xampp

image

Apache

First of all make sure what port Apache is listening to. You can see in the image above that here it is listening to port 8088 for http traffic and port 444 for https traffic. You can change this by clicking on the 

image

button in the Xampp admin console.

Xampp web server

Now change the ports to your own liking. Don't use port 80 however, for it would put your PC wide open to the internet. After setting the ports, save it and restart Apache in the Xampp admin console.

Virtual host

Next step is to create the virtual host that tells Apache how popcorn should be interpreted.

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

Let's assume that your popcorn is in folder \htdocs\popcorn-1.2.3 Now add the following section to the end of the file (modify it to your own project needs)

 ServerAdmin admin@localhost.com
    DocumentRoot "C:/XampServer/htdocs/popcorn-1.2.3"
    ServerName popcorn
    ServerAlias popcorn
    Order allow,deny
        Allow from all 

After saving this file, restart the Xampp server (only the server, not MySQL).

Modifying DNS

Since we are working with a Windows PC, we have to modify the DNS entries in the local hosts file.

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

Possibl you can't access the file and have to modify the attributes to make it editable.

Add the following entry to this file (again modify it to your own needs):

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

After the # is just comment, but it is handy if you have a lot of entries to tell where it can be found on the web server.

Now you're done and can you access: http:\popcorn:8088, on your local web server.

More from same category