Sencha Cmd Introduction

Sencha

I see a lot of beginners with Sencha struggling how to use Sencha Cmd to pretty much do anything. Understood on the struggle, they are real and we all have experienced them when we started with Ext JS. 

Cmd documentation can be overwhelming, underwhelming, extensive and minimalistic simultaneously. Cmd itself has a wealth of information once you grasp how to get to the help in a context you are seeking answers for.

An example of running 

sencha help

from either Windows command prompt or Mac terminal, you are greeted with several options available. They are under categories; options, categories and commands

Options
 * --beta, -be - Enable beta package repositories
 * --crash-log-dir, -cr - Set the directory for crash logs
 * --cwd, -cw - Sets the directory where commands should execute
 * --debug, -d - Sets log level to higher verbosity
 * --info, -i, - Sets log level to default
 * --nologo, -n, - Suppress the initial Sencha Cmd logo
 * --plain, -pl, - Enables plain logging output (no highlighting)
 * --quiet, -q, - Sets log level to warnings and errors only
 * --sdk-path, -sd, - The location of the SDK to use 
 * --strict, -st, - Treats warnings as errors
 * --time, -ti, - Display execution time after completion

Categories
 * app - Perform various application build processes
 * compile - Compile resources to produce.... 
 * cordova - Quick init support for Cordova
 * diag - Perform diagnostic operations
 * framework - Commands to manage frameworks in current... 
 * fs - Utility commands to work with files
 * generate - Gereates models, controllers, etc. 
 * manager - Commands for interacting with web application mgr.
 * manifest - Extract class metadata
 * package - Manages local and remote packages
 * phonegap - Quick init support for Phonegap
 * repository - Manage local and remote repository connections
 * template - Commands for working with templates
 * theme - Commands for low-level operations on themes
 * web - Manages a simple HTTP file server
 * workspace - Commands to perform actions on current workspace

Commands
 * ant - Invoke Ant with helpful properties back to Sencha Cmd
 * audit - Search from the current folder for Sencha frameworks
 * build - Works as an alias for sencha app or package build
 * config - Load a properties file or sets config property
 * help - Displays help for commands
 * js - Executes arbitrary JavaScript file(s)
 * switch - Manage the active Sencha Cmd version
 * upgrade - Upgrades Sencha Cmd
 * which - Displays the path to the current version of Sencha Cmd

Many of these commands have even more options to review. 

Clearly after reviewing the Sencha Cmd documentation there isn’t the extensive documentation covering all these topics. This is the intent of this series of posts. To dive deeper into what Sencha Cmd is, what it can and cannot do for us when building and developing our Ext JS applications. 

sencha help app build

The first thing seen is the following description. It gives basic details where you can modify configurations with some detail why files aren’t tracked in repositories.

This command builds the current application

  sencha app build [production|testing|native|package]

This will build your application in its current configuration and generate the build output in the "build/<environment>" folder. This location and many other properties can be configured in your application's configuration file ".sencha/app/sencha.cfg" or the provided build script "build.xml".

For locally overriding build properties, the build script loads an optimal properties file called "local.properties" if present in your app folder. The purpose of this file is to define build properties that are in some way special to the local environment (this is, local machine). As such, this files is not intended to be tracked in source control.

Below this you find information regarding using Ant

Using Ant

This command is equivalent to running the provided Ant script directly using the following command

    sencha ant [production|resting|native|package] build

To tune the process, start by looking at the generated "build.xml" in your app folder. The actual build logic is located in ".sencha/app/build-impl.xml".

The "build.xml" script can be used by many Continuous Integration (CI) systems if they understand Apache Ant (most do). If not, the Sencha Cmd command Line can be used as you would during development. If the CI system understands Ant, however, it is often more convenient to use that integration rather than using a command line invocation.

Next up is the Options area where the options we can pass when using sencha app build can be included in the build process to accomplish certain tasks.

Options
 * --archive, -a, Directory path where previous builds are stored
 * --build, -build - Selects the name of the build
 * --clean, -c, Remove previous build output prior to new build
 * --destination, -des, Directory for build output to be written
 * --development, -dev, Sets build environment to development
 * --environment, -e, The build environment
 * --fashion-debug, -fashion-d - Enable/Disable node dev tools
 * --fashion-symbols, -fashion-s - Enable/Disable stack traces
 * --locale, -l, - Selects the app.locale setting for the build
 * --packages, -pac, - Only build 1 ore more of the packages
 * --pkg-environment, -pkg, - Sets the build environment]
 * --pkgdevelopment, -pkgd, - Sets the development environment
 * --pkgproduction, -pkgp, - Sets the production environment
 * --pkgtesting, -pkgt, - Sets the testing environment
 * --production, -pr, Sets the build environment to production
 * --run, -r, - Enables auto running builds w/ native package mgr
 * --testing, -te, Sets the build environment to testing
 * --theme, -th, - Selects the app.theme setting to use
 * --uses, -u, - Build packages dynamically used in the app

Finally we get down to the syntax how to use sencha app build

sencha app build [option(s)] [theme|locale|build]...[environment]

This gives an broad look into what is behind Sencha Cmd and your Ext JS application in the build/creation/development process. Today was intended to give a high level view and introduction how to navigate through Sencha Cmd to get more detailed help than found in the online documentation. 

Coming articles will expand on each of the above options, how we can use them with pros and cons of using them in our development workflow.

As for me, I decided on this topic as a starting point because today a co-worker asked me how to specify the path when running sencha app build. Since I myself didn’t know it started me on the road of an internet search. This lead to the question being asked more times than I care to count with a wide array of answers depending on which form the answer came from, what version of Ext JS was the question asked on and the personal opinion of “best practice” based on the one giving the answer and even some of those responding offering a different view of best practices.

This lead me to concluding information such as how to specify what path I want my resulting build files placed in should not be so difficult to find an answer. 

Well simplifying using Sencha Ext JS and related products is what we as MVP’s are supposed to give resources to. Questions asked often and even problems we encounter knowing the products deeper than average developers. 

Now, we all know what drove me to this post. It is also what will drive me to post more details on Sencha Cmd, to give answers and help to others using the product so with luck in time, finding answers won’t be the journey it was for those who traveled before you.

Thanks for reading.

Author: aallord

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.