sencha app build production: doesn't combine my js - sencha-touch-2

So... as I have read through the Sencha Command documentation, it tells me that the build will automagically (using Phantom JS) be able to tell me what all of my dependencies are, and in what order. Based off of that, I am expecting the "sencha app build production" command to concatenate all of my dependencies into one js file, regardless of whether I have manually included them in the app.json file. However, I am not seeing this happen.
Do I have to manually maintain a list of JS files in the app.json? If so, then that is fine. I just have understood different from the documentation. Please help.
edit--
So my index.html is very minimal. It only has a script tag to one external resource js file, and one script tag to the 'sdk/microloader/development.js'. My app.js isn't referenced on my index.html. When I terminal into my app dir and run the "sencha app build production" command, it finishes without an error. However, it only finds 53 dependencies, when I know that we have well over 500. Here is the output in the terminal when I run the build:
aaronfrost#topnotch ~/source/ab/AreaBook/web/src/main/webapp/sencha2 $ sencha app build -e production
[INFO] Deploying your application to /home/aaronfrost/source/ab/AreaBook/web/src/main/webapp/sencha2/build/production
[INFO] Copied sdk/sencha-touch.js
[INFO] Copied app.js
[INFO] Copied resources/css/app.css
[INFO] Copied resources/icons
[INFO] Copied resources/loading
[INFO] Resolving your application dependencies (file:////path/to/my/sencha2/index.html)
[INFO] Found 53 dependencies. Concatenating all into '/dir/to/my/sencha2/build/production/app.js'
[INFO] Processed sdk/sencha-touch.js
[INFO] Minifying sdk/sencha-touch.js
[INFO] Processed app.js
[INFO] Minifying app.js
[INFO] Minifying resources/css/app.css
[INFO] Minified sdk/sencha-touch.js
[INFO] Minified app.js
[INFO] Minified resources/css/app.css
[INFO] Generated app.json
[INFO] Embedded microloader into index.html
[INFO] Generating checksum for appCache item: index.html
[INFO] Generated cache.manifest
So then I look in my new app.js that is in my build/production folder, and it has concatenated a bunch of sencha dependencies together, but the only file of mine that get concat'd and minified is my app.js, which is the only js file referenced in my app.json. That is why I was wondering if I have to manually put it in the app.json to get it to get concat'd and minified. None of the dependencies listed in my app.js require section get included in the builded app.js.
In summary, it doesn't give me the same behavior that I would expect, to build my app.js with all of my dependencies. Any thoughts would be nice.

From my experience, I never had to modify the app.json. Everything that is mentioned in a 'Ext.requires' statement is automatically concatenated in the final (unique) js file by the sencha command.
If you still have problems, maybe you should give some more details about the files that are not correctly treated.

Related

Store .vuepress folder in another directory

Is there a way to configure vuepress to look for the folder .vuepress somewhere else than default /docs?
UPDATE: VuePress 1.5.0 now only reads from docs/.vuepress, so the workaround below no longer works. However, another possible (less elegant) workaround is to symlink the docs/.vuepress to the desired location (tested on macOS Catalina).
For example, you could symlink it to <projectRoot>/.vuepress on macOS with:
mkdir .vuepress docs
cd docs
ln -s ../.vuepress
As of VuePress 0.12.0, there's no specific configuration to set the location of .vuepress/. VuePress always looks for .vuepress/ in the target directory (docs/) and the immediate parent directory. If not found, VuePress creates .vuepress/ in the parent directory of docs/.
If your objective is to prevent the creation of docs/.vuepress/ and you didn't mind .vuepress/ in the parent directory of docs/:
Create .vuepress/config.js in the parent directory of docs/.
Edit that file to contain the following config:
module.exports = {
dest: 'foo' // desired path to VuePress output
}
Run vuepress build in the parent directory of docs/.
The result of the above config is to create a directory foo/ with the VuePress static site output:
$ vuepress build
WAIT Extracting site metadata...
[2:20:45 AM] Compiling Client
[2:20:45 AM] Compiling Server
(node:47073) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[2:20:48 AM] Compiled Server in 3s
[2:20:50 AM] Compiled Client in 5s
WAIT Rendering static HTML...
DONE Success! Generated static files in foo.
Don't think there is. In 2018, the author has stated:
I don't see practical value in this except for personal preference, so probably not.

assembleRelease fails with react-native 0.50

Using gradle-plugin 3.0.0
Gradle distribution 4.1.0
react-native 0.50
Linux fedora 27
app name is u1b.
Project structure
/proj/mob/rn.common (this is where node_modules is and all my js related stuff)
/proj/mob/a/u1b -- is where the android app is.
the project structure is different than the one normally created by boiler plate react-native create app script (because my node_modules is not just one level up from the android app).
But not clear if this is an issue or not.
I have been building my android with react-native library, in debug mode.
Now its time to start building release.
But I am running into a problem
bash gradlew assembleRelease errors out :
> Task :app:bundleReleaseJsAndAssets
Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (12ms)
Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (9ms)
Loading dependency graph, done.
warning: the transform cache was reset.
bundle: start
bundle: finish
bundle: Writing bundle output to: /home/v/tmp/u1b/app/intermediates/assets/release/index.android.bundle
bundle: Done writing bundle output
bundle: Copying 18 asset files
bundle: Done copying assets
/home/v/tmp/u1b/app/intermediates/res/merged/release/drawable-mdpi/src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhlack_48dp.png: **error: Invalid filename. Unable to add.**
The image file it is looking at is, indeed not there. However I have no idea how that file name is constructed and, why it something is looking for it.
my gradle.properties contains a flag to switch to old apk due to a bug
# https://github.com/react-community/react-navigation/issues/1976
android.enableAapt2=false
could somebody shed a light on how the image names are decided and what might be causing the error
thank you
Resolved.
I figured out how the offending file name was constructed, and then I was able to mitigate what seemed to be 'too deep of a path for image file'.
Basically the file name below
src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhblack_48dp.png
was concatenation of a path where the file resided in my javascript folder (starting from same level where node_modules are )
my index.android.js referes to a static icon file
icon: require('./src/js.app/img/material/ic_local_library_black_48dp/android/drawable-xxhdpi/ic_local_library_black_48dp.png'),
When the bundler constructed that offending file name, It was basically appending elements of the path to the file together, with some 'mangling'. Like removing a dot (so js.app became jsapp)
I just copied that file over to a higher level directory (to reduce the length of the release-constructed file name)
And then the release build started working.
The length of the offending file name was about 177 characters long. Not sure why it created problem for the release build. I suspect this is a limitation of android tools, not facebook's problem. I switched back and forth between buildTools 25.0.3 and 26.0.2 (that also meant switching android plugin versions .. .and that whole thing took quite a bit of time). But the problem was in either of the buildtools versions.
So I just figured deep directory structures for js static resource (eg images) is a problem for now. So better use smaller directory depths.

How to separate sources from dist files in Aurelia with JSPM?

I am trying to use Aurelia with Symfony backend. Part of our application is generated on the backend (good, old server-side MVC) and part of it should be an SPA. I have started aurelia app from skeleton-typescript (JSPM). Directory structure I am trying to create is as follows.
project/
src/
SomeModule/
SomeOtherModule/
FrontendModule/
build/
src/
app.ts
main.ts
...
index.html
package.json
...
web/
dist/
I have changed the output path in build/paths.js and gulp build correctly places the compiled files in the web/dist. I have also added a gulp task that copies the index.html into the web/.
The biggest problem I have is how to manage the JSPM dependencies. If I configure it to downlad the dependencies into web/jspm_dependencies, the application works when launched with Symfony but I am not able to configure karma unit tests properly (it says for example that it can't find aurelia-polyfills). If I leave the jspm_dependencies in the src/FrontendModule then I have to create a gulp task that copies it to the web/ and it takes a lot more than 10s => unacceptable.
This leds me to the following questions:
What is the suggested directory structure for Aurelia project when I am not going to serve the app from the project's root?
Is there any way to copy only the files needed by the application to the web/ (something like main-bower-files for bower)?
I know I can gulp export the app into the web/, but I want to use the same directory structure during the development, too.
I don't want to use browsersync server in the dev because of multi-nature of the application (SPA part and non-SPA part that has to be served from "real" backend).

Building a Production Bundle from Aurelia-CLI

Using the Aurelia CLI, I've run au build --env prod in order to build a (what I assumed was a) production bundle.
I think copied index.html and the scripts folder into a web server.
However, I'm recieving the following exception when hitting the web server from the browser:
vendor-bundle.js:formatted:3912 GET http://ip_address/node_modules/aurelia-templating-resources/dist/amd/aurelia-templating-resources.js 404 (Not Found)
Why does the Aurelia-CLI's bundle still look for files in node_modules from the vendor-bundle.js? Isn't the idea that the bundle contains all the necessary files for deployment?
Here is my aurelia.json
Make sure you install and bundle the correct libs
In this case, aurelia-templating-resources isn't listed in your vendor-bundle.

why does sencha app build production replace my css file?

I've had to go back to an old version of compass: 0.12.7
Otherwise it fails on missing files. Before installing I removed the existing compass installation.
It correctly compiles my css file when I make a change to the scss file.
But when I ask sencha to make a production build with "sencha app build production" the css file in my project gets replaced with a different one.
The file probably gets overwritten at the following line during the build process:
[INF] executing compass using system installed ruby runtime
overwrite ../css/app.css
So it claims to use my installed version of compass.
What am I doing wrong here?
You have the same problem i have met.
Sencha touch 2.4.0 SASS compile error
You should not write your custom css in app.css.
IMHO, there are two ways to add custom css.
1. app.json
2. #import your custom scss file in app.scss in resource/sass/app.scss and then use sencha ant sass to compile css file.