Each controllers handle the https routes (GET, POST, PATCH etc...) and serve HTML content with EJS. My 'HTML pages' are located inside a view folder, with sub-foler if needed. For example I have a sub-folder named "Dashboard" where I have several .ejs files, one for the main page loadout, another for the User navigation bar, another for one particular panel and so on.
You can include EJS files with another EJS file like so :
<% include ../components/header %>
In each EJS files, you can include specific style (With <style></style>) and scripts (Width <script></script>). But it more clean to have your javascript bundled with Webpack (or equivalent) inside a single .js file.
And then simply add Jquery to your project and you are ready !
I have a little project I built for 3 months without using frameworks. It will not work out of the box, but you will have a good example of how I do it. The main file is the "app.js" in the main directory.
This kind of architecture is handful if you want to build something quickly without taking much time learning Typescript or any other frameworks. But you have to be careful about your code if you want to have something maintainable.
Thanks, Trystan - I am going back and fourth re: learning frameworks or going no-framework way. I've ready about benefits and downsides of both. For a newbie, do you recommend following something like you have linked or going with a framework?
My ultimate goal is to be able to launch side projects to generate some amount of income, if that helps.
If you want to gain experience to have a job, aim for a framework that is popular in your field of interest. Like React or Vue for JS frameworks or Symfony for PHP and so on..
I started my project without using any frameworks. I first liked it since I was able to prototype fast and create what I wanted without learning some heavy frameworks and reading a lot of documentation. But the project got messy very quickly. If you want to write Good code without frameworks, you need to read about code architecture and gain experiences by programming a lot.
That depend on your motivation and final goals. If it's just about making a project to get money, the type of project and the complexity could help you choose if you want to use a framework or not.
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.
I have something that can interest you.
I have my app.js file loading controllers (js files inside the Controller folder)
Each controllers handle the https routes (GET, POST, PATCH etc...) and serve HTML content with EJS. My 'HTML pages' are located inside a view folder, with sub-foler if needed. For example I have a sub-folder named "Dashboard" where I have several .ejs files, one for the main page loadout, another for the User navigation bar, another for one particular panel and so on.
You can include EJS files with another EJS file like so :
In each EJS files, you can include specific style (With
<style></style>) and scripts (Width<script></script>). But it more clean to have your javascript bundled with Webpack (or equivalent) inside a single .js file.And then simply add Jquery to your project and you are ready !
Here is my folder overview :
Hey Trystan,
I’m new to web dev and have been looking for an example of app building without framework. I feel this is closest I’ve seen.
Do you have an example project in your GitHub I could check out to see how this works?
Hi Tim.
I have a little project I built for 3 months without using frameworks. It will not work out of the box, but you will have a good example of how I do it. The main file is the "app.js" in the main directory.
github.com/Trystan-SA/Quested-Feed...
This kind of architecture is handful if you want to build something quickly without taking much time learning Typescript or any other frameworks. But you have to be careful about your code if you want to have something maintainable.
Thanks, Trystan - I am going back and fourth re: learning frameworks or going no-framework way. I've ready about benefits and downsides of both. For a newbie, do you recommend following something like you have linked or going with a framework?
My ultimate goal is to be able to launch side projects to generate some amount of income, if that helps.
If you want to gain experience to have a job, aim for a framework that is popular in your field of interest. Like React or Vue for JS frameworks or Symfony for PHP and so on..
I started my project without using any frameworks. I first liked it since I was able to prototype fast and create what I wanted without learning some heavy frameworks and reading a lot of documentation. But the project got messy very quickly. If you want to write Good code without frameworks, you need to read about code architecture and gain experiences by programming a lot.
That depend on your motivation and final goals. If it's just about making a project to get money, the type of project and the complexity could help you choose if you want to use a framework or not.
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.