Setting up Virtual Hosts for XAMPP on Mac OS X (El Capitan)

Category: Misc
Setting up Virtual Hosts for XAMPP on Mac OS X (El Capitan)

I’ve been planing to write this article for a long time already, and finally I’m doing it. If you came across this article I’m sure that you are aware of what virtual hosts are, you are using XAMPP on a Mac and you are willing to get started. Let’s do it!

What are Virtual Hosts?

In short, VirtualHosts allow Apache to map a hostname to a directory on the filesystem. You can set up as many VirtualHosts as you need. For example, if you have Magento 2 installed on XAMPP with the following address: /Applications/XAMPP/htdocs/mageto you might want to map it by magento.local or any address you want.

In this particular case I have Lumen 5.2.4 installed in /Applications/XAMPP/htdocs/webservice and I want to have address webservice.local. As far as Lumen runs from public directory I don’t want my address to be http://webservice.local/public so I’ll include public folder in the route I mentioned above and it will be like this: /Applications/XAMPP/htdocs/webservice/public.

In order to set up virtual hosts for XAMPP on a Mac, you need to edit three files:

  1. /Applications/XAMPP/xamppfiles/etc/httpd.conf
  2. /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf
  3. /etc/hosts

httpd.conf

In this file we will uncomment line - Include etc/extra/httpd-vhosts.conf. By uncommenting this line we are telling Apache to load our custom VirtualHosts configuration file. To find the above mentioned line just simply search for “Virtual hosts” and remove hash sign (#) from Include line:

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

httpd-vhosts.conf

Now let’s move on to httpd-vhosts.conf file. This file contains virtual host configurations. When you open up the file you will find some example VirtualHosts, which you should comment out or delete.

With the following code you’ll add “localhost” address as the default named VirtualHost. It’s required to ensure that http://localhost still points at XAMPP’s htdocs directory once you’ve created your custom VirtualHosts:

# 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>

Now let’s create your custom VirtualHost address and point it to the directory you would like to access. In my case it’s a folder where I have installed Lumen. After the default localhost that you just created, add:

# My WebService host
<VirtualHost *:80>
    ServerName webservice.local
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/api/public"
    <Directory "/Applications/XAMPP/xamppfiles/htdocs/api/public ">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
    ErrorLog "logs/webservice.local-error_log"
</VirtualHost>

So, what we did is between the VirtualHost tags we told Apache to take server name – webservice.local, meaning that when you type into your browser http://webservice.local it will direct the request to directory /Applications/XAMPP/xamppfiles/htdocs/api/public. It’s that simple.

Now we have to edit hosts file so OS X knows how to handle your new ServerName. The hosts file is used by OS X to map hostnames to IP addresses. In this case you want to map your new ServerName to the IP address 127.0.0.1, which is your localhost.

hosts file

To edit your hosts file you can show hidden files and folders, navigate to directory where it’s located. But much simpler is to do it using Terminal. So, fire it up and type in the following:

sudo nano /etc/hosts

When prompted enter your password and your hosts file will be opened in nano text editor. This is how your hosts file will look like:

hosts file will be opened in nano text editor

Using arrow keys navigate to the end of the file add the following by setting your address. In my case it’s webservice.local

# XAMPP VirtualHost mappings
127.0.0.1 webservice.local

In order to apply changes to hosts file and close it you need to use control+o, and press return key. Close the file using control+x.

Now you have set up your Virtual Hosts and you need to restart Apache to apply all the changes but hold on! If you will try accessing http://webservice.local you will face 403 Error. It turns out that Apache runs as ‘nobody’ by default and it doesn’t have permission to browse your OS X user directory or some of its subdirectories. You need to let it run as your OS X user.

403 Error

Once again open /Applications/XAMPP/xamppfiles/etc/httpd.conf and look for:

# 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

Change User to your OS X username, and save the file. In my case it’s User mrGott.

Restart Apache and you should now be able to access your site without any issues.

Conclusion

This is it. Hope you find it helpful. It’s very simple and now you should be able do your development more easily and with more comfort. This is a part of my series on Create Your First RESTful Web Service for Joomla! 3 With Lumen. And later it will be handy for the upcoming series on Magento 2 Theme Development series, where I’ll cover the full development process of Magento 2 custom theme. Cheers!