How to Host Multiple Local Sites Using XAMPP and VirtualHosts

As a web developer, it’s always a good idea to have a good working local environment for testing. Let’s dive into how to host multiple local sites using XAMPP and VirtualHosts.

XAMPP Install

You can download and instlal XAMPP over at https://www.apachefriends.org/download.html. XAMPP includes Apache and all the necessary setup to get your environment off the ground.

Using Virtual Hosts to Set Up Multiple Installs

If you’re only hosting one local site at a time, just doing a simple file protocol should be just fine to do your development. But once you have a need to work on more than one site at a time (locally), then you’ll need to set up a virtual host to separate your site installs.

Why Virtualhosts?

This is born out of the fact that your Apache install can only host a single directory (usually like /srv/www/, /var/www/, or with XAMPP, it’s typically something like /opt/lampp/htdocs/). Because of this, your site install is going to be localhost/wordpress/ in the browser.

This starts to become a problem when you install a new site at /opt/lampp/htdocs/newsite/ and wordpress has to be at the root of its hosted folder. The minute you try to make subfolders, it messes with all your links and suddenly you start getting repeated parts of your links and they end up breaking the site.

The solution? Virtualhosts. Basically special domains that are specifically defined to work on your local machine, to help you manage all your locally hosted sites.

Associate Local IP Address with Apache-Hosted Subfolders

Hop into a terminal and open the file /opt/lampp/etc/extra/httpd-vhosts.conf.

Inside that file, around line 23, you’ll see some commented-out examples of how to set up Virtualhosts. Following that example, type out your own Virtualhosts configuration below the example:

<VirtualHost 127.0.0.[0-99]:80> 
    DocumentRoot "/opt/lampp/htdocs/somesite"
    DirectoryIndex index.php

    <Directory "/opt/lampp/htdocs/somesite">
      Options All
      AllowOverride All
      Require all granted
    </Directory>
</VirtualHost>

Define Site Directory

Next, around line 217 of /opt/lampp/etc/httpd.conf you’ll need to define your site directory

<Directory /opt/lamp/htdocs/somesite>
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Define Local Domain Name

This is the fun part! Make up whatever name you want (preferably something memorable that also makes sense) and assign it to the same IP address you defined earlier in httpd-vhosts.conf

So inside your /etc/hosts file, define your local domain like so:

127.0.0.1       localhost
127.0.0.2       somesite.local

Test It Out

If all went well, you should be able to open your browser, and somesite.local will point to the IP address you defined in /etc/hosts, and that IP would be configured to use a Virtualhost by /opt/lampp/etc/extra/httpd-vhosts.conf and that Virtualhost would be pointing to a local directory defined by /opt/lampp/etc/httpd.conf that contains your website files!