Ext JS 5.1 Sencha CMD adding external css file - extjs5

I am creating an Ext JS application using sencha cmd V5.1. I am trying to load external css file, but it is not working.
My external css file location:
resources/css/customStyle.css
In the app.json file I added the path to the external file.
"css": [
{
"path": "bootstrap.css",
"bootstrap": true
}, {
"path": "resources/css/customStyle.css"
}
],
But when I am using the cls class defined in the "customStyle.css" in the application, it is not working.
Please help me how I can use the external css file using Sencha CMD.

When you are including css files in app.json, you have to first run
sencha app refresh
and then
sencha app build development
After that sencha cmd will create bundled css files, which should also include your custom styles.
The bundled css files are usually located in
build/development/YOUR_APP/
If the bundled CSS files are not generated you could try running sencha cmd with --debug flag
sencha --debug app build development

Related

Autodesk Viewer Markup extension - can't compile from sources

I'm trying to achieve similar viewer annotations like official demo:
lvm-react
I read official blog post and use files from Autodesk Extensions github:
http://adndevblog.typepad.com/cloud_and_mobile/2016/04/markup3d-sample-for-view-data-api.html
But I can't compile extensions from sources (create bundle.js). Tried just npm install, but there are many errors like:
ERROR in ./src/Viewing.Extension.VisualReport/PieChart/PieChart.js
Module not found: Error: Cannot resolve module 'EventsEmitter' in MY_FILES
and
ERROR in ./src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss
Module parse failed: /MY_PATH/library-javascript-viewer-extensions-master/src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
I also installed webpack using npm, but without result, there are still many errors.
There was a few loaders missing from the webpack build production config. It is fixed now and you should be able to build all extensions. Please use the latest version from the repo.
When testing your extensions, I recommend you use npm run build-dev command, so the generated extensions files will not be minified and have source-map enabled, so you can easily debug them in browser console. When building for production, you can use npm run build-prod.
You can also remove the various entries from the webpack config to build only the extensions you are interested in, for example:
module.exports = {
devtool: 'eval-source-map',
entry: {
'Viewing.Extension.Markup3D':
'./src/Viewing.Extension.Markup3D/Viewing.Extension.Markup3D.js',
},
// ... rest of the config ...
You may also want to change the output path, in my config the output is outside of the extensions directory, directly in the project using them:
output: {
path: path.join(__dirname, '../../App/dynamic/extensions'),
filename: "[name]/[name].js",
libraryTarget: "umd",
library: "[name]",
watch: true
},
In addition to including the extension file to your project, you should also make sure that you include the babel polyfill (from node_modules/babel-polyfill/dist/polyfill.min.js) before any extension script.
Hope that helps, let me know if you have any further trouble using those extensions.

How to build Angular2 app with external json file using angular-cli in prod mode?

My Angular2 app is using ng2-translate module and 'en.json' file contains translation.
This is all working well in dev mode when built end deployed with angular-cli.
But when built in prod mode, and deployed to WildFly, en.json is not found and translation is not loaded.
How to build app in prod mode, so en.json is packed inside dist directory?
Yes, this issue is related to the webpack configuration employed by angular-cli. In the current state the ng build command keeps content of src/assets directory in the dist directory.
So you can put your files needed to the src/assets - they should be present in a dist build.

Firebase not running index.html file

I'm a pretty new programmer going through the Firebase tutorial. I have gone through steps 1-5 of the tutorial (https://codelabs.developers.google.com/codelabs/firebase-web/#5). I've added the "Add Firebase to your web app" js code to the html file, and set up the Firebase CLI. However, when I run the firebase server, everything seems to work other than it is not showing the code from the index.html file.
I am in the right directory, and my console says "Server listening at: http://localhost:5000." But, at localhost 5000, it shows a generic "Welcome to Firebase Hosting: You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!" box rather than the app interface code in the index.html file. It is the only html file in my directory. It seems like I am missing something very simple. Thank you for your help.
The website shown to you is the index.html from your public folder (or whatever you configured it to be in your firebase.json file).
The culprit might be firebase init. It tries to generate a generic index.html file for you. However, in the latest version, it should at least ask you whether or not to override (which it did not in the past!).
The problem is firebase init being unbelievably crude. It just overrides the index.html file that was in your public folder... no confirmation, no safety net, no nothing.
If you lost, or accidentally let firebase init overwrite, your index.html file, you have to re-produce it somehow. If you do not have a backup of or other means of re-producing your index.html file... well... too bad!
How does the firebase CLI work?
Generally, the steps of a firebase setup go a little like this:
firebase login
firebase init
your-build-command-here # (if you have a build pipeline)
firebase deploy
You only need to do Step #1 (login) the first time when you setup building on that machine (or maybe when a new firebase revision has been released)
You only need to do Step #2 (init) to initialize a new project. That is, when you don't have your firebase.json yet (which will be created by the init command).
To re-deploy, it's simply:
your-build-command-here # (if you have a build pipeline)
firebase deploy
I figured out my answer. The index.html file that was being posted was in the "public" file, which was created during the "firebase init" stage. I replaced that placeholder html file with the one for my app.
Firebase hosting not showing up app?
There might be two reasons for this problem
1st step:
Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html
for reference (dist is standard but your may different)
{ "hosting": { "public": "dist"} }
2nd step:
Make sure to configure your base href in project's index.html
as
<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">
and other bundle files as
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">
3rd step run command - firebase deploy
enjoy ! ;)
New projects
when doing firebase init select the directory which contains the index.html as the public directory.
Existing projects
update firebase.json with
"hosting": {
"public": "dist/directoryThatContainsIndexHtml",
......
}
Edited Original Answer: Available in edit history. Only for testing purposes.!! for production, use the updated version. Contents of dist are rewritten on each build so anything you place #dist are gone each time you build.
For anyone else comming across this.
Try launching in incognito mode - the browser was cached for me.
https://stackoverflow.com/a/56468177/2047972
first of all you need to check your index.html after deployment of project. after these command steps:
firebase login
firebase init
firebase deploy
your real index.html file might be overwrite by firebase generic file that's why the problem is occurred. so change code of index.html after deployment of project. if you see this box on your web page
Tip: copy your complete project anywhere in your PC before deployment.
otherwise check your directory for file path your path of index.html is must correct.
In my case when I run the command ng build --prod it created a sub folder under dist folder. Assume my project name is FirstProject. I can see a sub folder called FirstProject inside dist folder (dist/FirstProject).
Give dist/[subDirectory] as your public directory
What do you want to use as your public directory? dist/FirstProject
This solved my issue
For deploying Angular application to Firebase simple and quick tutorial
you can find here.
During the process of firebase init, type N, when the question
"File dist/index.html already exists. Overwrite?" appears, and your page will be displayed as it should be.
In public folder option write dist/your-folder-name.
This will allow you to render your index file which is in your folder.
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open
Select the following after scrolling down
Hosting: Deployed Site
When you build your Angular app, at least with Angular 10, by default Angular creates a folder names dist, containing a folder having the name of the application. For example, this example’s app is named blog-front, so when building the project (ng build or ng build -- prod), Angular will create a folder dist, containing a folder named blog-front:
When you reach the firebase init step asking the public directory, your folder's name should be “dist/blog-front” for this example, or “dist/yourApplicationName” as a general rule :
In my case firebase was using the wrong directory, also see here: firebase CLI didn't recognize the current project directory for 'firebase init'. While I was expecting firebase to put all created files into my project directory it was totally disconnected and put all files into my /Users/MyUserName directoy and deploying the wrong index.html from there.
This is how to fix it (no reinstall of firebase needed as suggested in the linked post):
delete all created firebase files from /Users/MyUserName directoy (.firebaserc, firebase.json, index.html and dist-folder)
run firebase init on project directoy
use dist/projectname as public directory
Configure as a single-page app "Yes"
do not overwrite index.html (if you do, make sure to "ng build" again before deploying)
firebase deploy
By the way, for everyone who is using Angular 7, this tutorial about deploying an angular 7 app to firebase hosting was really helpfull to me.
I faced similar situation. When we run firebase init it asks couple of questions. At that time we mention the directory path from where firebase will take all files to deploy.
Make sure that, directory contain index.html.
Delete the index.html which is present in dist folder.
Then run the following commands:
firebase login
ng build --prod
firebase init
firebase deploy
This Worked for me
First Stop the project and follow these steps
npm install -g firebase-tools
firebase login
firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
After initialization is completed makesure to delete the created dist file before next steps
ng build --prod
firebase deploy
You are seeing this error because you didn't run the command:
npm run build
make sure you use it before firebase deploy
and also make you are incorrect directory.
execute this after finishing firebase init process.
If you get a public folder with ready index.html by firebase init. You can simply replace that index.html with yours and use the command:
firebase deploy
That should be enough to get it working. Make sure all the files are where they should be!
Working Solution
Just do
flutter build web, then
flutter deploy.
firebase init tries to generate a generic index.html file for you, and if it did that, then you first have to do flutter build web so that the index.html you need is generated, rather than the generic one, and then again flutter deploy
Please follow the step
npm install -g firebase-tools
If you already have a dist folder, remove it from directory
firebase login
ng build --prod
firebase init
firebase deploy
index.html file has that firebase default information.That's why it is showing that information. Copy and paste index.html from your original angular file and paste it to dist index.html. This fixed my issue.
You should add your files to public directory folder before deploy it into firebase server(your app's index file should be there).
My solution is just waiting a bit.
Then, if it still not working.
let try:
Solution 1: check your index.html inside "build" folder and index.html in your own project. They should be the same, if not, copy code index.html outside "build" folder and paste into index.html inside "build" folder.
solution 2 : delete your .firebase folder. and init it again.
=> firebase init
? What do you want to use as your public directory? build < == NOTE: "build" is my directory
? Configure as a single-page app (rewrite all urls to /index.html)? No <== select NO
? File build/404.html already exists. Overwrite? No <== select NO
? File build/index.html already exists. Overwrite? No <== select NO
After doing these things, I also get that notification of "Welcome Firebase Setting Host Complete" , and I just wait for a while. then reload the website.
Changing the default HTML page name in the public folder to index.html worked for me.
Also, make sure you do not rewrite the index.html when firebase prompts you to in the firebase init step(follow the attached image).

Firebase deploy error on public key / directory

I am building an IOS app using Firebase. I have an error when I try to deploy
"Error: Specified public directory does not exist, can't deploy hosting"
I have been following the hosting guide here Guide Link But being new learner, I am not understanding what should I put in firebase.json
So my code in firebase.json
{
"firebase": "xxxxxx", //(my app name)
"public": "/usr/local", //(I am not sure what should i put in here)
"ignore": [
"firebase.json",
"**.*",
"**/node_modules/**"
]
}
I am not sure what should I put in "public" property. I think that is the reason why I get the error. I don't understand what public directory mean in here.
Easily deploy and host your app's static assets (HTML, CSS,
JavaScript, etc) with our production-grade hosting service. All of
your content is served over HTTPS and backed by a global CDN.
It cleary states only static thing is expected to be hosted.
In "public" you are supposed to put dist (distribution) folder distination, In web apps Its a folder that contains all assets to keep app up and running on firebase hosting service.
Above answer is to clear Concept, Provide more details of your app and structure for further help.
what are you building your app with?
I imagine the cause of the error is that you need to generate a 'dist' folder for your app and you haven't done that yet before running 'firebase deploy'.
Check the firebase.json file in your project directory, it will show you that Firebase is looking for a dist folder to read from.
IF it can't find it, you will get the error that you have.
For instance, if it is an Angular2 application and you use the Angular-cli, just do the following:
Run the command 'ng build' in your project's root directory.
This command will generate a 'dist' folder from the 'src' folder where you wrote your application code.
Then run '
firebase deploy'.

How to Deploy html project using gradle in libgdx

I have successfully run my html project using following command
gradlew html:superDev
And after that I run "gradlew html:dist" command .
This compiled my app to Javascript and place the resulting Javascript, HTML and asset files in the html/build/dist/ folder.
Now my question is how to use this "dist" folder to run my project on server.
I tried to upload this "dist" folder on my server and then runs it's index.html file but only superDev Refresh button appears.
Please tell me what are the steps to follow after creating the dist folder ?
Which files and folder should I upload on server ?
Hi I solved it by taking following steps:-
In eclipse I right click on html project and compile it using GWT compile.
2 then run the html project as web application.
3 After successfully launching of the game I copy all the folders excepts WebInf from the war folder and place them in a new folder then upload it on server.
That's it.
But through Gradle I did not get any success.