Setting up the Perfect Web Development Environment, Part 2

Posted on by Chris

In Part 1 of this guide, we covered how to set up a portable development environment with the basic set of software tools (a web stack, an IDE and a good text editor). Continuing on, we’ll create a project and make it portable. The instructions given are specific to Netbeans because that’s what we set up in Part 1, but can be easily adapted to your IDE of choice. Once again, you’ll need to follow the first part of this guide on both desktop and laptop.

I like to set up my projects to mirror their eventual production environment as closely as possible, so rather than keep everything in folders under http://localhost, I set up a virtual host for each project. Assuming the site is going to be published to mysite.com, I set up my development site as mysite.local – this sidesteps the fact that some software (Magento, for example) throws a wobbly unless it finds at least one dot in its base URL.

Setting up a virtual host is easy enough – in Part 1, we configured Apache to allow name-based virtual hosts by including the vhosts configuration file, so let’s open that up and create our new virtual host. The file we’re looking for is httpd-vhosts.conf, located in %ProgramFiles%\Zend\Apache2\conf\extra – Apache provides a dummy vhost container for reference, so it’s literally a matter of duplicating that and replacing dummy-host-example.com with our desired domain, in this case, mysite.local:

<VirtualHost *:80>
 ServerAdmin webmaster@mysite.local
 DocumentRoot "C:\Users\Public\htdocs/mysite"
 ServerName mysite.local
 ServerAlias www.mysite.local
 ErrorLog "logs/mysite.local-error.log"
 CustomLog "logs/mysite.local-access.log" common
 </VirtualHost>

You’ll need to create the directory “mysite” in wherever you moved your htdocs directory to in Part 1. At this point it’s worth saving a copy of this file in your Dropbox so you can copy it to your other machine.

Save and close the file and restart Apache, and you’re all set to serve your site out of that folder. Of course, that’s not much use to you yet, because your machine doesn’t know where to resolve mysite.local to. The next step is to edit c:\windows\system32\drivers\etc\hosts, which should look something like this if you’re running Windows 7:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
 
# localhost name resolution is handled within DNS itself.
#    127.0.0.1       localhost
#    ::1             localhost

Simply add a line at the end of the file, like so:

127.0.0.1    mysite.local

Once again, it makes sense to save a copy in your Dropbox rather than repeating yourself on your other machine. Save and close the file, and when you open mysite.local in your browser you should be served a directory index listing.

Setting up the project in Netbeans

Setting up a new project is easy in Netbeans – just click the New Project icon, fill in some details and away we go. Netbeans stores its metadata in your project folder, and later on when we start to use version control, SVN will store more metadata in there. This isn’t ideal, so let’s set up our project in a way that will give us a clean copy at all times (by a “clean copy”, I mean a copy of the project with no additional metadata, containing only the files you’d push to production).

Hit the Create Project button and select PHP Application. Create a folder for the project in the Projects folder you created in your Dropbox folder in Part 1. In Run Configuration, select Local Web Site (running on local web server), and your Project URL will be mysite.local. Finally, tick the “Copy files from Sources Folder to another location” box, and enter C:\Users\Public\htdocs\mysite as the folder to copy to.

Make some changes, save your project. Dropbox will sync your files automatically. Copy your edited httpd-vhosts.conf and hosts files to your other machine and open up Netbeans. Your new project will be available in the Open Project dialogue with all your changes, and will also be pushed to localhost on that machine.

That pretty much wraps up this instalment, but stay tuned for Part 3 where we’ll talk about some more advanced tools.

This entry was posted in code and tagged , , , , . Bookmark the permalink.

2 Responses to Setting up the Perfect Web Development Environment, Part 2

  1. One thing to note about the vhosts is that you may get a slow lookup if you have the same IP on multiple lines, as this can confuse the DNS. The very first time I setup a vhost there was a pause of around 5 reconds while the entry was being looked up by the internal DNS. So instead of

    127.0.0.1  localhost
    127.0.0.1  theinterweb
    127.0.0.1  website.local

    have:

    127.0.0.1  localhost theinterweb website.local

    Basically, keep one IP, per line and don’t repeat 🙂

  2. That’s a damn good point, Rob. The documentation refers to all entries for a single host being specified on a single line, including all aliases – which, as far as name-based virtual hosts are concerned, is the same thing.

    I’d definitely advise using a single line in production, but I’m thinking the multi-line configuration is a touch more readable in dev. Suppose it’s a matter of preference.

Leave a Reply

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