Phil Strong has an excellent article on how to update an existing Sencha Architect (SA) project so that it will work with Sencha’s CMD compiler. Basically, the problem is that SA and CMD do not agree on where the app.js should be by default. This article will give you a recipe to do a file/save as from SA and then turn that new directory with the SA project into a place where you can, from the command prompt say: “sencha app build production” or “sencha app build testing” to generate a completely optimized version of your web app for deployment.
For those that don’t know what either is, Sencha Architect is an awesome tool that Sencha started working on literally 4 years ago and finally released about a year ago. It’s a beautiful tool (not free, but not crazy expensive) that allows you to visually design and build your Sencha applications (both ExtJS and Sencha Touch).
CMD is a standalone command line tool that allows you to build your Sencha apps and basically do all the JavaScript optimizations and minimizations along with doing the same for CSS. It takes you Sencha App and basically makes it load with a minimal number of files being downloaded over the wire.
The Steps
- Open your SA project and do a File SaveAs to a new empty directory
- CD (change directory) from a DOS prompt into your Sencha Source route directory such as “C:\VCProject\SVCodeCampWeb\WebAPI\ext-4.2.1.883”
- Tricky Step: Following Phil’s article find the sencha.cfg file in your new SA project directory (in my case …\DashboardDev\.sencha\app\sencha.cfg and fix the line that points to app.js in the /app directory to point at the file in the root of your project directory. In other words "app.classpath=${app.dir}/app,${app.dir}/app.js” becomes “app.classpath=${app.dir}/app.js,${app.dir}/app”.
- Remove the app.js file inside the app directory
- Make sure your index.html reference app.js and not app/app.js
- Execute the command from the DOS prompt “sencha generate app App C:\VCProject\SVCodeCampWeb\WebAPI\ExtJsAppsSrc\DashboardDev” where the directory name at the end is where you did the file Save As in the first step and “App” (not app) is the name of your application as found in the app.js file attribute name:
That's it. Now, you should be able to continue to develop with SA and CMD.