Create virtual domains for Apache/XAMPP

The development of a website usually goes the following way: First, we test our website on the local computer, where we use XAMPP, for example. After this, the site will be uploaded to our server, and will then be available at an address like example.com. Before that, however, during testing, we are using an address like http://localhost/seiten/xyz in the browser.

Link structure on server and local computer

From this fact, however, some problems arise: The link structure on the server and the local machine is different, the links only work if they are set relatively. Indeed, if we use a link in which our later domain occurs, it will not work on our local machine.

This problem can occur in many places, because it is not always possible to use relative links. For example, take the case that we have outsourced images and script files to another server. Here we would have to specify the direct domain, to test this is more than unfortunate.

Virtual domains

Fortunately, there is a solution for this issue: Virtual domains, sometimes also called virtual hosts. Virtual hosts allow us to make domains available on our local computer, so that every time, we are calling one of these defined domains, we end up in a directory of our local machine.

By the way, the same thing applies equally to http://localhost. Also localhost has been defined in this way, so that we end up in the directory you know.

Define virtual domains

Besides the already defined localhost, for our example, we want also define the domain example.com and the subdomain s.example.com. For this we need to make changes in three files.

C:\WINDOWS\system32\drivers\etc\hosts

First, we need to adjust the host file in Windows. This file is called host (without extension) and we find it in the folder C:\WINDOWS\system32\drivers\etc of the Windows installation. This file contains all assignments of IP addresses to host names. The IP address 127.0.0.1 is equivalent to our own computer.

127.0.0.1     localhost
127.0.0.1     example.com www.example.com
127.0.0.1     s.example.com

In the first line, we can already find our localhost. We keep this line and we write the domains, we want to define, under this line. In the example, these are example.com, www.example.com and the subdomain s.example.com.

C:\xampp\apache\conf\http.conf

Next, we have to adjust to files of our XAMPP configuration. We can find the file http.conf in the directory, in which XAMPP is installed under apache\conf\.

This file is the Apache server configuration. First, we should check if the file already contains the following line:

NameVirtualHost 127.0.0.1

If this line is not in the http.conf file or it is commented out, we simply write it down to the file or remove the uncommenting.

After that, we are looking for the following line:

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

Also the line containing "Include" may also be commented out or is missing completely. If this is the case, we modify the line as it is written above or we add the line to the file.

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

Finally, we need to adjust the file httpd-vhosts.conf, which can be found in our XAMPP installation under \apache\conf\extra, which is one directory under our previous file.

In this file, we will find our virtual hosts. Among others, also localhost should be already listed. Just as well as localhost is listed here, we can add our additional domains and specify the appropriate directory for the domain:

<VirtualHost www.example.com>
  ServerAdmin webmaster@localhost
  DocumentRoot "c:/xampp/htdocs/pages/xyz"
  ServerName example.com
  ServerAlias example.com
</VirtualHost>
 
<VirtualHost s.example.com>
  ServerAdmin webmaster@localhost
  DocumentRoot "c:/xampp/htdocs/pages/xyzs"
  ServerName s.example.com
  ServerAlias s.example.com
</VirtualHost>

In the example, we can see that for the domain www.example.com and the subdomain s.example.com, which should point to the directories specified under DocumentRoot. Here you can simply enter the domains and directories, which you want to create.

Restart XAMPP

To make the changes take effect, we need to restart XAMPP. Therefore, we start the XAMPP Control Panel, which we can find, for example, in the Start menu or as a desktop shortcut. In the control panel, we can find the entry "Apache" "Running", where we once click on "Stop" and then again on "Start".

After the server is restarted, our created domains should be available.

HTTPS URLs

The steps described here allow you to call the defined URLs via the HTTP protocol, for example, via http://www.example.com. If we also want to visit our domain over HTTPS/SSL locally, for example via a URL like https://www.example.com, further steps are required. Which those steps are, you'll find in my tutorial about setting up SSL/HTTPS for local projects. There I also explain how you can create your own SSL certificate for your XAMPP server configuration.

Problems

I would like to point out a problem with this solution at the end of the tutorial: This solution is best suited for machines that are used for testing purposes only and from which the created domains do not need to be called from the Internet.

Because, every time, we are calling one of our created domains, we are automatically redirected to our local version of the website, we cannot call the version on the Internet any longer. To get to the Internet version, you have to comment out the host entry in the host file and you have to restart the browser:

#127.0.0.1   example.com

This solution is obviously cumbersome and so far, I do not know any better possibility to solve this issue. If anyone know anything, please post a comment.