Multiple local websites with XAMPP

Introduction

Setting up multiple local websites with XAMPP where each website has its own domain name is more easy as you may think – it’s basically a 3-step process:

Setting up a local hostname (local domain name) in the system configuration or “hosts” file – registering your local website address in your computer, so that it knows that there is such address at all.
Creating a directory for the website files – creating a space where your website will be physically located. its files have to have a place on your computer.
Adding an entry in the Apache Virtual Hosts file and restarting the Apache web server – linking your local website address together with the directory you created for it. Without this the system on your computer will not know from where to load your website files from when you’ll type its address in the Internet Browser.

However for beginners even this can cause hassle and confusion, hence let’s deep-dive into the process to gain a clear understanding of each step. You can of course skip the sections which are not relevant to you.

A peak back of what is XAMPP…
XAMPP is one of the most popular cross-platform application stacks used in web development which contains everything you need to create a fully functional local environment for developing a website – Apache web server, PHP and MySQL / MariaDB. In this manner – local environment means a working web server on your own PC or laptop which you are supposed to use only for a website development and NOT hosting the website publicly.

Installation of XAMPP is straightforward and easy – you just follow instructions and install it with the default configuration which gives you a working web server, accessible from the local hostname or IP (e.g. localhost, 127.0.0.1) straight away. After installation, you just type http://localhost/ in your browser to see a XAMPP welcome page. But what if you want to develop multiple websites locally on your computer – each with its own unique domain name and directory?

