Select Page

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!

Check out more articles

How to Generate a Ranger Config File

ranger --copy-config=all This will copy all the default config files from /usr/local/lib so you can make edits without messing anything up. Huge shout out to https://dquinton.github.io/debian-install/config/ranger.html for explaining this and so much more. Took me a...

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Adjust Trackpad Sensitivity XFCE

xinput set-prop "Elan Touchpad" "Synaptics Finger" 1 1 1 What are the values 1 1 1? This sets the sensitivity as close to the original ChromeOS as possible. Larger numbers will decrease sensitivity of various aspects. I never looked into which individual value...

Fireworks (Short Film)

https://vimeo.com/395077249 About the film Year: 2020 Director/DP: Tim Searfoss Writers: Matt Jones, Tim Searfoss Sound Mix: Matt Jones

Hosting Multiple Sites Using LocalWP

I've done a write-up on hosting local WordPress sites before, but I definitely prefer this method over the previous one. If you've never tried hosting multiple sites using LocalWP, then I'd encourage you to check it out. I've had really bad issues with it in the past,...

Looking for a place to host your next project or design?

Use this link to get your first 4 months of WP Engine for free: WP Engine – Plans (With 4 months free)