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.

CodePudding user response：

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.