How added my-custom.css file in app.json or bootstrao.json files
app,json
{
"name": "My App",
"requires": [
],
"id": "166372b1-e416-4921-8ef2-2495765b9d76"
}
bootstrap.json
/**
* This file is generated by Sencha Cmd and should NOT be edited. It is a
* combination of content from app.json, and all required package's package.json
* files. Customizations should be placed in app.json.
*/
{"id":"166372b1-e416-4921-8ef2-2495765b9d76","js":[],"css":[]}
I think you're asking about adding CSS files to your application's app.json file. Basically, you need to add the following section to app.json then run sencha app build (which will update bootstrap.json for you).
"css": [
{
"path": "resources/css/my-styles.css"
}
],
However, a project initialized with Sencha Cmd would've had this section with helpful comments. Take a few minutes to become more familiar with Sencha Cmd and how you can use that to manage your project's files and build process:
http://docs.sencha.com/cmd/4.0.0/#!/guide/command_app_ext42
Related
I am trying to add accessibility to a large web application built with react and webpack. This requires going back to the source files from the app. Is there a way to see which file the code originally came from? Inspect element and view source are nice but I can't find the path to the source file where the code was generated from. Is there a way to do this in dev tools (chrome or firefox developer edition) or am I stuck with searching my entire project src folder for code that will point me to the file? It is a single page application so it is not as easy as checking the url.
EDIT: we also use babel
EDIT2: changed name to clarify I am looking for the original source code path to the file
for that you have to use .babelrc and add this line into file
"sourceMaps": true
after adding this in chrome > source tab it will show all the files with same name as code and the code also will be in es6 or above (same as what you write).
example config:
{
"presets": ["es2015"],
"plugins": [
"transform-object-rest-spread",
[
"import",
{
"libraryName": "lib",
"libraryDirectory": "./src"
}
],
["module-resolver", {
"root": ["./src"],
"alias": {
"database": "./src/database",
"localization": "./localization",
"utils": "./utils"
}
}]
],
"sourceMaps": true
}
Let me know if you have any other issue still.
For getting file path you can right click on the file title tab and click on "Reveal in sidetab"
if you want to open file just press cmd + p and search for file name there you will see 2 files with same name. you have to open one witch dont have webpack-internal prefixed.
Also you can open side tab and there you will find your same folder structure as you do have in your project. in webpack dir.
I'm encountering the Manifest file is missing or unreadable error when trying to load my unpacked Chrome extension. I'm building the extension as a react app, so the file structure looks like this:
I understand that the manifest.json needs to be in the root folder, not in public the way react usually lays it out. When I move it to the root however, it breaks the connection to app.js and my popup only loads index.html with none of the javascript connected.
This is how my manifest is laid out:
{
"manifest_version": 2,
"name": "My Extension",
"description": "This extension is a starting point to create a real Chrome extension",
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"16": "/public/images/get_started16.png",
"48": "/public/images/get_started48.png",
"128": "/public/images/get_started128.png"
},
"permissions": [
]
}
Not sure if you've figured this one out already since its been awhile since someone answered, but once you are done, do npm run build. This should create your "build" which will have your manifest file, after that, load unpackaged "build" folder.
Hope this helps.
In Order to solve this issue :- Click on
Pack extension give a complete path Extension root directory click on Pack extension
Now click on Load extension.
you can see in your current folder two extra file generated on is .pem and .ctx file.
its working now
I was trying sencha 6.5, I've created a package using
sencha generate package DemoPkg
This has created a package for me, but I do not find directories for classic and modern inside it. Did anyone faced this issue? Any suggestion or help on this will be much appreciated.
As per sencha guide the structure of package should have following structure,
packages/
local/
foo/ # Top-level folder for the package
.sencha/
package/
sencha.cfg # Sencha Cmd configuration for this package
build-impl.xml # Generated build script for package
plugin.xml # Sencha Cmd plugin for this package
codegen.json # Data to support 3-way merge in code generator
classic/ # Classic toolkit-specific src code
examples/ # Example applications demonstrating the package
licenses/ # License agreement
modern/ # Modern toolkit-specific src code
overrides/ # Folder for automatically activated overrides
resources/ # Static resources (typically has images folder)
sass/ # Container for styling code
etc/ # General, non-component oriented styling
example/ # - internal use
src/ # Style rules named by component
var/ # Variables and mixins named by component
src/ # Folder for normal JavaScript code
build.xml # Build script (called by `sencha package build`)
package.json # Package descriptor
Readme.md # High-level information about this package
Sencha CMD will not generate the toolkit folders as mentioned in the docx and there is no options to do it, only we can mention the toolkit type for theme package. so we need to manually create the folders similar to universal app(both classic & modern) and update the package.json with path ${toolkit.name} like below
"resources": [
{
"path": "resources"
},
{
"path": "${toolkit.name}/resources"
}
],
"sass": {
"namespace": "UniversalPkg",
"etc": [
"${package.dir}/sass/etc/all.scss",
"${package.dir}/${toolkit.name}/sass/etc/all.scss"
],
"var": [
"${package.dir}/sass/var/all.scss",
"${package.dir}/sass/var",
"${package.dir}/${toolkit.name}/sass/var/all.scss",
"${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"
],
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
In my app, I have support for multiple languages.
Each languages ownsa .js files which contains one single object with every 'displayable string'.
The system totally works on desktop (chrome or safari) but on mobile it does not at all.
With alerts I found that whenever i was reaching for fields inside my language objects, it was not working.
Form that I guess my .js files are not bundled in my build when I Simulate on IOS via Sencha Architect.
Would someone help me do the job correctly?
Hand edit your app.json file so it look like this, architect doesn't do it itself.
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
},
{
"path": "PATH/TO/FILE.JS"
}
],