How can I exclude files - extjs

Using CMD from within Sencha Architect I've been able to build a production build of my application. However I can not seem to figure out how to exclude a js file from the build process. I don't want it compiled in with app.js I want it as a separate script include in index.html - so cmd shouldn't touch it basically.
Sencha Arhitech generates and calls build.xml which calls build-impl.xml which calls init-impl.xml
Everywhere I've read, they say to include the following;
<target name="-before-init">
<echo>Setting build.operations...</echo>
<echo>app.dir=${app.dir}</echo>
<property name="build.operations">
exclude
-file=\resources\js\version.js
</property>
</target>
However it refuses to exclude the file...I can see the echos so I know it's hitting the target..
Any ideas? Is this how I am supposed to exclude files?
app.framework.version=4.2.1.883
app.cmd.version=4.0.4.84

Turns out this won't be possible to do until Sencha Architect 3.1

Steps by which i was able to exclude AppConfig file in production build.
Here file exclude means it will not be compressed/bundled and variable/properties of this file could be used any where in the app.
1. Config file(AppConfig.js in our case) MUST be inside resources fodler. Below are the contents of our AppConfig file
/////////////IxDetect is my Application Namespace///////////////////
var IxDetect = IxDetect || {};
IxDetect.AppConfig = {
logoPath: '',
logoTitle: 'Internal',
pentahoUrl: 'http://107.20.104.150/pentaho',
pentahoRptCube: 'TrafficWithFraudIndex'
};
////////////////////////////////
2. Link this file in index.html page like below
<script src="resources/AppConfig.js"></script>
3. Add one more item in "js" array in "app.json" file
"js": [
{
"path": "resources/AppConfig.js", // This is my file. Also make a sure you do not miss bundle and includeInBundle property
"bundle": false,
"includeInBundle": true
},
{
"path": "app.js",
"bundle": true
}
],
4. Try development and production build all should work file
Note: All above changes are done and tested on 6.2(Framework/CMD)

Related

CakePHP: loads plugin for test

I have a plugin (FirstPlugin).
The plugin loads a second plugin (SecondPlugin) from its bootstrap and they work both fine.
Now I'm writing tests for FirstPlugin and I need to load SecondPlugin into tests.
So in the bootstrap for test (FirstPlugin/tests/bootstrap.php) I just require the main bootstrap (FirstPlugin/config/bootstrap.php):
require ROOT . 'config' . DS . 'bootstrap.php';
I do this because I also need other bootstrap code (constant, cache settings, etc.).
This doesn't work and I can't understand which is the matter.
Note I have already modified the composer.json for FirstPlugin:
"autoload": {
"psr-4": {
"FirstPlugin\\": "src"
}
},
"autoload-dev": {
"psr-4": {
"FirstPlugin\\Test\\": "tests",
"SecondPlugin\\": "vendor/second-plugin-path/src"
}
},
and the SecondPlugin is installed via composer and located into vendor/.
EDIT
The exception is thrown here:
http://api.cakephp.org/3.2/source-class-Cake.Core.Plugin.html#149
This means $config['path'] is empty.
The problem I think is this:
http://api.cakephp.org/3.2/source-class-Cake.Core.Plugin.html#134
Maybe in the bootstrap of test I must set manually the configuration value?
Solved.
Missing file vendor/cakephp-plugins.php.
I noticed that this file is not created for the plugin, but only for the app. Strange.

Problems Getting External CSS files to work with ExtJS 6

