Live Preview with Coda (and other IDEs)

As happens most of the time when the internet is all abuzz with some new tool, the release of Panic software’s new web development IDE, Coda prompted most of us here at EllisLab to download it and try it out.  Allow me to share with you a nifty gem that makes Coda and other applications like it (Dreamweaver, Freeway Pro, etc.) have a leg up on other workflows when working on ExpressionEngine based sites.

Les, the ever imaginative VeeP came to me with the suggestion yesterday, so credit goes to Mr. Camacho for the idea.  Unlike BBEdit and TextMate (and most other text editors), in Coda the live preview is based not on the contents of the text editor window, but on the remote file you are working on.  For those using templates saved as files, this opens up a pleasant trick.

1. Save your templates as files

2. Setup your site in Coda, including setting the remote path to your document root (e.g. the public_html directory)

3. In whatever folder you have setup as the location to save your template files, add a .htaccess file, with the following contents:

4. In Coda, navigate to the template you wish to edit, and open it.  Click the Preview button and then split the window vertically.

5. Go back to Edit, which should now have the template file in one pane and the preview in the other.

6. Make your changes, including EE tags, save the file, and the preview updates immediately with the live content

The whole trick here is just the .htaccess.  It takes the directory/file structure of your template folder and simply rewrites the URL to point to your ExpressionEngine site with the template group and template name.  Remarkably simple, but something that makes modifying an ExpressionEngine site with these IDEs feel truly dynamic.  As a diehard TextMate user, it makes me jealous.