Developing EE Sites on Windows

by Sean Smith

Editors Note: I’d like to welcome Sean Smith as the newest guest author on EE Insider. Sean is a Canadian web developer based in Seoul, South Korea. He is an avid ExpressionEngine fan and runs EEforums4You, which helps other EE developers skin the Forum module. If you want to know more about Sean he can be found on Twitter @createsean or in a coffeeshop drinking coffee.

When talking to web developers it seems that the overwhelming majority are Mac users. That certainly seems to be the case in the ExpressionEngine community, but there are still a large number of developers using Windows XP, Vista or soon Windows 7. This article will discuss several tools and applications that are essential for developers using the Windows platform.

Localhosting

The first program to look at is XAMPP which is a cross platform Apache server set up.

Many people know from their own experience that it’s not easy to install an Apache web server and it gets harder if you want to add MySQL, PHP and Perl.

XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start.

To get up and running, you only need to download and install the XAMPP for Windows package. The instructions are straight-forward and you can choose where to install it. I have XAMPP installed on a separate physical drive (D://xamp server) from my operating system so that I will not lose any files should I need to reinstall windows.

Once you have finished installing XAMPP, starting your web server is as easy as clicking two buttons, which when running will be highlighted in green.

Please note: When running Skype, Apache may not start since they are both using port 80. Simply turn off Skype, start Apache and then restart Skype. You will then be able to run both simultaneously.

Installing ExpressionEngine is quite easy at this point. Download ExpressionEngine, and extract it to your htdocs folder. Before you do that visit http://localhost and set up your database, database user, and database password. Once you’ve got that ready just visit http://localhost/mysitefolder and follow the install wizard.

Editing Templates

Now that you’ve got ExpressionEngine installed you will want to start editing templates. Doing that in the default template window is not very fun. Be sure to set up your install to use flat files thus allowing you to use a text editor. One of the best text editors for windows machines is Notepad++, which was also voted #1 text editor for developers a couple of months ago.

Notepad++ also has an ExpressionEngine user defined language available on the EE forums at this thread which unfortunately has not worked for this author. Bonus for CodeIgniter jockeys is an add-in found in this CodeIgniter thread.

I like that Notepad++ allows you to open up multiple tabs in multiple views side by side. Additionally you can have more than one instance with multiple tabs and views open. This comes in handy when running two or more monitors and you need to see code from several files at the same time.

Remote Development

One tool of invaluable use when editing sites not found on your local machine is WebDrive. WebDrive turns your hosting account into a network drive allowing you to edit files live on the server.

WebDrive connects to servers using FTP, SFTP, WebDAV, group drive, FrontPage and Amazon s3 and allows you to map to whichever drive letter you choose. It comes in a fully functional trial version, but is absolutely worth the cost of the license (starts at $59.95).

The time lag between saving a file and it showing up on your sites files is only about 0.5 seconds which is hardly noticeable considering you are working remotely and it reduces the hassle of firing up your FTP client everytime you save the file you are working on.

Tools for Debugging

Now that you’ve got your site underway it’s time to ensure that your site is working across all browsers including Internet Exploder—I mean, Internet Explorer.

One of the best tools available to the windows developer is IE Tester which when installed allows you to view your page in any version of IE from 5.5 up to 8.0. In one instance you can see your site in versions of IE using tabs; it even gives you the option to open a site in all versions with one click.

After looking at your site in IEtester you will now need to adjust the code. Fortunately there is IE Developer Toolbar which is basically like Firebug but for Internet Explorer.

In the same vein is Debug Bar which is free for personal use but requires a license purchase for commercial use, starting at 59 EUR. Despite being on the same site as IE Tester above, this is a recent discovery for me and I haven’t yet used it. Looking at the screencast it seems to be clearly useful and probably better than IE Developer Toolbar. I will be using this when I move to IE testing on my current client site in development.

Bonus for Debug Bar is that it integrates with IETester whereas IE developer toolbar does not. Unfortunately it doesn’t appear to allow you to edit css or html on the fly, yet.
No post about development would be incomplete without twitter. Probably the best way to network and crowd source solutions to issues one is having. This thread in the EE Forums has a list of ExpressionEngine developers and their twitter ids.

Your Feedback

Do you have any other applications that are essential to your development of EE sites on Windows? Please share them in the comments.