How to Work Locally

tom Tom, 13th June 2013

To develop locally there are a number of steps you need to take to get setup. I'm working on a Windows 7 PC.

1. Download Wamp or Xampp

Whichever takes your fancy. Personally I work with Wamp, but I've heard good things about Xampp too.

2. Download all the files for your website to your document root.

Personally I create each project under it's own document root as such:

c:\wamp\www\clientname\public_html

3. Create the Virtual Host in Apache.

In my version of Apache I just edit the file:

c:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf

Sometimes Virtual Host definitions can be made in the main httpd.conf file, so if the file above (or anything similar) doesn't exist, try looking in:

c:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf

The virtual host code doesn't have to be complicated, for example:

<VirtualHost *:80> ServerAdmin me@email.com DocumentRoot "c:/wamp/www/clientname/public_html" ServerName clientname.localhost ServerAlias www.clientname.localhost ErrorLog "logs/clientname.localhost-error.log" CustomLog "logs/clientname.localhost-access.log" common </VirtualHost>

This virtual host is telling Apache that the files for your website are in c:\wamp\www\clientname\public_html and that it should be able to be accessed via the browser by visiting http://clientname.localhost.

4. Edit your computers hosts file to tell it where to look for your website.

In order for your computer to know where to route requests for clientname.localhost to, you need to edit your computers hosts file. In my version of Windows 7 my hosts file lives in:

C:\Windows\System32\drivers\etc\hosts

The etc folder is actually hidden, so doesn't appear by default, so you may need to type it in manually in order to see it.

Depending on your version of Windows you might be told you don't have permission to save changes to the hosts file. To get around this you need to open up your text editor as an Administrator. Why Windows makes you do this is beyond me, but if you right click the icon for your text editor you might see the option to 'Run as administrator'. Doing this will allow your text editor permission to save your changes.

Anyway, in there you should find a file called 'hosts'. Edit this file and add the line:

127.0.0.1 clientname.localhost

This tells your computer to look at the localhost IP 127.0.0.1 when the url http://clientname.localhost is entered.

And hey-presto your website should be accessible on your local webserver. This makes developing so much quicker and is really vital for anything but the smallest of changes. It's also handy as you have a working copy of your live website on your local machine.

More from our blog

18a win Netty 2024 award for Activibees.com

18a win Netty 2024 award for Activibees.com

29.02.24

We are delighted to announce that 18a has been recognised for its outstanding work in the "Web Design Agency of the Year - UK" category at… Read →

Generating an Effective Content Security Policy with your Laravel React App

Generating an Effective Content Security Policy with your Laravel React App

27.02.24

I recently had an interesting problem to solve. I'd built a brand new author website on a shiny installation of Laravel 10, utilising its out-of-the-box… Read →

If your WordPress website looks broken, it could be because of this.

If your WordPress website looks broken, it could be because of this.

15.02.24

WordPress is the incredibly popular blogging-come-full-website platform that powers over 835 million websites* in 2024. It's functionality is extended by plugins, and one such very… Read →