WordPress / Web Development Tutorials
(Best WordPress Tutorials)

Silva Web Designs - Blog

How to Configure VirtualHosts in XAMPP on a Mac

We used to be a massive fan of AMPPS but since upgrading to macOS Catalina, it wasn’t possible to use this application anymore. I’m sure they will update it again in future but the issue is that it’s a 32 bit application, it’s no longer compatible on the latest OS. So that’s when we made the switch to XAMPP. It’s not as straight forward to use as AMPPS, but it’s probably one of the better applications for localhost development.

Installing was a breeze, but things became a bit more complicated when setting up Apache VirtualHosts. So here are a few steps we took to get everything running as we wanted it. So firsts things first…

What is VirtualHosts?

Okay, so we’re going to explain what we wanted to change in order to get out localhost set up exactly how we wanted it…

VirtualHosts allow Apache to map a hostname to a directory on the filesystem. You can set up as many VirtualHosts as you need so that each website operates under its own hostname. For example, you might want to map yoursite.silva to /Users/myusername/yoursite. To test your development site all you would need to do is visit “http://yoursite.silva” into your browser’s address bar. By default, it would be set up as http://localhost/yoursite.

So how do we make this change?

How to Enable VirtualHosts

Firstly, you’ll need to open the following file; /Applications/XAMPP/xamppfiles/etc/httpd.conf in your preferred text editor. An easy way to get here is by going to ‘Finder’ –> ‘Go’ –> ‘Go to Folder’ and then simply pasting in the location.

Now that you have the file open, you will need to look for these lines;

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Now, uncomment the second line by removing the hash (#) so that Apache will load your customised VirtualHosts files as follows:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Let’s create your VirtualHosts

Lets now open the following file; /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost like so:

# localhost
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
    <Directory "/Applications/XAMPP/xamppfiles/htdocs">
        Options Indexes FollowSymLinks Includes execCGI
        AllowOverride All
        Require all granted

What this does is allows http://localhost to point at XAMMP’s htdocs directory once we have created our VirtualHosts.

With this done, we can now create our own VirtualHosts. So, after the default localhost, we can now add:

# My Custom Host for 'yoursite.silva'
<VirtualHost *:80>
    ServerName yoursite.silva
    DocumentRoot "/applications/XAMPP/xamppfiles/htdocs/yoursite.silva"
    <Directory "/applications/XAMPP/xamppfiles/htdocs/yoursite.silva">
        Options Indexes FollowSymLinks Includes execCGI
        AllowOverride All
        Require all granted

With the example above, you should replace yoursite.silva with your own hostname, this can be pretty much anything you like. The exception is using a hostname that will not conflict with a real domain name, like yoursite.dev. We used to use yoursite.dev but since it became owned by Google we can no longer use this along with quite a few others.

Now we have another step to do to get this working fully…

Edit your hosts file

Now we need to go to the following location; /etc/hosts, we will be editing the hosts file so it knows how to handle the new server name. The hosts file is used by OS C to map hostnames to IP addresses. In our case, since we are going to be using localhosts, we want to map the server name to the IP address (this is your localhost IP).

Pro Tip: You can actually map any website to any IP address. We tend to do this for website migrations, let’s say we moved silvawebdesigns.com to a new IP address, we could simply add silvawebdesigns.com (add www. if your website contact this in the web address). The advantage of this is that we can test the website on the new server before updating the Nameservers or DNS, this way we can be 100% the site will work perfectly before the migration.

So now that we’ve mapped the server name to your localhost, the next step is…

Restart Apache

When updating any of these files, for the changes to take effect, we need to restart Apache. This can be done through the XAMPP Control found here: /Applications/XAMPP/XAMPP Control.app

Now, let’s point your browser to http://yoursite.silva (or whichever server name you chose) and you should see your website.

If it’s all working now, then happy days! But should you have a problem like a 403 error, then see below:

Oh no, I have a 403 error!

Since Apache runs as a ‘nobody’ user by default, it may not have the permissions required to browse your OS X user directory or it’s sub-directories. In this case scenario, you’ll receive a 403 ‘access forbidden’ error when attempting to view your site within your localhost. In other cases, you may see that you can view the site but you get a few PHP errors when attempting to write files or create directories within your filesystem.

So, in order to fix this, you can configure Apache to run as your OS X user. To do this, open the following file; /Applications/XAMPP/xamppfiles/etc/httpd.conf and look for the following lines:

# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
User daemon
Group daemon

Now, change User to your OS X username, and save the file:

User yourusername

Restart Apache again and you should now be able to navigate your site without any issues, including manipulating files and folders using PHP.

Should you have any further problems, then try setting your user read and write privileges on the following file; /Applications/XAMPP/xamppfiles/htdocs/xampp/lang.tmp

To conclude

Hopefully, now you should have your custom domain setup via localhosts on OS X. Like we have already mentioned, it’s not simple to add custom domains as it was with AMPPS, but once you’ve completed the initial setup, all you have to do is update your /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf file with your new domain by copying and amending one you added previous, then add yournewdomain.silva to your /etc/hosts files and you’re are all set!

If you need any assistance or fall into any issues in setting this up, drop us a comment below and we’d love to help you with this!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion