Structure of my Application:
In my app.json file I did following configuration for pointing to index.jsp file
"indexHtmlPath": "../../iris_app.war/WEB-INF/views/jsp/app/index.jsp",
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": {
"path": "index.jsp",
"enable": true
},
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
When I refresh my app using sencha app refresh it updates classic.json file
With following paths
{"paths":
{
"Dimension":"../../../../../iris_s.war/regshoapp/app/view/components/popups/SelectDimensionsWindow.js",
"Ext":"../../../../../iris_s.war/ext/classic/classic/src",
"Ext.AbstractManager":"../../../../../iris_s.war/ext/packages/core/src/AbstractManager.js",
"Ext.Ajax":"../../../../../iris_s.war/ext/packages/core/src/Ajax.js"
….etc.
When I deployed this application on server and run on browser then I use this
url
localhost:7001/iris_ops_app/
When I run application on browser it throws file not found error on console for each Ext File which is mentioned in “classic.json” file but these files exist under “http://localhost:7001/iris_ops_app/regshoapp” path.
Please let me know how can I resolve this path issue on browser. Actually “iris_s.war” should be replaced by “iris_ops_s/regshoapp” in “classic.json” file only then it will resolve all paths.
Related
I created a simple react application using npx create-react-app and made minor modifications which looks like this initially.
Initial Page
I then build it and deployed it to S3 bucket. I have enabled static website hosting, enabled public access and set bucket policy as
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3-demo-react/*"
}
]
}
But the S3 bucket url displayed Blank White Screen like this
White Screen on Initial Deployment
I researched and came up with answer to add homepage to my package.json. My Package.json looks like this after the change.
{
"name": "s3-app",
"homepage": "./",
"version": "0.1.0",
"private": true,
I build the project and the asset-manifest.json inside build file has following code
{
"files": {
"main.css": "./static/css/main.073c9b0a.css",
"main.js": "./static/js/main.d4f30fdf.js",
"static/js/787.668da4e5.chunk.js": "./static/js/787.668da4e5.chunk.js",
"static/media/logo.svg": "./static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg",
"index.html": "./index.html",
"main.073c9b0a.css.map": "./static/css/main.073c9b0a.css.map",
"main.d4f30fdf.js.map": "./static/js/main.d4f30fdf.js.map",
"787.668da4e5.chunk.js.map": "./static/js/787.668da4e5.chunk.js.map"
},
"entrypoints": [
"static/css/main.073c9b0a.css",
"static/js/main.d4f30fdf.js"
]
}
I redeployed the application but the same issue persist.
Still the whitescreen with css and js 404
I watched few videos on deployment where all of them hosted their site even without specifying homepage in package.json and it worked as expected for them. Am I missing something here?
I have an ExtJS package with the following structure:
PackageA/
classic/
resrouces/
file.json
classic_resource.json
resources/
file.json
resource.json
When I build the app in production mode requiring the packageA, in the build directory I see the following:
./build/production/MyApp/classic/resources/PackageA/file.json
./build/production/MyApp/classic/resources/PackageA/classic_resource.json
./build/production/MyApp/classic/resources/PackageA/resource.json
It looks like both the shared package resources and toolkit (classic) specific are copied to the same directory (./MyApp/classic/resources/PackageA/), and if the same file exists already, it will simply be overwritten (file.json).
However, in my case the classic/resources/file.json and resources/file.json have different content and I require to keep them both in the build.
How can I achieve this?
[EDIT]
app.json
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
},
"framework": {
"path": "${build.id}/framework.js",
"enable": true
}
},
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${toolkit.name}/resources"
},
{
"path": "${build.id}/resources"
}
],
package.json
"output": "${package.dir}/build",
"resource": {
"paths": [
"${package.dir}/resources",
"${package.dir}/${toolkit.name}/resources"
]
},
Its happen because you create resources directory on toolkit's directory which should not be there.
Readme.md in the newly generated package
This classic-specific directory can include any (if not all) of the following directories:
overrides: Any classes in this directory will be automatically required and included in the classic build.
In case any of these classes define an Ext JS override (using Ext.define with an "override" property),
that override will in fact only be included in the build if the target class specified
in the "override" property is also included.
sass: Any classic-specific style rules should reside in this package, following the same structure
as the directory in the package root (see package.json for more information).
src: The classic-specific classes of this package should reside in this directory.
If you need resources separated by toolkit do it on package's root resources directory.
I'm trying to build a chrome extension using React and I managed to get my manifest.json set up as such:
{
"short_name": "GitMap",
"name": "GitMap",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_title": "GitMap"
},
"permissions": [
"tabs"
],
"version": "1.0"
}
. I want to access the url of the currently active tab using chrome.tabs.query({ "currentWindow":true}, function(tab) { blahblahblah}
within my React application's app.js file, but i'm receiving this error:
TypeError: Cannot read property 'query' of undefined.
How do i access the 'chrome' method from within a react file? Thank you
try this solution
chrome.tabs.getCurrent(function(tab){console.log(tab.url);});
I'm having issues requiring a custom theme package in my extjs 6 application. I created a custom theme package that extends the Triton theme, built the package and added the .pkg to the local repository. I then added the package to the requires block in my app's app.json file and ran sencha app refresh -packages. I am then presented with the following error:
rook$ sencha app refresh -packages
Sencha Cmd v6.0.2.14
[INF] Processing Build Descriptor : classic
[INF] Refreshing packages for build : classic
[ERR] Cannot satisfy requirements for "theme-neptune"!
[ERR] The following versions cannot be satisfied:
[ERR] new-test-theme: theme-neptune (No matches!)
[ERR] Cannot resolve package requirements
Here is my package.json file for my custom theme package:
{
"name": "new-test-theme",
"namespace": "New.test.theme",
"type": "theme",
"extend": "theme-triton",
"toolkit": "classic",
"creator": "pr-repo",
"summary": "Short summary",
"detailedDescription": "Long description of package",
"version": "1.0.1",
"compatVersion": "1.0.0",
"format": "1",
"slicer": {
"js": [
{
"path": "${package.dir}/sass/example/custom.js",
"isWidgetManifest": true
}
]
},
"output": "${package.dir}/build",
"local": true,
"sass" : {
"namespace": "New.test.theme",
"etc": "${package.dir}/sass/etc/all.scss,${package.dir}/${toolkit.name}/sass/etc/all.scss",
"var": "${package.dir}/sass/var,${package.dir}/${toolkit.name}/sass/var",
"src": "${package.dir}/sass/src,${package.dir}/${toolkit.name}/sass/src"
},
"classpath": "${package.dir}/src,${package.dir}/${toolkit.name}/src",
"overrides": "${package.dir}/overrides,${package.dir}/${toolkit.name}/overrides",
"example": {
"path": [
"${package.dir}/examples"
]
},
"framework": "ext",
"requires": [
]
}
And then in my applications app.json file I am requiring the package:
"requires": [
"font-awesome",
"new-test-theme"
],
I am running:
Sencha Cmd v6.0.2.14
and
ext-6.0.1
Can anyone see whats causing this error?
I think you need to set the theme property instead of adding it to your requires property.
Should look like:
"builds": {
"classic": {
"toolkit": "classic",
"theme": "new-test-theme"
},
"modern": {
"toolkit": "modern",
"theme": "new-test-theme"
}
}
I want to use socket.io in my sencha touch application
I added socket.io in my app.json js array :
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "lib/socket.io.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
here is where I want to create var socket :
var socket = io.connect('http://localhost:3000');
when I open index.html in browser I get this error :
ReferenceError: Can't find variable: io
how can I fix my application?