HOW TO: Add Virtual Hosts to XAMPP on MacOSX
Adding a VirtualHost on Mac OSX can be a bit of a hassle, which comes down to editing 3 separate files. So After some experimenting and trying, I’ve managed to get it to work on my Mac with Mountain Lion. The first thing we need to do, is make sure that XAMPP is configured to work with virtual hosts. We do this by altering the default ‘httpd.conf’ file Apache uses to load the configuration.
Open the ‘Terminal’-app, which we are going to use to edit our files. You can find the ‘httpd.conf’ file in directory ‘/Applications/XAMPP/xamppfiles/etc’ if you installed XAMPP with default settings. To navigate using ‘Terminal’, use the command ‘cd /Applications/XAMPP/xamppfiles/etc’. When you’re in the right directory, use the command ‘sudo vi httpd.conf’ to open the file. Make sure you enter your (the root) password. Now use the arrow-keys to scroll down the document or use ‘?’ to search if you’re familiar with the ‘Vi’ editor. Look for the line “#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf’ or something along those lines. Press ‘i’ (insert) or ‘a’ (append) to edit the line and remove the ‘#’ from the line. (You can also select it and press ‘x’ to delete the current character.) Once you’re done editing this line, we can save this file by pressing ‘Esc’ and typing ‘:wq!’.
Now we can go and add Virtual Hosts in the file we’ve used included in the Apache configuration file. We do this by using ‘Terminal’ to navigate to ‘/Applications/XAMPP/etc/extra’. (The right command for the ‘Terminal’ would be: ‘cd /Applications/XAMPP/etc/extra’.) Now use the command ‘sudo vi httpd-vhosts.conf’ to start editing the file we use for creating Virtual Hosts. Another prompt might ask you for the root-password, depending on how fast you managed to edit the earlier file.
Once ‘Vi’ has opened the file, we need to make sure XAMPP is configured to use multiple hosts instead of just localhost. Below the line with ‘Use name-based virtual hosting’, you’ll find the line beginning with ‘NameVirtualHost’. Depending on the default configuration of your XAMPP version, you might need to change this line to ‘NameVirtualHost *:80′. This way XAMPP will be able to differentiate between several hostnames. The next step is defining the localhost so we still will be able to use this. Scroll down to the bottom of the document using the arrow-keys and add the following paragraph by pressing ‘a’.
This paragraph makes sure your localhost will still work, while enabling other Virtual Hosts. The next thing to do, is add your own new Virtual Host. Make sure you replace the path and other values to match your website in the example below!
Options FollowSymLinks Indexes MultiViews
Allow from all
Once you’ve added your new Virtual Host, make sure you save your file by pressing ‘Esc’ and typing ‘:wq!’ again. Be sure you’ve copied it in full, because all the keywords are case-sensitive. The last file we need to edit, is the ‘hosts’ file, which we can find in ‘/etc’. So use the command ‘cd /etc’ to navigate to the proper directory and use ‘sudo vi hosts’ to edit the file. Be very careful with editing this file! Scroll down to the end of the file using your arrow-keys. Now press ‘a’ to append your new Virtual Host like ’127.0.0.1 examplewebsite.local’. We use the ‘.local’ keyword in our Virtual Host to make clear we’re talking about a local (test) website. Once you’ve added the line at the end of your ‘hosts’ file, save your file by pressing ‘Esc’ and typing ‘:wq!’ again.
Now use the ‘XAMPP Control’ to restart ‘Apache’ and you’re done! Your new Virtual Host should be reachable in the browser by entering the name of your Virtual Host as a domain. So ‘http://examplewebsite.local’ should lead us to our newly created domain. Make sure you’ve got some *.html or *.php file in your folder so you can properly test your new host.