Establishing a Workflow with ExpressionEngine

Most new developers to EE will build their first site within the confines of the EE Control Panel. While highly I recommend not skipping this critical learning step, EE's HTML editor leaves a lot to be desired. It's restrictive and slow, but by the time you finish that first web site, you will know the Control Panel like the back of your hand. 

Sooner or later, depending on your comfort level, you will begin making statements like, "man, there's got to be a quicker way to do this?"  And, you would be right. There is and I am going to walk you through my process for streamlining EE development.

One method is to write the code locally using your HTML editor of choice, then copy and paste the completed code into the appropriate EE template. This simple enough, but this process is cumbersome and still requires numerous steps that can lead to errors depending on your ability to control your mouse and press command C or V.

There has to be a better way!

With EE, you can save your templates as files.  First, open your Global Template Preferences and select "Yes" where it asks Allow Templates to be Saved as Files? Then, create a new directory in your site install to hold the template files and note the directory path.  Enter the server path in the field next to Basepath to Template File Directory.  

Hint: If you don't know the base server path, go to your General Configuration in the System Preferences and use the Theme Folder Path as a reference, simply replace the "theme" directory with the path to your new template "files" directory.

Sample Path: /home/username/public_html/template_files_directory/

Now, you will note at the bottom of every template page, a check box that says Save your template as a file.  By selecting this box, the system will essentially create a duplicate of your template and save the duplicate to the location you specify in your Global Template Preferences.  Once the file is saved, you can then access your "files" folder via FTP and download them to your local machine to edit with your favorite HTML wrangler.

EE Template >> EE Template File >> Remote File. Your EE template files are the "bridge" between your EE site and your local site file repository. 

Here is what the "save as file" process looks like step by step:

1. adjust your Global Template Preferences
2. create a template in EE
3. check Save as File
4. create local file repository
5. connect to remote files repository via FTP
6. download files to your local file repository 
7. edit in HTML editor
8. open FTP app and locate file(s)
9. reupload

Getting your template files saved to your local machine certainly makes editing your templates easier, but the wrench in the works for me was the lack of a connection between the HTML editor and FTP tool.  

The whole point of streamlining processes is to remove steps.

Texmate is my HTML editor of choice and when combined with the EE Bundle becomes a powerful tool for efficiently coding EE templates. But, it's lack of seamless FTP support really sucks. There are a couple workarounds, one called FTP Browse and another titled Use Tabs in Textmate for Files Opened Via Transmit. The clunkiness of both of these options prompted me to look for another solution.

BBEdit, Coda, and Espresso are the only editors I am are aware of that integrate html editing and FTP successfully. I'm a Transmit user, so I decided to give Panic's Coda a whirl. There are aspects of Coda that I find underdeveloped, but overall it provides a seamless connection between a remote EE install and my local machine. And, yes, I do miss TextMate's EE Bundle.

Why not BBedit? I am not fond of the UI.

Why not Espresso? CSSEdit is an app I use daily. I love CSSEdit, so I was excited to hear about MacRabbit's new product. It remains to be seen whether or not this app will mature enough to compete with the likes of Coda, but it has some really nice features I have come to expect from the guys at MacRabbit.  What I did not expect was a program that I had a hard time trying to figure out how to use ... and, after 30 minutes of testing, still didn't quite get the workflow.  If Espresso actually had detailed documentation, I might have stuck it out a bit longer.  I'll come back to it when I have time to muck around.

Using Coda for EE development

In Coda, set up your FTP connection as you would with any other FTP tool, then double click to connect to your "files" folder on the remote site.  You will be presented with a list of files that mirror your template groups in EE. All file names remain the same, only you will notice a .php appending each file.  

Download the site files to the local repository you created, select the file you want to edit, make your changes, then save.

Once you have made your changes in Coda, an icon appears next to the file you manipulated telling you it is ready for upload. Click the icon and the file is instantly updated on your site.  

Coda makes it that simple. No more having to switch between your HTML editor and FTP tool to upload files. No more wonky workarounds. As a result, my development speed has increased exponentially. 

Coda is a solid workflow solution, but not a perfect one:

• Be vary aware which files you are manipulating. The selectors for Local and Remote sites are adjacent to one another. Even though the active state is blue, it is very easy to forget where you are and start making changes directly to the Remote files.

Note: Templates must be created in your EE install and "saved as a file" before you can edit them remotely.  You cannot create a file remotely, then upload, and expect it to appear in your template group. Remember the workflow 1. EE template >> 2. EE File >> 3. Remote File. Once this sequence is established, you can transition back and forth and forth and back as much as you like.

• Remote file folders need to be "reloaded" in Coda.  Example: You have just created a new template in EE and saved it as a file, but when you fire up Coda, it doesn't appear in the Remote folder (template group). Right click and "reload" the Remote folder, then download to your local repository.
• Downloading folders to your local repository - Right click >> Download
• Downloading files within folders to your local repository - Right click >> Reverse Publish. Note: This is important because if you select "Download", the file will be placed in the root directory and not the correct folder (template group)

Conclusion

Coda is a great html editing application at a low price, but it has it's quirks. While it may not have all the bells and whistles of competing applications, Coda will speed up your workflow.

Be sure to download the ExpressionEngine Mode to speed things up even more.