You should link the bundle.js file into your header (like in production).
My public folder is served with express as a static folder expressjs.com/en/starter/static-fi...
So it hold every public JS files, images and css files. It's kinda like a dist folder.
I usually bundle my javascript in the /public/js/bundle.js path. Then in the bottom of my page (before the closing </body> to improve page loading speed) I include my script like so : <script src="/public/js/bundle.js"/>
Ok brilliant, that makes perfect sense. I suppose it's webpack that's minifying and tidying the code, so whether you're running dev or build affects what's actually in that folder, but not the location of the folder itself.
I'm understanding now that essentially express is sending html files, and depending on where you've specified the static files they're getting sent along too. If you use templates express will compile those templates into html and send them.
I'm guessing that if you use an SPA like react with express you'd have to specify that express send the built bundle along with a basic html page, and that's pretty much how the whole thing works.
I'm pretty sure this conversation has cleared up about 2 years of confusion for me! :)
Nodejs and ExpressJS are Server-side. Nodejs handle your code logic and execution like chrome would do client-side. And ExpressJS read every HTTP request sent to him and can send back information (HTTP basic response, a file, a stream, or an HTML page...).
But you can do all that Client-Side without really the needs of Nodejs and Express.
For example, you can configure a routing system with React, VueJS or vanilla Javascript, it work exactly like ExpressJS but Client-side. If you still need to communicate with a Database and perform some authentication or other stuff, you can create an API (with express js and Nodejs for example).
I personally prefer handling my routes server-side (the ExpressJS way), it's simpler to verify the permissions of your user like so. But it's good to know both way exist !
Just be careful about everything you send to your clients, Anyone can modify client-side code and grant themselve higher permissions or send false information, always have some back-end verification somewhere for sensible action or data access.
Hi Trystan,
Thanks for this, that's really helpful.
If I bundle with webpack, would I link to that bundle.js inside the header partial with EJS?
And another question, in the above folder structure, does your src folder get bundled into the public folder?
And final question: In production, how would I ensure that the client is sent the dist files?
Thanks again,
Raph
You should link the bundle.js file into your header (like in production).
My public folder is served with express as a static folder expressjs.com/en/starter/static-fi...
So it hold every public JS files, images and css files. It's kinda like a dist folder.
I usually bundle my javascript in the /public/js/bundle.js path. Then in the bottom of my page (before the closing
</body>to improve page loading speed) I include my script like so :<script src="/public/js/bundle.js"/>Ok brilliant, that makes perfect sense. I suppose it's webpack that's minifying and tidying the code, so whether you're running dev or build affects what's actually in that folder, but not the location of the folder itself.
I'm understanding now that essentially express is sending html files, and depending on where you've specified the static files they're getting sent along too. If you use templates express will compile those templates into html and send them.
I'm guessing that if you use an SPA like react with express you'd have to specify that express send the built bundle along with a basic html page, and that's pretty much how the whole thing works.
I'm pretty sure this conversation has cleared up about 2 years of confusion for me! :)
Nice to hear that !
Nodejs and ExpressJS are Server-side. Nodejs handle your code logic and execution like chrome would do client-side. And ExpressJS read every HTTP request sent to him and can send back information (HTTP basic response, a file, a stream, or an HTML page...).
But you can do all that Client-Side without really the needs of Nodejs and Express.
For example, you can configure a routing system with React, VueJS or vanilla Javascript, it work exactly like ExpressJS but Client-side. If you still need to communicate with a Database and perform some authentication or other stuff, you can create an API (with express js and Nodejs for example).
I personally prefer handling my routes server-side (the ExpressJS way), it's simpler to verify the permissions of your user like so. But it's good to know both way exist !
Just be careful about everything you send to your clients, Anyone can modify client-side code and grant themselve higher permissions or send false information, always have some back-end verification somewhere for sensible action or data access.
That's great, thanks for this! Many of the concepts I had an ok understanding of, but it's making more sense now.