Creating A Great Dev Environment

CFEclipse

So what's the best setup for doing ColdFusion development?  How can you be most efficient?  That question will have many different answers for different people, but I think the way I'm currently doing things will work for a lot of people.  And best of all, every piece of software mentioned below is available for download free of charge.

In the past, I always used an external web server for testing my code since I didn't want to slow down my local machine.  To make it easier for developers, ColdFusion has included an integrated web server since version 6.0 can be used for local development.  This web server is installed by default with the ColdFusion Developer Edition, and is a fully-functional, single-IP version of ColdFusion Enterprise.  The webroot for this testing server is at cfmxroot/wwwroot (more on this later).

CFEclipse is the new kid on the block when it comes to code editors.  This project, based upon the open-source Eclipse platform, was originally begun by Rob Rohan and continues to pick up steam amongst ColdFusion developers.  It's really easy to add plugins to eclipse, and one of the critical ones you'll need is the Subclipse plugin for working with Subversion repositories.  This will allow you to handle all of your source control tasks from right within Eclipse.  For those not yet using source control, stop everything and don't write another line of code until you get Subversion setup. For a detailed rundown on how to get started, check out this blog post.

OK, so let's go over the steps to get started:

  1. Download and install Eclipse SDK. Note that there is no install program, you just want to unzip the directory right into your Program Files directory or wherever you'd like it.
  2. Next, you'll need to add the CFEclipse plugin. You can download the latest beta and unzip everything in the plugins directory to the matching plugins directory under Eclipse.
  3. The third critical piece you'll need is the Subclipse plugin, which gets installed from within Eclipse. You can view detailed installation instructions here.
  4. The last piece of the puzzle is to grab the RDS ententions for Eclipse which were made available by Adobe. You'll need to unzip the files into their corresponsing directories under Eclipse, and then restart the program. We'll explain below how to make these features visible within your workspace.

One other Eclipse plugin you may find useful is the Eclipse Web Tools Platform Project which includes editors for HTML, Javascript, CSS, JSP, SQL, XML, DTD, XSD, WSDL, and more. The download link is to the right, but take notice of the different packages available. I usually choose just the Web Standard Tools (WST).

So now we've got the essentials installed. The next piece of the puzzle is your web browser. I think it's safe to say that Firefox is the leading browser for web developers are using. Would you believe it was 5 years ago this week that Microsoft released IE6.0? Yup, August 27, 2001. In Internet time, that's a heck of a long time ago! And not only did Microsoft choose to ignore many of the emerging standard at the time, but they have yet to catch up over 5 years later. OK, that's enough of my IE diatribe for now, but suffice it to say that you will be much happier using Firefox. There is a wealth of plugins available that will make your development life easier. So if you haven't done it yet, go and Get Firefox. Even if you're in a fixed environment and your users are forced to use IE, you're still much better off doing your development in Firefox which is much more standard compliant, and will not need any hacks to get your pages to display correctly. Not to mention that many of those hacks may break stuff once Microsoft FINALLY releases IE7.

Now that you're sold on the virtues of Firefox, let's look at some of the essential (and otherwise useful) plugins available. First, the must haves:

  • The Web Developer Toolbar allows you to do all kinds of cool stuff like disabling CSS or other browser features on the fly, as well as resizing the browser to test various resolutions.
  • For FireBug plugin is essential for debugging Javascript and AJAX calls. For AJAX development, make sure that 'Show XMLHttpRequests' is checked under the options.
  • Next up is the IE Tab extention, which allows you to switch the rendering engine on the fly if you'd like to see how your pages will appear in IE.
  • The View Source Chart plugin allows you to get a color-coded view of the DOM structure of a page.
  • The Aardvark Firefox extension allows you to get an X-Ray of a page's structure as you mouse over the various elements.

And now for some non-essentials. These are all pretty useful, but are not really necessary for our dev environment:

OK, so now we've got all of our software installed. The next thing to do is configure your workspace within CFEclipse. Go to Window.. Open Perspective.. Other.. and double-click on SVN Repository Exploring. Do the same and add the CFEclipse perspective. Now we'll add the RDS views. Go to Window.. Show View.. Other... and you'll see a ColdFusion section. Click on RDS Fileview. Then do the same for RDS Dataview. This will probably add the panels to the bottom but keep in mind you can drag them anywhere around the screen to whichever panel you'd like. You can edit the RDS servers available under Window.. Preferences.. RDS Configuration.

Switch to the SVN Repository Exploring view by changing the perspective in the upper right corner of CFEclipse. Right click on the left side and add a new repository location. We'll make the assumption that you've already got your code imported into your repository's trunk directory, otherwise see the related posts at the bottom of this article. Expand till you see the trunk directory, right-click on it, and select Checkout...

