I'm trying to include a javascript file which is not available as bower.
So I copied it to src/main/webapp/content and referenced in index.html
In the DEV profile all is fine -- it works.
Now, after generating WAR file with the PROD profile, the custom.js file is not included in the WAR (tried to unpack -- file is not there).
I have discovered the gulp is merging all css and js files, did I miss a config for this?
When the app is loaded, the browser complains with 404 in the index.html -- js file not found.
How can I fix this? What is the right way to include JS (or CSS) file into JHipster app?
Thank you.
JS are not expected to be in content folder.
For CSS, copy your file to src/main/webapp/content/css.
For JS, copy your file to src/main/webapp/app possibly in a dedicated sub folder.
You don't have to inject them in index.html, gulp will do it for you. I suppose you did not see it in dev profile because you were not running gulp serve as explained in the doc
Related
I am working on an Electron app.
I have several JSON files from my src folder that need to be copied over to a user-folder during app initialization (settings, config, etc).
It works well when on dev mode and when I do import the JSON files.
But based on how I need it, readFileSync is the best way to implement this.
var srcPath = path.resolve(__dirname, '../config/settings.json')
fs.readFileSync(srcPath)
I am getting an error though when running the packaged exe app (in asar).
Getting error messages like this:
Error: ENOENT: no such file or directory, open
'C:\Users\username\Desktop\NodeJS\branches\Electron
\myApp\dist\electron\My-App-win32-x64\resources\config\settings.json'
readdirSync() also does not work for the same reason.
I understand that my relative path is different in the packaged version
I checked the asar file and I can't seem to find my JSON files. Not sure if I am checking correctly though since it is bundled up by Webpack.
My file in this example is located in:
C:\Users\username\Desktop\NodeJS\branches\Electron\myApp\src\config\settings.json
How can I make this work?
Is there a way to force electron (I am using Electron-Packager with Quasar framework) to include my JSON files in the packaged app?
Does Webpack not bundle up the JSON files??
Thoughts? Help please!
As a workaround, I just created a folder that will contain 'post-packaging' scripts. One of which does a copy from my src folder to my dist\electron\appName\resources folder (using robocopy).
I'm making a web page index.html say.
I used to download jQuery.min.js and put it in the same folder and add to index.html the tag `".
Then I got a bit more sophisticated and replaced the src with the URL of a CDN.
Now I've been told that I have to use npm and webpack. I see that npm creates a folder node_modules. So do I just src="node_modules/jquery/jquery.min.js"?
Refer here
You simply place it under scripts: array in your webpack configuration file.
I am trying to add dashboard to my JHipster project, but I have a problem with node_modules. I added paths to js scripts in index.html, e.g.: , and when I tried open site I am receiving "Not found". Any ideas? Should I add js file to webpack?
I've read over the documentation and I cannot seem to find a clear answer as to the proper directory structure for a node application (insert downvotes here).
When I create an application directory off the root. All js, css, and img directories will be based of this application directory. My confusion comes in where when I install mdBootStrap using npm it creates the node_modules and mdbootstrap directory as expected, but then down these chains of directories it creates it's own js and css directory as well.
So back in the main application directory, in the HTML files, when I reference bootstrap and jquery files for example, am I forced to reference all the way down the node_modules directory, or has the mdBootStrap actually become my new application directory.
If you are using express you can expose your node_modules dependancy folder through your routing by adding a static route.
var application = express();
application.use('/mdbootstrap', express.static(__dirname + '/node_modules/mdbootstrap'));
Other options are using gulp build tasks to include the node_module dependancies in your output build.
So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.