When developing websites, it’s useful to see how your site looks as you edit your code. Adobe partly solved this problem with Dreamweaver’s Live Preview feature, though it always doesn’t render pages as intended. This makes it good at giving a rough idea of what your page will look like, but it’s not much use for more than that.

To see exactly what your page will look like, you have to load it yourself in a variety of browsers. For simple HTML sites no special software is needed, but when you want to test PHP or other server-side scripts you need to use a web server. You could simply use some hosting space and upload the files when needed, but there are drawbacks to this. Apart from the time taken to upload your files, people may be able to view your site before you intend. And you might not even have any hosting! This is why it’s useful to install your own webserver on your computer, the most widely-used being XAMPP.

However, there are a couple of problems with the default installation of XAMPP. Using it is simple enough: drop your files into the htdocs folder and access them in your browser at http://localhost/folder/file.php. The problem I’m focusing on this post is how coding links relative to the site root breaks between a testing server and the live web server, due to the different folder structures – linking to /about.php would direct to http://localhost/about.php rather than http://localhost/folder/about.php.

The way to solve this is by setting virtual hosts in Apache. These allow you, for example, to direct http://wordpress/ and http://phpbb/, to different folders. Then you don’t have to change all your links before you upload your site!

I’m going to assume you’ve already installed XAMPP to its default location (Windows C:xampp, Ubuntu /opt/lampp), and have a folder you want to direct to.

—

The first thing to do is edit your hosts file. This is a file which tells programs using your network connection to go to certain IPs when given a domain. On Windows, this file is in C:WindowsSystem32driversetc, on Ubuntu it’s in /etc/.

Open it up in a text editor. If you haven’t been in here before, you should have a line reading

127.0.0.1       localhost

Add to the end of this line the domain you want to use to direct to your site’s folder. For the purposes of this post, I want http://wordpress/ to direct to the folder ‘wordpress.’ This will make http://wordpress direct to the Apache server.

127.0.0.1    localhost    wordpress

Now we need to add rules for the virtual hosts in the Apache server’s configuration files. On Windows, browse to C:xamppapacheconfextra, on Ubuntu to /opt/lampp/etc/extra/. Open httpd-vhosts.conf.

Right at the bottom, below the last ‘##VirtualHost>’, replace everything with the following:

NameVirtualHost *:80

<VirtualHost *:80>
ServerName localhost
DocumentRoot “C:/xampp/htdocs”
</VirtualHost>

<VirtualHost *:80>
ServerName wordpress
DocumentRoot “C:/xampp/htdocs/wordpress”
</VirtualHost>

For Ubuntu change the DocumentRoot variable to something more suitable (like /opt/lampp/htdocs).

And that’s it! I hope that was useful to someone. Restart your browser and the Apache server in XAMPP, and when you type ‘wordpress’ into your browser you should see your site. If you have any questions, just leave them in the comments.

Ta.

Also: Happy New Year!