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.