Deep Dive into Sencha ExtJS Build

I you are new to ExtJS framework, I have written introductory post explaining a bit about this framework
sencha_codementor_officehour
And another one for Understanding Sencha Cmd
 This post is about the deep dive into Sencha ExtJS build with an objective

Objective

Copy the sencha application into Network UNC path
i.e. what build inside {root dir}\build\testing needs to copied to some network share (\\someserver\sharedpath)

Why

This network share in root directory of the test web server. So, whenever there is the new build, developer can push their code to test server

Problem

It looks like simple problem, you just need to change the build directory in app.json. But it didn’t work.
For this, I need to dive into Sencha build process to understand whats going. Read the full story to understand.
When you enter command
sencha app build <environment>
e.g. > sencha app build testing
This triggers lots of action. For novice new developers, it is some magic happening for the build.
My journey began with option to publish to the network share path UNC path (\\someserver\sharedpath)
 I have written another post on how to change the build directory in ExtJS
In order to this, I change the build directory for ExtJS in app.json to network share path (\\someserver\sharedpath). In my case, it’s was \\rav-vm-srv-122\dcf-test
Everything went well, except app.js. Compiler confuses with the network UNC path and instead on writing to the UNC path, it created the directory in the root directory with
\\rav-vm-srv-122\dcf-test folder name.
OrphanPartInRootDirectory
app.js file which you see here is the compile time file, which is generate when you fire sencha build. This file is different from the one you have in the ExtJS app root directory.
App root one is just 2 Kb, which compile one is close to ~ 2 MB in size.
It contains the code which you have written in controller, model, view and tons on lines from the extJS framework. This is important file, and I needed to be in there. Without this, ExtJS app won’t work
To understand, why this file landed in the root drive folder instead than network UNC path is subject of our investigation.
In order to investigate, we must dive deep into Senha build process to understand what’s going on. To understand more about the build, there is link to sencha official page, which gives you the inside of the app build process
Sencha uses Ant to build the project.
In ant, what you need to do for build is define in <target> sections. You can view https://ant.apache.org/manual/tutorial-HelloWorldWithAnt.html for more information on ant build file
There is file call build.xml at the root of the application. This file is use when you fire sencha app build command.
SenchaBuildXMLFile.png
This files imports the build-impl.xml, which is in {root}\.sencha\app folder. This is an important folder in sencha build, as most of the files you required to modified the build is stored in this location
 InsideBuildXMLFIle
For JS compilation, it uses another file called js-impl.xml.
Inside build-impl.xml file
InsideBuildXMLFIle2.png
js-impl.xml file contains the code that compiles model, view, controller js file into one file app json
Inside js-impl.xml file
JSImplXMLFile.png
Now, here was the problem. This x-compile target uses sencha command compiler which renders the output
If you see the code above, output is render to ${build.classes.file}
Now, if we run [ sencha ant .props ] command at the command prompt, it will list all the ant properties used.
CMD > sencha ant .props
Here, we get
[INF] [echoproperties] build.classes.file=D\:rav-vm-srv-122\dcf\app.js
Seen, this is a problem. Sencha compile can’t handle network UNC path. Instead, it appends network UNC path to root directory in Windows.
Now the problem has been identified, how do we solve this? My idea to resolve this is better to compile in the local directory i.e. {app.output.base} and then copy all the files to network UNC path.
Since Secnha build use ant, we could use after-build target in the build.xml file for our copy task as seen below
AfterBuildFile.png
Here, you see echo message in error. This is quirk which I had to do in order to print message to command prompt. I found, all other level info, warning, didn’t print the message in the command prompt.
I have use ant copy task, which copies the build dir at ${app.output.base} to Network UNC path \\rav-vm-srv-122\dcf-test
Hope, this post have given you some insight of Sencha build process.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s