05 Sep 08 Setting Up a Flex Development Environment with Ruby on Rails

I have been asked a few times here lately on how I setup my Flex development environment.  The following is just my preferred method of setting up as I develop my Flex applications that are hosted with Ruby on Rails applications.

Here is a list of software and links that I use for my setup:

1. Flex Developer IDE - http://www.adobe.com/products/flex/
2. Bitnami’s RubyStack - http://bitnami.org/stack/rubystack

 Setup of RubyStack

This is pretty straight forward as the setup comes with an installer.  Just follow the directions as the installer and you should have no troubles.  Since I use a Windows XP distrobution I prefer to setup the RubyStack server on the root of a drive (ex: c:\RubyStack).

Once the install is complete it will launch the Apache server and provide a link to the demo Rails application that was created during the installation process.  Just ensure that you are able to view the Rails application and that everything is working correctly.  If you run into any problems, I recommend posting on the support forums on the Bitnami site.

NOTE:  If you are planning to use RubyStack for Ruby on Rails development I recommend that you download E-TextEditor and CYGWIN (E-TextEditor sets CYGWIN up for you on first launch).  Once you have these installed you will want to setup your PATH configuration using the Windows Environment Variables screen.  I personally setup all the direct paths to all the bin directories and path to E-TextEditor in order to not have to type paths in when I am calling an executable.  For instance:

PATH = C:\RubyStack\ruby\bin;C:\cygwin\bin

There are lots of resources available on the web on what the benefits are for doing this and other methods of setting this up. The screen can be obtained from right-clicking on My Computer and going to Properties.  With the new window that opens go to Advance Tab and click the Environment Variables button.  The window should look like as follows:

Setup of Eclipse Developer

Again this is also pretty straight forward with the installation.  If you download the installer just follow the directions provided during the installation.  When you visit the Adobe site to download the Flex Developer IDE there is an option to download the Eclipse plugin.  I have run into a few issues with the Eclipse plugin so I would just recommend installing a stand alone version of the IDE.  The following are examples of my default directories of where I install the IDE and setup the workspace for development:

Installation: C:\flex_developer
Workspace: C:\projects\flex_workspace

The projects folder allows me to have a location where I can develop standard Ruby on Rails applications as well as have my workspace for Eclipse with Aptana set to.

Project Creation and Setup

Flex & Ruby on Rails

Okay now we are getting to the purpose of this post.  When I create a new project I first create a Flex project and use the defaults for the creation.  Once the project is created you will want to change where the project gets compiled too.  You do this by creating a Rails application (instructions on how to create a new Rails application can be obtained from RubyOnRails.org) and then changing the Output Folder to the location of the public folder in the Rails application structure.  Your assets directory should be located within the source directory of the Flex application.  I have run into problems with deployment of the assets if it sits outside the source directory.

Flex & Apache HTTP server

So say you don’t want to use a Rails application to host your Flex project and you would like to just host is on the Apache HTTP server.  Just set the output folder to the location of with in your htdocs section of the Apache setup or create an Alias in the httpd.conf file.  The httpd.conf is outside the scope of these instructions so I will not be explaining this process.

Once you have decided which way your want to host the Flex application you will want to also change the Output folder’s URL field to the local address to the application.  Here are a couple of examples:

Rails App: http://localhost:3000/
HTTP App: http://localhost/folder/to/app/

The reason I like doing my development through an HTTP request for debugging is because eventually the app will be hosted this way.  So instead of launching from the desktop I prefer to launch it from a hosted environment to ensure that there is nothing missed when it comes to deployment.

Tags: Bitnami, Flex, Rails, RubyStack

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

	'KEYWORDS' => array(
		/* CFM Tags */
		1 => array(
			'<cfabort', '<cfapplet', '<cfapplication', '<cfargument', '<cfassociate', '<<cfbreak>',
			'<cfcache', '<cfcase', '<cfcatch', '</cfcatch>', '<cfchart', '</cfchart>', '<cfchartdata',
			'<cfchartseries', '</cfchartseries>', '<cfcol', '<cfcollection', '<cfcomponent', '</cfcomponent>',
			'<cfcontent', '<cfcookie', '</cfdefaultcase>', '<cfdirectory', '<cfdocument', '</cfdocument>',
			'<cfdocumentitem', '</cfdocumentitem>', '<cfdocumentsection', '</cfdocumentsection>', '<cfdump',
			'<cfelse', '<cfelseif', '<cferror', '<cfexecute', '</cfexecute>', '<cfexit', '<cffile',
			'<cfflush', '<cfform', '</cfform>', '<cfformgroup', '</cfformgroup>', '<cfformitem',
			'</cfformitem>', '<cfftp', '<cffunction', '</cffunction>', '<cfgrid', '</cfgrid>',
			'<cfgridcolumn', '<cfgridrow', '<cfgridupdate', '<cfheader', '<cfhtmlhead', '<cfhttp',
			'</cfhttp>', '<cfhttpparam', '<cfif', '</cfif>', '<cfimport', '<cfinclude', '<cfindex',
			'<cfinput', '<cfinsert', '<cfinvoke', '<cfinvokeargument', '<cfldap', '<cflocation', '<cflock',
			'</cflock>', '<cflog', '<cflogin', '</cflogin>', '<cfloginuser', '<cflogout', '<cfloop',
			'</cfloop>', '<cfmail', '</cfmail>', '<cfmailparam', '<cfmailpart', '</cfmailpart>',
			'<cfmodule', '<cfNTauthenticate', '<cfobject', '<cfobjectcache', '<cfoutput>', '<cfoutput', '</cfoutput>',
			'<cfparam', '<cfpop', '<cfprocessingdirective', '</cfprocessingdirective>', '<cfprocparam',
			'<cfprocresult', '<cfproperty', '<cfquery', '</cfquery>', '<cfqueryparam', '<cfregistry',
			'</cfregistry>', '<cfreport', '</cfreport>', '<cfreportparam', '</cfreportparam>',
			'<cfrethrow', '<cfreturn', '<cfsavecontent', '</cfsavecontent>', '<cfschedule', '<cfscript', '<cfscript>',
			'</cfscript>', '<cfsearch', '<cfselect', '</cfselect>', '<cfset', '<cfsetting', '<cfsilent',
			'</cfsilent>', '<cfstoredproc', '</cfstoredproc>', '<cfswitch', '</cfswitch>', '<cftable',
			'</cftable>', '<cftextarea', '</cftextarea>', '<cfthrow', '<cftimer', '</cftimer>',
			'<cftrace', '</cftrace>', '<cftransaction', '</cftransaction>', '<cftree', '</cftree>',
			'<cftreeitem', '<cftry', '</cftry>', '<cfupdate', '<cfwddx','<','>'
			),