Sencha CMD is a powerfull tool which has more to offer then just creating a production build for your application. However, creating a minified build of your javascript and css code plus including all neccessary Extjs framework classes (and leaving the unneccessary ones out) is quite handy.
For more detailed introduction to Sencha CMD check out the latest guide.
I will show the biuld process on the example Extjs MVC template.
After you have downloaded and extracted Sencha CMD and cloned the Extjs MVC template repo locally, navigate your command line tool to the folder /src/main/webapp, where you’ll see the .sencha folder containing configuration files maintained by Sencha CMD (in case you start a new project, you tell Sencha CMD to make the folder an Extjs application folder by sencha app init command)
Run sencha app build
In case you get exception com.sencha.exceptions.ExBuild: Mixed-Mode x-compile and microload markup is currently unsupported
you have probably put references to your custom CSS files into app.json – these need to be removed.
After running sencha app build there will be modification to the bootstrap.css file – import will now point to the location of compiled css file:
@import '../jsbuild/production/bitfictionMvcTemplate/resources/bitfictionMvcTemplate-all.css';
This is not yet resolved by Sencha folks, since the build command should not change the codebase, it should only produce the build. If you want to deploy the development version, just revert the bootstrap.css file (orginally it contains code @import 'ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css';)
The build is now located in the src/main/webapp/build/production/bitfictionMvcTemplate folder:
build/production/bitfictionMvcTemplate/
├── app.js
├── bitfictionMvcTemplate-all.scss
├── config.rb
├── index_template.xhtml
└── resources
├── bitfictionMvcTemplate-all.css
├── css
│ └── app.css
├── images // extjs images
└── img // custom images
This post was about Extjs 4.2 production app build with Sencha CMD. In the next post i will show how to create a maven profile which will copy produced build files to the WAR file.