How to create virtual hosts on your local 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.

What we like to do

After successful installation you create your websites in the folder<drive><xamp-server-folder>htdocs

Let’s say you have a project named popcorn and you would like to open via://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

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 button in the Xampp admin console.

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: <drive><xamp-server-folder>apacheconfextraand open file: httpd-vhosts.conf

Let’s assume that your popcorn is in folder<drive><xamp-server-folder>htdocspopcorn-1.2.3

Now add the following section to the end of the file (modify it to your own project needs)

1

2

3

4

5

6

7

8

9

10

<VirtualHost*:8088>

ServerAdminadmin@localhost.com

DocumentRoot"C:/XampServer/htdocs/popcorn-1.2.3"

ServerNamepopcorn

ServerAliaspopcorn

<Directory"C:/XampServer/htdocs/popcorn-1.2.3">

Orderallow,deny

Allowfromall

</Directory>

</VirtualHost>

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

Modifying DNS

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

Open the file: <drive><windows-folder>system32driversetchosts. It is possible that you can’t access it and have to modify the attributes of this file to make it writable.

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

127.0.0.1 popcorn #Xampp c:Xampserverhtdocspopcorn-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 your done and can you access: \popcorn:8088, on your local web server.

Related posts:

Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.