Develop Reference

Fundamental Understanding of Node JS in the front end

Some things to know:
I understand how to make a HTML / CSS / JS website.
I understand how to make a Node JS app and host it on Heroku
I encountered a problem that was very confusing and I still working it out. I am making a firebase project using their latest tree-shaking V9 SDK
import { initializeApp } from 'firebase/app';
I understand Node JS is meant for backend (it can't be run in a browser) so how am I supposed to "build" this into something that I can reference in a script tag? I've heard of webpack but that requires you to run npm run build so how is that practical in any way? That would mean every change I make I would have to build it?
Developer Testing:
How would one live preview this Node JS app on a localhost if Node JS can't be run in a browser? I would live to be able to preview this Node JS app and quickly make changes if that's possible.

I've heard of webpack but that requires you to run npm run build so how is that practical in any way? That would mean every change I make I would have to build it?
Yes, that's the general idea. You make changes to script files on your local machine (or network), and then in order to see the changes take effect, you rebuild the app so that a new bundle is generated. This bundle can then be hosted on your web server or development server, and once it's there, you can refresh the page to see the differences.
But almost all of this can be automated, resulting in it not really being much of a chore at all.
Nodemon is a popular tool that watches a directory for changes and can run Node scripts when a change is detected. With it, you could, for example, make a change to a file, and then it'll automatically rebuild your app.
For Webpack in particular, there's webpack-dev-server, which can automatically refresh a page when the app gets rebuilt.
So, during development, the workflow can be as simple as - make a change, then alt-tab to your browser (hosting the app on localhost) to look at the changes.
Bundles built for the purpose of eventually hosting them on the front-end can easily incorporate Node modules - the build process can take the code from the module, and the bundle produced can include that code. This sort of thing is extraordinarily common.

LocalStorage is cleared after running yarn build

I have a React app and I am saving some simple data to LocalStorage. All works well across refreshes, etc.
But when I run yarn build to refresh the built web after pushing a change, this will clear somehow the local storage.
I have a server setup with nginx and a reverse proxy, my web app being served through pm2.
Is this something expected to happen? Why does it happen and can it be avoided?
Thanks!

Actually when you use yarn to run your code on browser it basically create a fresh session on browser on every refresh. therefore you loosing your data.

Thanks to #Aslam_khan reply I found the solution:
Use npm run build instead of yarn build if you want to prevent LocalStorage to be cleared up on every new build.

How to make sure javascript and css is cached in Angular app

I am reasonably new to angular (5), and have noticed that the javascript files (vendor.bundle, main.bundle, etc) are being reloaded each time I visit a page.
Is there anything in particular I should be doing to make sure that these are held in a browser cache after the first time they are loaded?
I guess I would need to add a cache-control header, but am not sure where to put it in the code, or whether this is something that the Angular-Cli could generate

Angular have lib called Service workers, which simply can be installed in cli project by below cli command
ng add #angular/pwa --project *project-name*
Note: project name can be obtained from angular.json
This command do the most required configuration but still some other stuff is needed, Which can be found on the flowing link service-worker confi. but some of this configuration already done by previous mentioned command. but also more configuration may be needed in "ngsw-config.json" file.
But unfortunately i tested this inside spring war and still the big files still downloaded every time without any caching but if i deployed on http server direct it work perfect.
Inside Spring War Result
For More Info. Please Check the blob of Angular Service Worker - Step-By-Step Guide for turning your Application into a PWA

Heroku / Node - how to add git commit on server

I'm learning Node and Git and I have a Heroku app that is reading and writing to a local file on the server (a very simple JSON database).
If I add the file to my gitignore locally, it disappears from my Heroku app and causes the app to error. But if I don't add it to my gitignore, it overwrites the latest version (on the server) with an old one I have locally.
Obviously the issue is because the changes on the server file aren't being committed. However, I don't know how to do that remotely, or if it's even possible. I can run heroku git:clone locally, but I can't run heroku:git add.
How do I handle this?

Generally, you should not commit a file that will be modified by the server.
It seems not a good idea because, as you said, this file will be overwrited by next push.
Usually you do not want to commit from your deployment branch, so it is not a good idea either to use git from server (and I doubt you can with Heroku).
Instead you could make your app check if the file exists and if not create that file on server.
That will work in a dedicated server you manage yourself, but Heroku doesn't work the same. Each push you make to your Heroku repository will in fact bundle your application before launching it on a dyno, and this process overwrite all the file, including your database JSON file, which will be no more persistent.
So I think you have no choice than switch to another storage method, for exemple subscribe a free Heroku postgreSQL plan or another database you prefer.

How to use New Relic with ember-cli?

right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.

Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.

At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.

I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.

Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.