We Keep Coding

Spring boot does not serve assets in resources folder when started with IntelliJ

I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│   ├── app.30790115300ab27614ce176899523b62.css
│   └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│   ├── backend
│   │   ├── src
│   │   └── target
│   ├── frontend
│   │   ├── build
│   │   ├── config
│   │   ├── node
│   │   ├── node_modules
│   │   ├── src
│   │   ├── static
│   │   ├── target
│   │   └── test
│   └── target
│   ├── classes
│   └── test-classes

Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.

How and when are the esm5 and esm2015 directories of a "ng build"-generated lib folder used?

In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0

As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

webpage deployed on heroku shows blank background unless F5 refresh the page

I am doing a group chat program using Python microframework flask, vanilla JavaScript and Flask-SocketIO. I already deployed it on heroku: https://chat-ya.herokuapp.com/.
However, the question is:
it works fine on local machine before I deployed it. But when I deployed it, open the website, the background image is
not showing, or
sometimes only part of it is showing, or
sometimes just flickers and becomes blank
I have tried to optimize the image's size, but still not working.
the data structure tree is:
static
│   ├── css
│   │   ├── index.css(main page css)
│   │   ├── channel.css(channel page css)
│   │   ├── bootstrap.min.cs
│   │   └── all.css
│   ├── images
│   │   ├── aircraft.jpeg
│   │   ├── ....
│   ├── js
│   │   ├── index.js(main page js)
│   │   ├── channel.js(channel page js)
│   │   ├── bootstrap.bundle.min.js
│   │   ├── jquery-3.3.1.slim.min.js
│   │   └── socket.io.js
│   ├── music
│      └── GrandmaSaid.mp3
└── templates
├── base.html
├── channel.html(channel page)
└── index.html(main page, extended from base.html)
Thanks in advance!!!

That's really an unfixable error - it has to do with the time between the browser loading the page and saying, Hey, can you get this image for me? and the server going I'll look for it - OK, found it, here you go! And of course, it'll be impacted if multiple people are on the page as well. So unless you find a faster web server, it's not really capable of loading faster. And you and Bootstrap may have some conflicting rules in CSS which mean that your image is partially cut off.
Ask me if you need any help with this!

Versioning of Angular node modules for publishing

While trying to publish Angular components on npm, I am not quite sure which folders and files should be included in the versioning process and which should be in the .gitignore.
I use the Angular CLI for publishing. The main code is in ./projects/nls-ngx-module/src/** and for transpiling I use the native angular command ng build --prod from inside the project folder. Inside dist/ a new folder arrives with the project title. Fine.
After transpiling, another node_modules folder is added to the project folder, which is not ignored by default. It only contains a .cache folder with subfolders and files. And that irritates me, because in other sample projects they do not appear, but they have not been ignored manually in the .gitignore either.
Folder structure
├── ...
├── projects
│   └── nls-ngx-module
│   ├── karma.conf.js
│   ├── ng-package.json
│   ├── ng-package.prod.json
│   ├── package.json
│   ├── src
│   │   ├── lib
│   │   │   ├── ...
│   │   ├── public_api.ts
│   │   └── test.ts
│   ├── tsconfig.lib.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── src
│   ├── app
│   │   ├── ...
│   ├── assets
│   ├── browserslist
│   ├── environments
│   │   ├── ...
│   ├── ...
├── ...
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
package-lock.json
# System Files
.DS_Store
Thumbs.db
Examples taken from:
mrsan22/NgxMatTypeahead
faxemaxe/ngx-cli-lib-demo

No, no modification of the .gitignore file has to be done. The ng build command was executed in the wrong directory.
Do not run ng build --prod or any similiar ng build command outside the root directory of the application. The node_modules folder is only created inside the projects directory when you run the ng build command inside the subfolders of the projects diretory.
Note
The ng build command distributes all necessary dependencies listed inside the package.json. Therefore there has to be a node_modules folder to bundle the built library correctly.

Setting up Angular phonecat application on node

Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│   ├── old
│   │   ├── format-json.sh
│   │   ├── goto_step.bat
│   │   ├── goto_step.sh
│   │   ├── README.md
│   │   ├── ScrapeData.js
│   │   └── snapshot.sh
│   ├── push-to-github.sh
│   ├── README.md
│   ├── retag.sh
│   ├── test-all.sh
│   └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.

If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.