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
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:
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
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.
/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 firstname.lastname@example.org 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.
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.