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
/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
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 </Directory> </VirtualHost>
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 </Directory> </VirtualHost>
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 127.0.0.1 (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
18.104.22.168 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…
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:
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
User to your OS X username, and save the file:
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;
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
127.0.0.1 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!