Our application should have a main app and is consists of multiple modules and these modules have their own git repository.
The goal is to use the main app and turn the modules into packages that should only be referenced or called in the main app. Just like a DLL in C# or a component in Angular.
Now, I have looked thru sencha docs and all I can see is consolidating the modules into one single directory/workspace. We don't want to go that way because the modules have their own repo and the "main app" will also have its own repository.
Please recommend the best path to take.
I guess the simplest way is to define the workspace for the package inside each repo by adding this as workspace.json:
{
"frameworks": {
"ext": "ext"
},
"build": {
"dir": "${workspace.dir}/build"
},
"packages": {
"dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",
"extract": "${workspace.dir}/packages/remote"
}
}
Now you need to link (symlink suggested) or copy the framework under /ext
Lets say you have the following structure
/root/workspace.json
/root/ext
/root/packages/local/yourModule
Now you can go to /root/packages/local/yourModule
and call
sencha package build
This should produce the package and js-files.
You will find the js files under
/root/packages/local/yourModule/build/yourModule.js
/root/packages/local/yourModule/build/yourModule-debug.js
These files can now be loaded on demand from your main app.
Depending on your needs you can optimize the build by adding
skip.sass=1
skip.examples=1
skip.slice=1
skip.pkg =1
in your package.json - or for legacy sencha cmd packages inside
/root/packages/local/yourModule/.sencha/sencha.cfg
A different approach could be by using another build tool.
You need to do inside:
/root/packages/local/yourModule/src
(put the files in the right order)
concat
remove whitespace *
uglify *
star means only relevant for the debug version of your module (package).
This is more less what a standard sencha cmd package build does.
I tried it successfully with grunt.
Related
We have a Sencha ExtJS7 based classic application using a package that requires a lot of js files to loaded seperately (read can not be bundled). So we are loading them via package.json js config
"js": [
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/ace.js"
},
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/theme-monokai.js"
},
<snipped................>
So there are many files that are to be loaded seperately and should not be bundled into one
When production/testing build these files are loaded before app functions.
Is there a way to load these files either when a panel that requires them are added to screen or at defer them after app is loaded and starts working
First, if you want to do this, you can't bundle the javascript into your app; all bundled code will get loaded as part of the bootstrapping of the app.
Second, there are vanilla JS ways to load more scripting code, but the way to do it with ExtJS is Ext.Loader#loadScript
Another way to do it, if these are ExtJS packages (and not arbitrary NPM packages) would be to declare the packages in the 'uses' section of the app.json, which would allow you to load them dynamically with Ext.Package#load
When developing I want to use a a minified .js file of Ext JS 5.1 like they do on Sencha Fiddle. It looks like you can use the cdn link from Sencha but when I use this in the index file it fails.
Is there something I need to be doing in the bootstrap.js file to make it use just a link instead of the Ext Js 5 root folder? I want to use the same link for multiple apps hosted on a server for an enterprise situation.
Also, the Chrome Dev Tools running super slow having to load each file. I want to use one minified file to make this useful again.
I'm not positive how you could use the cdn file referenced in the sencha fiddle website. Adding that link directly to the app while using the microloader would cause errors. The microloader in extjs5 automatically figures out which files to load in the framework.
However, you can achieve a similar goal of using a minified version of the extjs framework if you are using sencha cmd.
They detail how to setup your project to use the minified or developer copy of extjs5 instead of loading all the seperate files in this forum post
Here are the changes to make to your project documented to stack overflow in case that forum post is no longer available:
Step One
make sure you are using a version of sencha cmd greater than 5.0.2.
To determine your version of sencha cmd you can type the following in the command prompt:
sencha which
If you have an older version of sencha cmd you can download the latest copy here
Thanks to Niederee for this little advice, do a sencha app upgrade on your app to make sure it's tied to the latest sencha command build
sencha app upgrade
Step Two
Adjust your app.json manifest file to load the ext-all-rtl-debug.js . Add this file to the "js":[] array in the file:
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js" // new default for generated apps
},
{
"path": "app.js",
"bundle": true
}
],
You can also add sencha charts if they are required to get that minified build too:
{
"path": "${ext.dir}/packages/sencha-charts/build/sencha-charts-debug.js"
},
Optionally you can also adjust the cache preferences based on dev/production
Add this additionally to the app.json file:
"development": {
"loader": {
"cache": true
}
},
"production": {
"loader": {
"cache": "${build.timestamp}"
}
}
Step Three
In the command prompt run the following sencha command to refresh your application's bootstrap manifest.
sencha app refresh
I am currently using yo generator-angular scaffold to create base for building a couple of projects sitting on identical code base.
I want to know if there's any good pointers that can allow me to use the grunt tools to perform two different builds without been verbose like grunttask:project1, and more specifically with ngminPrepare how can you build more than one project at the same time?
the end result im looking for is as this
$grunt build:project1
$grunt build:project2
$grunt test:project1
$grunt serve:project1
To do multiple builds simultaneously you can use grunt-concurrent: https://www.npmjs.org/package/grunt-concurrent
You can just register a new task with the name you like:
concurrent: {
build: {
tasks: ['build:project1','build:project2']
}
}
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('buildall', ['concurrent:build']);
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html
Using Cmd 3.0.0.141, I have successfully generated a workspace and an Ext app in that workspace. The application builds correctly until I attempt to integrate the Bryntum Scheduler, where I encounter an error when I try to build:
"Failed to resolve dependency Sch.panel.SchedulerTree for file ExtCalendar.view.Tree"
the app is very simple at this point, uses Ext.application and follows the MVC pattern where I have a view defined "ExtCalendar.view.Tree" that extends 'Sch.panel.SchedulerTree". I also have models and stores that extend Bryntum classes as well, so I assume the compiler will trip over those as well, since it can't see the Sch namespace.
I've added a 'js' path to my app.json that points to the bryntum js file where 'Sch.panel.SchedulerTree' comes from. I've tried to run the 'refresh' command with the same results (Failed to resolve...). I've regenerated the bootstrap.js file manually using 'compile', but nothing from the Sch namespace ever gets added to it, despite the Brytum lib file being in the classpath.
What do I need to do in order to successfully run the 'build' command with libs like this?
Or, do I need to take a more granular approach using the 'compile' command?
With the help of the nice folks on the Sencha forums, I was able to resolve my build issues. The solution, for me, involved a shim. I added an external shim.js file to my index with as many //#require and //#define directives as needed in order to resolve the dependency issues.
According to the nice folks at Bryntum, once I upgrade from the free-trial version of the Bryntum Scheduler, I will be able to get rid of the shim and simply rely on the sencha.cfg classpath pointing at the Bryntum src.
Also, as an aside, the app.json file is not used in ExtJS apps, its inclusion in the generated files was a bug in build 141 of Cmd v3.
See this thread for more detail.