While it is possible to use the default local hostname (localhost) or IP for developing multiple sites – where you place each site in its sub directory (e.g. https://localhost/website-1/, https://localhost/website-2/ https://127.0.0.1/website-3/), it is by far not the right solution on how to develop multiple sites locally. So where to start?

Choosing the local domain for development

This is the very first step where you can go wrong. A rule of thumb – do not use public subdomains for this purpose (e.g. local.myjuicyapplestore.com, dev.myjuicyapplestore.com) because of potential problems regarding the main domain configuration. For example: If a domain myjuicyapplestore.com has a HSTS policy enabled it may not be possible to access the local environment from local.myjuicyapplestore.com subdomain because of the use of a self-signed SSL certificate.

Use a domain with “.local” TLD for locally hosted websites

If you have a website myjuicyapplestore.com, and you want to develop it locally, choose the myjuicyapplestore.local as a domain for its local environment. That way you will avoid any potential conflicts with the configuration – mainly also because domains with the “.local” extension are not available for registration publicly on the Internet as this TLD is reserved by IETF.

Setting up a local hostname or a DNS entry override in the “hosts” file

When you have a domain name (hostname) in mind which you will use for your local website, the next step is to add it in the system configuration, so that it resolves back to your computer. Technically you need to add one or two entries in the “hosts” file.

A “hosts” file is a special file in your operating system which holds information about locally registered hostnames or DNS entry overrides. By default it can be edited only with administrative privileges.

How to edit “hosts” file on Windows

The hosts file is located in the Windows directory on your system drive. To edit it:

Lookup the “Notepad” application in your Windows search bar or the list of installed programs, right click on it, and choose “Run as administrator” (important to run it with administrative privileges)
In the menu bar – click on “File” -> “Open” and paste this in the “File name” field:

%SystemRoot%\System32\drivers\etc\HOSTS

3. Click on the “Open” button, to open the hosts file for editing.

The contents of it will look something like this:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

4. At the end of the file please add the necessary entries to register the hostname / domain name in the system for your local website and save the file. For each entry add an IP address 127.0.0.1 and your local hostname (domain or sub-domain) – both separated by space. Each entry must be placed in a separate line.

e.g. to register a hostname myjuicyapplestore.local, add the following entry in a new line at the end of the file contents:

127.0.0.1 myjuicyapplestore.local

How to edit “hosts” file on Mac / Linux

In order to edit the “hosts” file on Mac or Linux – the quickest way is to use a Terminal with administrative privileges.

Open the Terminal application (in Mac you can do this by opening a Spotlight search field with using the combination of Command and Space keys and typing in the “Terminal“)
Next type in a command: sudo nano /etc/hosts and press “Enter“. Type in the password of your admin user if asked.
Move the pointer to the end of the file and add the necessary entries to register the hostname / domain name in the system for your local website. For each entry add an IP address 127.0.0.1 and your local hostname (domain or sub-domain) – both separated by space. Each entry must be placed in a separate line.
Save the file by using the combination of “Control” and “X” keys, confirm saving with an “Y” key and press “Enter” to close the editor.

e.g. to register a hostname myjuicyapplestore.local, add the following entry in a new line at the end of the file contents:

127.0.0.1 myjuicyapplestore.local

After you’ve registered the hostname / domain name in the “hosts” file – it should start resolving immediately.

Creating a directory for website files

This is one of the most easiest steps. If you are willing to develop multiple websites on your computer, I would recommend to create one base directory for all of them and then place each website in its own sub-directory. Technically its up to you how you want to organize the website directories on your computer, but here is my way how I organize them:

On Windows: I install the XAMPP at its default location (C:\xampp\) and create a separate directory for my web projects

C:\www\

Then I add each project in its own folder with the same name as its public domain name, e.g. for website myjuicyapplestore.com I will have a directory of

C:\www\myjuicyapplestore.com\

On Mac: I install the XAMPP at its default location (/Applications/XAMPP/) and create a sub directory for my web projects

/Applications/XAMPP/www/

Then I add each project in its own folder with the same name as its public domain name, e.g. for website myjuicyapplestore.com I will have a directory of

/Applications/XAMPP/www/myjuicyapplestore.com/

Adding an entry in the Apache Virtual Hosts (vhosts) file

The last and most probably the most complicated step is to link the local website address together with a directory where its files are located in. For this purpose Apache (the main application which drives your web server – a core part of your XAMPP application stack) has a special configuration file – a Virtual Hosts file (or more simply – a “vhosts” file).

A Virtual Hosts file basically allows you to host multiple websites or applications on the same server.

Where the vhosts file is located?

First you must open the XAMPP installation directory. (e.g. default directories are C:\xampp on Windows and /Applications/XAMPP/ on Mac), then depending on the OS you use look for a httpd-vhosts.conf file in the following sub-directories:

For Windows – /xampp/apache/conf/extra/
For Mac – /XAMPP/xamppfiles/etc/extra/

Edit the httpd-vhosts.conf file with any kind of text editor – the file will contain a self explanatory comment with some samples.

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
...

Scroll down to the end of the file. Add the code snippet from one of the templates below to your vhosts file (copy-paste it) and modify it according to your needs.

Sample for the Windows OS:

### HTTP version of myjuicyapplestore.local (http://myjuicyapplestore.local) ###
<VirtualHost myjuicyapplestore.local:80>
    DocumentRoot "C:/www/myjuicyapplestore.com/"
    ServerName myjuicyapplestore.local
    <Directory "C:/www/myjuicyapplestore.com/">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

### HTTPS version of myjuicyapplestore.local (https://myjuicyapplestore.local) ###
<VirtualHost myjuicyapplestore.local:443>
    DocumentRoot "C:/www/myjuicyapplestore.com/"
    ServerName myjuicyapplestore.local
    SSLEngine On
    SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/server.key"
    <Directory "C:/www/myjuicyapplestore.com/">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

Sample for the Mac OS:

### HTTP version of myjuicyapplestore.local (http://myjuicyapplestore.local) ###
<VirtualHost myjuicyapplestore.local:80>
    DocumentRoot "/Applications/XAMPP/www/myjuicyapplestore.com"
    ServerName myjuicyapplestore.local
    <Directory "/Applications/XAMPP/www/myjuicyapplestore.com">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

### HTTPS version of myjuicyapplestore.local (https://myjuicyapplestore.local) ###
<VirtualHost myjuicyapplestore.local:443>
    DocumentRoot "/Applications/XAMPP/www/myjuicyapplestore.com"
    ServerName myjuicyapplestore.local
    SSLEngine On
    SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/server.crt"
    SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.key/server.key"
    <Directory "/Applications/XAMPP/www/myjuicyapplestore.com">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

Note that in each template you see two virtual host entries – one for the insecure “http” version (port 80) and one for the secure/encrypted “https” version (port 443). These two are necessary if you want to access your website from both protocols (e.g. http://myjuicyapplesore.local and https://myjuicyapplestore.local). While it is completely sufficient to add only one entry for the HTTPS version, I still recommend to add both for testing purposes.

Essentially there are only three things you need to modify in the template:

Your local website domain (e.g. myjuicyapplestore.local) – replace it with a domain which you will use;
Your website directory (e.g. C:/www/myjuicyapplestore.com/) – replace it with a directory path where your website is located;
Locations of the SSL Certficate files (for the HTTPS version) – use the default files according to your OS.

When you’ve finished modifying your Apache Virtual Hosts file, save the changes and close it. Restart the Apache Web Server to apply the changes.

Finishing Up

Now you should be able to open your local website by entering its address in the Internet Browser. Repeat the steps in the tutorial if you want to configure multiple local websites.