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.localTest 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!