I used Sencha CMD to build an app and want to ensure that I'm only downloading what is required for the app to run. I have read some places that the way to do this is by using the Required [] clause to only include the required classes, however I don't think I understand this clearly. For example I have a page that has an {xtype: 'grid'} within it, but I haven't put Requires : [ 'Ext.grid.Panel' ], yet it still displays properly. In my mind if I haven't included the requires, and CMD is doing what I think it should, this page should fail to load because Ext.grid.Panel wasn't included. The fact that it's working is making me think that CMD is automatically including it for me, but what else is it automatically including and potentially bloating the download? How can I ensure that I'm only downloading what's required for the app to run?
I found the answer to my problem. I was developing my app on the same server that I'm serving it from, and when I was running "sencha app build production", it's putting all of the "build" files into a separate directory. I was assuming the microloader/bootstrap process was then going to look in that directory but I guess that's not how it works. I had to then copy those "build" files to a new directory and include my index.html and bootstrap.js in the new directory and then it appears to work, only loading the required files. It's certainly not clear anywhere that this is what's required. Hopefully this will help anyone else having the same issue.
Related
Recently I've been unable to load javascript scripts to my webworkers in react for some reason. It always responds with index.html.
My config is simply a standard create-react-app app. The screenshots are from my actual project but I have confirmed that the problem persists if I create a new project and try to initialize a minimal example.
Each ffmpeg.* file is affected. This is also not specific to ffmpeg since another library had the same issue - thankfully the initialization of that library is simpler so I was able to simply put that libraries worker-file in the public folder - and that worked.
It might be a stupid question but I'm really at my wits end here and I can't figure out how to investigate further.
Thank you <3
EDIT:
It works if I put all the files it is trying to hit in the public folder - so it has to be some kind of context issue(??) This seems like a really stupid way to go about it. It's not in a worker at the point of loading - it's the worker loader that fails to access the stuff it needs in the node_modules folder, (core script, worker script and wasm code). Whet?
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I'm using Angular, and as you know, there is Angular "1" (the old version) and Angular 2 (the newest) which include typescript.
This is my problem I've encountered today:
I'm doing an application using angular, so I've created the project folder (project-frontend) and installed locally grunt, with bower I've downloaded the packages for angular.
I've created the gruntfile.js and configured it with these tasks:
"grunt-contrib-concat": "^1.0.1"
"grunt-ng-annotate": "^2.0.2"
"grunt-contrib-uglify": "^2.0.2"
And with many others, like cssmin, htmlmin etc etc, but the problems occours with these tasks, or, precisely with uglify.
The problem is that if I concat all angular js files (angular.js, angular-rout.js, angular-resource.js ...) and I uglify everything, then, when i deploy my war in a Tomcat, i get this error:
TypeError: b is undefined
So, what i think that cause the problem is uglify, because I've tried to run the same tasks for another old project, which was having uglify 1.0.1 and everything works, I've also controlled that if I just run concat and ngAnnotate, the final angular files (the one from this project, and the one from the last) are pratically identical.
I don't know if this has to do something with typescript (seeing the error I thinked about that) because I assumed that typescript have been inserted into angular since 2.0.0 versions, and I'm currently working with a 1.5.8 version (I also tried 1.2.9).
I controlled my application code with jshint (it's the first task that i run) and there are no errors prompted in the terminal.
I've also tried to re-configure the tasks taking as example the old project Gruntfile.js file.
I don't know what to do anymore, I'm blocked with this problem and I don't know how to move further, some advices?
Ok, now that i've found the error, as i writed in the comments under my question, i figured out that concatenating js files like this:
src: 'bower_components/**/*.js'
Which should concatenate all js files inside folders and subfolders in my bower_components directory, simply don't know why but breaks angular final files, if i write
src: ['bower_components/angular/*.js',
'bower_components/angular-route/*.js',
'bower_components/angular-resource/*.js']
Which points directly to all files that need to be concatenated, everything works in my application with angular concatenated and uglified file
I don't know why there's this issue, beacuse if i print in terminal under my project-frontend folder this command:
echo bower_components/**/*.js
I can see this output:
bower_components/angular/angular.js bower_components/angular-resource/angular-resource.js bower_components/angular-route/angular-route.js
By the way this seems to be a solution to this type of problem, I hope this helps somebody in the future
I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.
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.