I've created my app the normal way with cmd in ext 5 and what I had done was simply put my css files (in the index.html file) and when I would run sencha app build my styles word override the ones in ext (that is things like the body tag).
Now, I've recreated my ext project with cmd again from scratch, copied in my app.js and app folder and it works but it seems that my app flashes my body tag but then it goes away and the standard css takes over.
That is, in my in my index.html I have the lines:
<link href="/Content/Styles/scrum-style.css" rel="stylesheet" type="text/css"/>
<link href="/Content/Styles/SessionSchedule.css" rel="stylesheet" type="text/css"/>
***Added Note:
After reading, I've copied the css from the two files into /sass/etc/all.scss and that pushed the css into the top of the generated file but it still seems to be overridden.
(also posted to sencha forums yesterday but got no response so trying here)
You could try adding them to app.json:
"css": [
{ "path": "Content/Styles/scrum-style.css" },
{ "path": "Content/Styles/SessionSchedule.css" },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
Or you could load them remotely:
"css": [
{ "path": "Content/Styles/scrum-style.css", "remote": true },
{ "path": "Content/Styles/SessionSchedule.css", "remote": true },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
But add them to "resources": [] as well to copy them on build.
There are 2 ways to include external CSS files in your application.
You can add references in index.html file. In this case after build you need to manual copy CSS files in build application resources folder.
You can add reference in app.json file in css array and build app. In this case if you do change in css file , you need to build app.

How to add sourcemap in React Native for Production?

I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android.bundle:20:2435
But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?
UPDATE 2018
https://docs.expo.io/versions/latest/guides/using-sentry.html Looks promising !
For source mapping here is the way I go about it:
In my bundle command for my production build I tell it to generate a source map:
iOS:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js
Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}
The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).
Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:
var sourceMap = require('source-map');
var fs = require('fs');
fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
console.log(smc.originalPositionFor({
line: 16,
column: 29356
}));
});
Where line and column should be replaced withe line and column number from your example output above.
This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.
Android inspired by #chetstone's answer
Starting on v0.32 for android, you can modify your android/app/build.gradle to accomplish this.
Look for the line
apply from: "../../node_modules/react-native/react.gradle"
Just above this, you will see something like:
project.ext.react = [
entryFile: "index.js",
]
Modify it to match the following
project.ext.react = [
entryFile: "index.js",
extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]
On iOS
Go to your build phases in Xcode for the "Bundle React Native code and images" phase and add:
export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
As noted, there's no obvious way to generate the sourcemap file for React Native on iOS. The bundle command is called from react-native-xcode.sh, and there's no provision to add parameters to the bundle command line. But I found a clean way to do it.
react-native-xcode.sh uses the environment variable BUNDLE_CONFIG to specify a config file. If you create an empty config file it has no effect, and then you can add additional CLI parameters.
Create an empty config file.
touch null_config
Set BUNDLE_CONFIG with your config file, and piggyback the --sourcemap-output parameter.
export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"
When you build, the file sourcemap.js.map will be created.
This is only for iOS.
step 1: Generate sourcemap.js file by using following command.
add this line in package.json file
"bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"
Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder
$ yarn bundle:ios
Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/
$ cd ios/source-map/
$ touch sourcemap-decoder.js
Content of sourcemap-decoder.js is
const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');
fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
if (err) {
console.log('err', err,);
}
const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));
console.log(consumer.originalPositionFor({
line: 1408,
column: 7762
}));
});
Step 3: execute the script for decoding
$ node ios/source-map/sourcemap-decoder.js

Bootstrap material fullpalette

I would like to add the fullpalette of bootstrap material design in my Angular application.
When I'm doing "grunt build" this file material-fullpalette.min.css isn't working in the dist (I added it manually in my index.html).
How can I do it correctly so that I'll be able to use all the colors of the css file?
For adding the material-fullpalette.min.css, you need to do make change in the following file
Location: bower_components\bootstrap-material-design\bower.json
For adding only material-fullpalette.min.css, just do following change
"main": [
"dist/css/material.css",
"dist/js/material.js",
"dist/css/ripples.css",
"dist/js/ripples.js",
"dist/css/material-fullpalette.css"
],
For adding other files, you need to do following
"main": [
"dist/css/material.css",
"dist/js/material.js",
"dist/css/ripples.css",
"dist/js/ripples.js",
"dist/css/material-fullpalette.css",
"dist/css/roboto.css",
"dist/fonts/Material-Design-Icons.eot",
"dist/fonts/Material-Design-Icons.svg",
"dist/fonts/Material-Design-Icons.ttf",
"dist/fonts/Material-Design-Icons.woff",
"dist/fonts/RobotoDraftBold.woff",
"dist/fonts/RobotoDraftBold.woff2",
"dist/fonts/RobotoDraftItalic.woff",
"dist/fonts/RobotoDraftItalic.woff2",
"dist/fonts/RobotoDraftRegular.woff",
"dist/fonts/RobotoDraftRegular.woff2"
],
Then if you run grunt, it will be automatically included in the main package.

Uglifying a RequireJS/Backbone project into one single .js file?

I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})

Resources