Step 1
sencha -sdk C:/Users/lperepol/Downloads/SenchaEnterpriseExtJS/Unzip_7.xx/ext-7.3.1/ext-7.3.1 generate app -ext CDW ./CDW
Step 2
sencha app build
Then move the production folder to Web Server. App displays fine.
Step 3
Add a chart.
sencha app watch -- Chart displays fine.
Step 4
sencha app build
Then move the production folder to Web Server. App does not display web server error.
How do I get charts to display on a production web server? In development, everything works but not when moved to a Web Server.
Thank you for the response that led me in the right direction! Adding items to the requires array in the chart view solved the issue. The charts are displaying now on a remote web server --> CDW
requires: [
'Ext.chart.CartesianChart',
'Ext.chart.axis.Category3D',
'Ext.chart.axis.Numeric3D',
'Ext.chart.grid.HorizontalGrid3D',
'Ext.chart.grid.VerticalGrid3D'
'Ext.chart.interactions.ItemHighlight',
'Ext.chart.interactions.PanZoom',
'Ext.chart.series.Bar3D',
'Ext.chart.series.Line',
'Ext.chart.theme.*',
'Ext.draw.modifier.Highlight',
],
make sure in your app.json you have:
Charts in the requires section.
"requires": [
"exporter#7.3.1",
"calendar#7.3.1",
"charts#7.3.1",
"font-awesome"
],
a manifest defined in the bootstrap property.
The bootstrap section should be there but you may have to add the manifest property.
"bootstrap": {
"base": "${app.dir}",
"manifest": {
"path": "bootstrap.json",
"exclude": ""
},
"microloader": "bootstrap.js",
"css": "bootstrap.css"
},
Related
I am trying to deploy my react app on firebase but i get this image shown all the time.
Steps I did
firebase init
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
What do you want to use as your public directory? - public
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) - No
? Set up automatic builds and deploys with GitHub? (y/N) - No
File public/index.html already exists. Overwrite? (y/N) - No
Then I get `✔ Firebase initialization complete!
firebase deploy
then I get `✔ Deploy complete!
when i check the URL mentioned I see the message as shown in the screen shot Firebase Hosting Setup Complete.
When I also tried changing the path for public to "public": "public/firebase-auth-test",in Firebase.json file
{
"hosting": {
"public": "public/firebase-auth-test",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Definitely I am doing something wrong but unable to figure out.
this is my project structure if that helps
Please provide more details about your react project build.
i did a small extercise project to deploy a vue js application and you need to proper build your frontend project and then call the firebase hosting deploy.
Check the package.json and other relevant files to fix your setup.
I have EXTJS 6 app packed in web app (.war) deployed on jetty server behind apache proxy
Proxy is configured to proxy requests to my jetty node server
example:
https://my.domain/sencha << internet addess
is proxied to internal jetty server
http://jetty-node-1/my-sencha-webbapp << node address
Problem:
I don't know where to set /sencha uri in my extjs app as base path so that everything is loaded relatively from /sencha path instead of / path
Regards
Armando
I've solved it.
In app.json I added this setting
"base": "${app.dir}/sencha/"
Now it knows all about the relative path.
Snippet from app.json:
"production": {
"output": {
"appCache": {
"enable": true,
"path": "cache.appcache"
},
"base": "${app.dir}/sencha/"
},
}
please note that this creates sub folder ${app.dir}/sencha in which your production build will be.
Regards
Armando
I'm trying to update a react.js site that has been deployed to firebase. The updated content cannot be accessed without using an incognito window or using Dev Tools > Application > Clear Storage > Clear Site Data.
I'm sure this is a problem more strongly related to Firebase Hosting than React, but there seems to be potential interference between React's service-worker.js file and Firebase. Therefore, I have tagged React for completeness.
React Version: 16.8.6
Firebase CLI Version: 7.1.0
My steps are:
change code
$ npm run build
$ firebase serve --only hosting || firebase deploy --only hosting
visit .web.app or localhost:5000
Expectation: I will see the site with the new changes
Reality: I see the old site, without the new changes
Research and attempted solutions:
Setting the Cache-Control Headers
I have tried setting the Cache-Control headers to "no-cache" for service-worker.js in my firebase.json file.
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]},
This is clearly mentioned in the Create React App deployment documentation here:
https://facebook.github.io/create-react-app/docs/deployment
And in numerous Stack Overflow questions, such as the one here:
Firebase hosting - force browser to reset cache on new deploys?
Unfortunately, the problem persists, even when my firebase.json file is as shown below. This has led me to believe that there may be a new, more recent issue.
Fiddling with the Service Worker:
I have also done research around the service worker itself. It is currently set to 'unregister', but I have set it to 'register' and deployed multiple times with no noticeable change.
I am unsure whether it must be set to 'register', given the advice in #1 above.
****firebase.json****
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
****/src/index.js****
.....
const store = configureStore();
....
serviceWorker.unregister();
****directory structure****
/
firebase.json
firebase.src
build/
/static
service-worker.js
index.html
....
....
In the end neither Reactjs nor Firebase Hosting was the source of the problem. I'm just posting this incase someone is in a similar situation and doubts the configuration above, its the correct one, use it.
Redux-Persist's Persist Gate was not working as expected, causing the app to have mini-crashes every time it was redeployed. The crashes occurred before things like the version number could be updated, making the site look like it hadn't received the update.
Clearing the cache would solve the Redux-Persist problem, as it clears the data in the local storage, but this made me think it was a browser cache issue when it wasn't.
If you're using Redux-Persist & Persist Gate and seeing a very similar issue, take a good look at whether Persist Gate is allowing components to render before rehydration. I solved it by using the _persist object in Redux as a flag
In case someone has the issue. I resolve it by removing the .firebase folder at my root folder and add it to my .gitignore.
It keep in cache the previously build version for making deployment faster.
I got some trouble with multi-sites configuration.
I am trying to deploy my react app to Firebase (using firebase-tools).
The app was generated using this generator (which has deployment instructions in the readme). I followed them, but they didn't flag that Firebase overrides the index html, so they initial step replaced my html in the build file with the Firebase override. I copied my src/index.html back to the build file and re-ran the init, build and deploy calls.
I have an intercom script on the home page - the only part of the page that renders is the intercom icon. The rest of the page is blank.
I have seen this post. Like this user, I had to remove the predeploy script from my firebase.json because it was generating eslint errors.
The facebook create-react-app advice for Firebase hosting is to add an additional script to the firebase.json with:
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
],
I also tried this, but it doesn't change anything.
I tried removing, reinstalling npm and then cleaning the cache (in the functions folder). I have noticed that reinstalling node modules does not result in a functions/node_modules/eslint folder. I'm not sure why.
Others have suggested chrome/devtools/application/clear storage/clear site data. I have tried it but nothing changes.
Some posts attribute the problem to firebase-tools - although more recent posts suggest that the error that gave rise to that solution has now been remedied.
Has anyone found a solution for this problem?
In firebase.json - change public from 'build' to 'dist'
"hosting": {
"public": "dist",
I am going to build a nw.js (node webkit) app for portability (Mac and Windows). As I'd like the app to run on mobile devices (iOS and Android) later, I use Ionic framework. As suggested by Ionic folks, it's better to keep two sets of views, one for Ionic (mobile) and one for nw.js (desktop). Hopefully I can share codes in the controller and factory.
So, here is what I do:
1) Create a Ionic skeleton project:
ionic start --appname Hello Hello sidemenu
cd Hello
ionic serve
...
quit
2) Create an entry point html for nw.js and setup the manifest:
cd www
cp index.html app.html
and remove the following cordova-specific lines in app.html:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
then create a package.json:
{
"name": "hello",
"version": "1.0.0",
"description": "Hello World",
"main": "app.html",
"window": {
"title": "Hello",
"toolbar": true,
"frame": false,
"width": 800,
"height": 600,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
},
"author": "Horace Ho"
}
and run the app in node webkit:
nw .
Basically I created app.html and package.json in the www folder of an Ionic skeleton project. Now I have a nw.js skeleton project with both Ionic and angular frameworks.
My question is, does the above make sense? As long as there are two entry points (index.html for Ionic, app.html for nw.js), is it safe to add unrelated html/css/js within the www folder of Ionic? To further extend, I may replace Ionic by Bootstrap and leave only AngularJS codes (controller and factory) to be shared between the mobile and desktop apps.
Ionic is clearly mobile centric, so you would have to make at least some trade-offs on your desktop UI. Having two entry points will clearly solve this, and it will be safe (albeit not efficient) to have two separate html/css/js for both. However, I'd suggest to identify as much common code as possible at least for css/js and use it for both. Try to use sass/scss instead of plain css if possible.
If you want to have a single UI for both desktop and mobile, I'd suggest to have a look at angular material. I am currently developing a desktop/tablet app with it, for which it works very well, but angular material is clearly mobile first or at least very suitable for mobile. This makes it imho a better choice for mobile than Bootstrap, which I regard as desktop first.