Green Acorn

Blog

Set up virtual hosts with XAMPP

Today I am going to show you how to set up Virtual Hosts using XAMPP on a Mac. Using Virtual hosts is a great tool for any website designer during the development stages. The first stage is to edit your hosts file which is stored in the “etc” directory. Quickest and easiest way to do this is by using the terminal. I personally use iTerm – but the default terminal will do the same job.

Type in the following:

cd /etc
nano hosts

This will open a text editor within the terminal window. You should see some default content like “127.0.0.1 localhost”. If you do your in the right place. At the bottom of the file paste in the following replacing our domain with your domain name.

127.0.0.1       loc.greenacorn-webdesign.co.uk

Once you have entered your details press control & x or ^X on your keyboard. You will then be asked to save – press Y for yes. In the case your don’t have permissions to save the file you will need to change these by using the super user command. Enter the following in the terminal:

sudo chmod 777 hosts

You will be asked to enter a password – this is the same as your OSX password. Now try editing your hosts file again, you should be able to save.

Editing the XAMPP files

The next stage is to edit the httpd.conf file. This is located in /Applications/XAMPP/etc/. Open up the file via the terminal or by another text editor and remove the hash on the following Include:

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

Should now be:

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

The next file to edit is /Applications/XAMPP/etc/extra/httpd-vhosts.conf. Again you can edit this file via the terminal or by another text editor such as Text Mate. At the bottom of the file paste in the following replacing our domain with your chosen domain name.

<VirtualHost *:80>
    ServerName loc.greenacorn-webdesign.co.uk
    ServerAlias loc.greenacorn-webdesign.co.uk
    ServerAdmin webmaster@localhost
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/greenacorn-webdesign.co.uk"
</VirtualHost>

Note: the DocumentRoot must specify the correct path to your website folder. In the example mine is called “greenacorn-webdesign.co.uk” and is stored in the XAMPP htdocs. Restart Apache and navigate to loc.yourdomainname.co.uk and you should see your website under your local domain alias. Hope you found this web development tutorial useful.

Author:
Posted in: Web Development

Leave a Reply

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

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>