Setting up a development server on your local machine is a great way to make sure that stuff works before it goes live, but it’s also especially good when working in a subversion / team environment.
Each member can run a local copy of Apache (using XAMPP, for example) on their box and not have to worry about other people overwriting their business. And if you are working in a subversioned environment, then just do a commit when whatever you’re working on is in a stable state.
But one of the obvious problems with this setup, especially when working on multiple sites at the same time, is that you end up with a lot of subdirectories referencing your local copy of the live server’s web files (like http://localhost/vtida.com/) — and that sucks. And it seems like you’re always going to run into path problems.
Getting something more like the live server seemed to be the way to go: http://vtida.com.localhost/
If the team standardizes the use of relative-to-root path naming (that is, use <a href=”/link.html”> instead of <a href=”http://vtida.com/link.html”>), then you get the convenient situation of being able to interchange files rather seamlessly between the local development server and the live version.
Anyway, the steps!
So, I’m going to assume that you’ve got Apache up and running. It seems like the steps should be more or less the same for more than just Windows machines, just the paths to the various config files would be different.
The example paths I’m going to be using are assuming that you’ve installed XAMPP, using the default install paths.
The first thing you need to do is create a subdirectory in the web root of your Apache server. The default directory is “c:\xampp\htdocs”.
For this example, I’m going to use sub.domain.com (the path would be “c:\xampp\htdocs\sub.domain.com”).
Edit Apache Config
In one of the Apache config files, you’re going to be setting up a “virtual host”.
The config file that you need to track down will probably depend on your setup, but for the default XAMPP installation, this file will be located at “c:\xampp\apache\conf\extra\httpd-vhosts.conf” (although I think that you can pretty much put it in any config file that gets loaded).
Add the following, if it doesn’t exist already.
DocumentRoot C:/xampp/htdocs/
ServerName localhost
ServerAdmin admin@localhost
</VirtualHost>
Then add the following to have “c:\xampp\htdocs\sub.domain.com\” point to http://sub.domain.com.localhost/:
DocumentRoot C:/xampp/htdocs/sub.domain.com/
ServerName sub.domain.com.localhost
ServerAdmin admin@sub.domain.com.localhost
<Directory “C:/xampp/htdocs/sub.domain.com.localhost/”>
Options Indexes FollowSymLinks
AllowOverride FileInfo
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
To learn more about the configuration options for virtual hosts, check out the Apache documentation on the subject.
Edit HOSTS File
Before your computer uses the Internet’s DNS servers to lookup the IP address of a particular domain name, it first checks its own HOSTS file.
Your HOSTS file lets you map custom domain names to a certain IP address. In our case, we’re just going to map the custom subdomain that we setup to our localhost (127.0.0.1).
On a Windows XP machine (and I believe on Windows Vista), you can find your HOSTS file in the “C:\Windows\System32\drivers\etc” directory. Windows 2000, it’s ” c:\winnt\system32\drivers\etc\hosts”. And on Linux, it’s just “/etc/hosts”.
Open it up in a text editor, and add the following lines:
Reboot!
That’s it!
Fire up your browser, and go to http://sub.domain.com.localhost/ and you should be good to go.
