How do you set up your Flex project?

I've spoken to a bunch of people who are not sure how to organize their Flex project files when using Flex Builder, especially when version control comes into the picture. After a few different people asked me questions, I decided to blog about my approach.

First, I want to let you know that there are really three different directories in play when you create a Flex Project in Flex Builder:

• Eclipse Project Root: This is your Project Root. It contains eclipse related folders and files, such as a .settings folder, and .project file, a .flexProperties file and a .actionScriptProperties file. The html-templates will also show up here.
• Source Directory: The source directory contains the source of your application. In Flex Builder 2, the default location of this is the same as your project root. It can cause a lot of problems if you accidentally start committing project files to a repository and other developers working with you update them, thus corrupting their local platform. Flex Builder 3, Beta 2 has made the source directory a subdirectory of the Project Root by default. It's a step in the right direction.
• Bin Directory: The bin directory contains the compiled swf, and other related assets. It is, by default, a subdirectory of the Eclipse Project Root. There is a setting ( by default ) that will copy all files from the Source to the bin. I haven't decided if keeping this checked is a good thing or not.

Those are the three directories that we're worried about in relation to a Flex project. I'm not a fan of the default setup, and was partially inspired to change it by Nat Papovich's post over at the Webapper blog. A lot of what I write here is based on his post. I keep my Eclipse Project folders as a subdirectory of the Eclipse Workspace. The source folder will go in a non-web accessible client directory elsewhere on my machine. The bin directory will go under the web root. These are three isolated directories scattered around on my machine.

How do I set this up? This is my procedure:

1. Launch Eclipse, and go File --> New Project --> Flex Project. Click Next.
2. You can fill in the relevant server information as you see fit. Click Next.
3. Enter the Project Name. I usually use the default location for the workspace, but you can change that if you want. Click Next.
4. Now you are at the project properties screen. For the bin folder, you can choose any folder on your hard drive. Change the name of the main app, specify the URL, and add libraries at your leisure. For some reason you can only choose a source path that is a subdirectory of the Eclipse Project Root, not something outside of it at this stage. Click Finish.
5. Now you need to create a source folder that is outside of your current root. From within the project, select File --> New --> Folder.
6. The name of the folder (I use src) and click advanced. On the advanced screen click "Link to a folder in the File System". You can then choose a path anywhere on your system.
7. Now you've created your source path pointed to the appropriate location, but you haven't told Flex Builder to use it as the main source location yet.
8. Open up the Project Properties using Project à Properties à Flex Builder Path. Select "Browse" next to main source folder and select your src directory. Click okay.
9. You might receive a warning that "src/Main.mxml" does not exist. That is fine. Just click and drag the Main.mxml file from the project root to your new source root (src). The warning should go away on its' own, but if not you can right click the file and "set as Default Application"

You should be all set on Flex Builder 3 (Beta 1) or Flex Builder 2. The procedure has changed a bit in Flex Builder 3 Beta 2; all the same stuff is there, just in slightly different spots.

Personally, I only keep the source directory under version control, but I can see valid reasons for keeping the bin directory under version control if that is what you want. I find this apparoch much cleaner than trying to set up Subversion to ignore project and bin files.

I thought it might be beneficial to note that most of my applications are made up of multiple projects. I put all of the generic Flex functionality inside a Flex Library project. I use a Flex, or AIR, project as a 'wrapper' to the Flex Library to allow for easy deployment in either environment. Backend components go in another Eclipse Projects (often with CFEclipse).

Each section of the application will have a separate repository directory with its' own trunk, branches, and tags. The whole purpose of encapsulation is that you change the implementation details without changing the interface; so it is entirely possible that I'll change a backend component without changing the Front end. Making each project a separate repository allows me to do this easily. You're more than welcome to tell me that it is rare you change one piece without changing all the other pieces. I understand that idealology and reality are not always on the same point in life.

What do you think?