What is the recommended SVN repository structure for ExtJS MVC applications?

Question

After reading more about Sencha Cmd and building MVC applications with ExtJS 4, I'm seeing that ExtJS 4 applications are structured like the following. Where [application]s in the same [package] can share the same SASS (syntactically awesome style sheets) theme(s) and multiple [application]s can fit in the same [package].

Folder structure when creating a workspace with "sencha generate workspace" command:

\[workspace]\.sencha\
\[workspace]\packages\
\[workspace]\ext\

Folder structure when creating an app with "sencha generate app" command:

\[workspace]\[application]\.sencha\
\[workspace]\[application]\app\
\[workspace]\[application]\data\
\[workspace]\[application]\resources\
\[workspace]\[application]\sass\
\[workspace]\[application]\app\models\
\[workspace]\[application]\app\views\
\[workspace]\[application]\app\controllers\
\[workspace]\[application]\app\stores\

Folder structure when building the app with "sencha app build" command:

\[workspace]\[build]\[application]\[production]\.sencha\
\[workspace]\[build]\[application]\[production]\app\
\[workspace]\[build]\[application]\[production]\data\
\[workspace]\[build]\[application]\[production]\resources\
\[workspace]\[build]\[application]\[production]\sass\
\[workspace]\[build]\[application]\[production]\app\models\
\[workspace]\[build]\[application]\[production]\app\views\
\[workspace]\[build]\[application]\[production]\app\controllers\
\[workspace]\[build]\[application]\[production]\app\stores\

I've only learned a couple commands in Sencha Cmd, but I want to make sure those commands (and new ones I learn) still work if I restructure my source code in SVN.

Typically I keep the root directory of a given application below the "trunk" folder. That way, if I create a branch, I can throw everything into the branch and not miss something. Now that Sencha introduces an extra folder to the path (that being the [package] folder), where should the "trunk" folder be in reference to an [application] or a [package]?

Otherwise, I'd like to know if there are configurations I can set for Sencha Cmd so that theming with SASS still work, deployments still work, branching in SVN still work, and other commands still work properly.

Answer 1

This answer may be argued, but with lots of troubleshooting and trial and error, it made the most sense to me.

If running ExtJS 4 on IIS, and you're utilizing the Sencha Cmd and Sencha Architect IDE (for boiler plate code), I found this structure to work the best, so you don't have to change configuration for various commands. There are variables in this format, ${variable}, that need to be changed under both the {workspace}\.sencha folder and the {app}\.sencha folder that can be modified to account for these differences, but I went with the simplest option so I run into less issues in the future. When creating new apps, you need to put the "ext-4.2" folder in the same folder where "trunk", "branches", and "tags" reside temporarily, until the workspace is generated using "sencha generate workspace .. other parameters ...". During that command, this folder is copied and the new copy folder name is "ext" and is placed inside the [workspace folder]. I chose to just generate the workspace first, and then add the extra folder levels for SVN.

C:\SVN\apps\sencha\mvc\trunk\{app}\
C:\SVN\apps\sencha\mvc\trunk\build\
C:\SVN\apps\sencha\mvc\trunk\packages\

.. where "sencha" is our SVN repository

... where "mvc" is our SVN project, also our Sencha workspace

... where {app} can be replaced with the name of our app, with the first letter capitalized. And realize there can be multiple apps in this folder, as well as our "build" folder, and "packages" (themes) folder, etc..

... that way, commands stay within the same workspace since themes are shared, and builds are generated within the workspace.

... The only drawback is that we need to know the context of each branch. When something is branched, the content under "trunk" goes into branches\{name/date/version of branch}. So instead, I think we'll branch by doing branches\{app name}\{name/date/version of branch}.

This also allows you to place the "ext" folder one directory up from the app. This requires you to build a virtual directory for each application. So the URL of the app will be http://{domain}/{app name}/index.html, where {app name} is the name of our virtual directory. In IIS 6, this is automatic. But in IIS 7, we need to make sure of putting the virtual directory under the site. Another pain in the butt with having the "ext" folder inside the app is that it's a library. And there are a lot of files in this folder for all example code and Sencha widgets. So having it in each app folder bloats the size of each application. So it makes sense to keep it in the folder above. When deploying code, you will only need the framework file, and a few others. Most of your other files are built by using the "sencha generate app" command.