Select the second option to checkout as a project in the workspace and don't use spaces in the name since this will become part of the local URL you'll access. Select Next, uncheck the 'Use default workspace location' option and browse to the cfmxroot/wwwroot directory and click Finish. You can now switch back to the CFEclipse perspective and you'll have a checked out copy of your site available in the Navigator pane. CFEclipse might immediately show this working copy as being out of sync. That is because a .project file is added to all projects by default. You can fix this and not include the .project files in your repository by going to Window.. Preferences... Expand the Team option and click Ignored Resources, then add a pattern for .project. Your copy should now sync back up.

Assuming ColdFusion is powered up and serving requests, your site should now be available at http://127.0.0.1:8500/projectname. You can use Firefox or even the browser located within Eclipse (if it's not there, go to Window.. Show View.. Other.. and you'll find the browser view under CFML. If you're using the internal browser, you'll want to right-click on your Project and select Properties. Under CFEclipse Properties, update the project URL to the 127.0.0.1 address listed above. That will make your project the homepage of the internal browser.

With this configuration, you'll be editing and running all of the code right on your local machine, so you won't be slowed down by network delays and such. To send your modifications back to the repository, just right-click in the navigator pane and you can select Team.. Commit....

If you still need your code to be accessible on another development server, you can checkout a copy of the code right to the webserver. You can do the same for your production server, just make sure that any .svn directories are blocked through your web server. You can also read the RedBalloon Labs post on Website Releases via Subversion.

Christopher over at the ColdFusionUsers.com blog has posted some details on getting your code to transfer automatically between servers via Subversion. You can read more about that over at his blog.

As for databases, I personally am a fan of mySQL and use that on my development and production sites, but nowadays there's a lot of great databases made available free of charge. For more info, check out this post on ColdFusionUsers.com which discusses some of your options.

Hope that helped!!!

Related Blog Entries

TweetBacks
Comments
Brian Panulla's Gravatar Great toolkit Joe! I've been using this setup for just about two years now. We'd previously used ColdFusion Studio/CVS/TortoiseCVS in almost the exact same system for another two years previous, so I can definitely say these tools make for a very robust environment.

An excellent thing about Eclipse is that it removes platform as an issue. I've been developing on a Mac now for the past year with no reduction in productivity, and an increase in productivity in areas like project management and open source development.

I've also completely ditched IIS for Apache, even on Windows, due to it's limit of one virtual Web site on XP Pro. Apache lets you set up a virtual dev site for each project using local host aliases. Add in Trac for issue tracking, collaboration and wiki-style documentation and you've got my setup.
# Posted By Brian Panulla | 8/31/06 2:02 PM
Joshua Curtiss's Gravatar Hey Joe, great article there. Did not know about FireFTP. Awesome.

Do you do much deployment to servers that are accessible by FTP only? I'm trying to figure out how to deploy (via Subversion) to a server accessible only by FTP. An export will work but is clunky if you're upgrading your site to a newer release.

Josh
# Posted By Joshua Curtiss | 9/5/06 12:45 AM
Joe Danziger's Gravatar Josh - I'm actually in the process of moving all of my sites over to HostMySite.com. They offer SSH access on the linux accounts, so what you could do is export your files right to the server from your repository. My repositories are on my local network, so rather than dealing with opening the firewall plus the trouble of the ssh session, I usually just end up FTPing over new files when I commit them to the repository. That setup seems to be working out pretty well.. You could probably even use the hooks within subversion to automatically FTP things up whenever there's a commit - that would probably be the best solution...
# Posted By Joe Danziger | 9/5/06 11:18 AM
daniel's Gravatar "We'll make the assumption that you've already got your code imported into your repository's trunk directory, otherwise see the related posts."

As a noob, I am forced to stop reading your article at this point. I have no idea how to do that and google searches aren't helping. "see the related posts" would be a great place for a link. ;)
# Posted By daniel | 9/10/06 12:14 PM
Joe Danziger's Gravatar Daniel - the link to the related posts was underneath the google ads but I made some adjustments to show it higher. Check out <a href="http://www.ajaxcf.com/blog/index.cfm/2006/8/9/Sett... post on setting up Subversion</a> and that should clear up some confusion.
# Posted By Joe Danziger | 9/10/06 12:54 PM
daniel's Gravatar Ah thanks! "see related posts" to me meant go find some resources.

You might want to instead say "see my related posts at the bottom of this article"

Great write-up, it's starting to sink in!
# Posted By daniel | 9/10/06 1:15 PM
Dan Parker's Gravatar Thanks for the tip on how to point the internal browser to the localhost! I've been trying to get the internal browser to work for an hour! I'd tried before and given up!!

"If you're using the internal browser, you'll want to right-click on your Project and select Properties. Under CFEclipse Properties, update the project URL to the 127.0.0.1 address listed above. That will make your project the homepage of the internal browser."
# Posted By Dan Parker | 2/7/07 4:31 PM