Problem
You are developing a web site using Flex as a front-end and Zend Framework as the back-end architecture. Creating two separate projects and thus two separate development, testing, and publishing tracks is less than optimal.

Solution
You want to integrate your Flex project into your Zend Framework project, so that the Flex project publishes as the default web page of the Zend Framework project.

Requirements
This is only possible in an IDE that supports both Flex and ZF. You can do this either using ZendStudio with the FlashBuilder plugin, or with FlashBuilder using the ZendStudio plugin, or possibly vanilla Eclipse using both plugins, but I haven’t tried that.

Implementation

  1. Create new Zend Framework Project
  2. Test Your Zend Framework Site

    http://localhost/mySite

  3. If Step 2 Fails – Add an ALIAS directive to your apache httpd.conf
    Alias /mySite /path/to/your/site/root_folder/public
  4. Optional: Check Project Into Subversion
    If you want to subversion your project, add it to your repository at this time. Commit all files and folders.
  5. Add Flex Project Type
    - Define the Web Root as /path/to/your/site/root_folder.
    - Define the Root URL as http://localhost/mySite.
    - Define the Output Folder as “public”.
    - Click “Validate Configuration”.
  6. If Step 4 Has Flex Error – Recreate html-template Folder
    - Right-click on error, select “Recreate HTML-Templates”.
  7. Rename HTML-Template
    Rename /html-templates/index.template.html to /html-templates/index.template.phtml.
  8. Run Project in Flex Mode
    - Run project to compile necessary files and generate HTML-Wrapper. Your browser will complain, but ignore that for now.
    - Copy generated file /public/index.phtml to /application/views/scripts/index/index.phtml, replace any existing file if necessary.
  9. Configure Flex Run / Debug Profiles
    - Edit your run profile, and change it from “http://localhost:10088/MyProject/public/MyProject.html” to “http://localhost:10088/MyProject/public”.
    - Edit your debug profile to reflect the same settings.
  10. Test Your Site
    - Add some “Hello World!” text to your Flex project for testing purposes.
    - Run you site in Flex mode.
    - Run your site in Zend Framework mode.
  11. Optional: Commit All Changes To Subversion
    If you added your project to subversion, go ahead and commit all changes made. You will notice that the “public” folder lost its subversion icon. This is due to the Flex Project type preventing the output files from being added.

Summary
We can clearly see that Zend Framework isn’t quite there yet regarding complete and seamless integration with Flex. However, with a little tweaking we can get there!

What have your experiences been? Do you know a better way to accomplish this? Let us know! ;-P

Update 11/11/2010:
Added steps 4 and 11 detailing Subversion steps. Failing to add the project to subversion at step 4 will result in the “public” folder being omitted entirely. This can be worked around by changing the Flex output folder to a temporary location, adding the “public” folder to subversion, then changing the output location back.