How To Set Up VirtualHosts Using Xampp on Mac

One of the more advanced topics of setting up you local development environment on your Mac, especially when using third-party software like Xampp, is to set up Virtual Hosts.

Virtual Hosts allow you to create your own url (within the browser) and point it to your local directory on your hard drive. This means, instead of pointing to http://localhost , you can create a custom url such as myprojecturl.local .

Step 1: Editing our /etc/hosts file

The first thing we’ll need to do is to set up our /etc/hosts file. This is a hidden file that we’ll use to edit our custom url and point it to our local machine.

First we’ll have to open up Terminal (Use Spotlight search and search for Terminal and open it). Then inside Terminal we’ll type in:

sudo nano /etc/hosts

You’ll be asked to type in your password. Just type in your log in password to your computer.
Then you should see something like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0     localhost

Scroll down by pressing the down arrow key all the way to the bottom and add this to a new line:

127.0.0.1 myprojecturl.local

Note: Feel free to edit the name of the url. I like to add .local to the end of my custom urls so that I know I’m viewing my local files.

It should now look like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0     localhost

127.0.0.1 myprojecturl.local

Then press control + x and then type y to save your changes. Then press Enter to write out your changes.

Step 2: Editing Xampp’s httpd.conf file

Now we’ll need go into our XAMPP folder and edit a few things. Open up /Applications/XAMPP/xamppfiles/etc/httpd.conf file in any text editor (I use Sublime Text 2).

Somewhere around line 487, you should see something like this:

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

Just remove the # from the Include line like so:

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

Save the file and close it.

Step 3: Editing Xampp’s httpd-vhosts.conf file

Now that we have included the httpd-vhosts.conf file from the previous step, we’ll go in and edit that file to include our new project url.

Open up /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf file in your text editor.

You should see something like this:

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

You’ll notice that Xampp has provided a structure for a test example Virtual Host. We’ll create our own similar version.

On a new line add this to the end of the file:

<VirtualHost *:80>
    ServerName myprojecturl.local
    DocumentRoot "/Users/alfonsesurigao/Desktop/MySiteFolder"
    <Directory "/Users/alfonsesurigao/Desktop/MySiteFolder">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

You’ll notice that for the Servername I included the name of the url we had typed inside of our /etc/hosts file from Step 1.

The DocumentRoot and Directory values point to a folder directory where I have my local files set up at. Don’t forget to change the path to point to your folder directory.

Step 4: Testing your local site

Now you just have to restart your Apache server in Xampp’s Application Manager and test out your new url in a web browser. Just type in myprojecturl.local (or whatever you named it) into your browser url bar and you should see your site up and running.

Conclusion

Now you know how to set up Virtual Hosts for Xampp. Don’t forget, every time you edit the /etc/hosts file, the httpd.conf file, or the httpd-vhosts.conf file, you need to restart your Apache server for Xampp.

If you have any questions, feel free to comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *