How would you make a fullstack app without a frontend framework?

Hi guys,

I've got some questions that I really hope someone here might be able to help me with.

I'm trying to create a streamlined workflow for building a full-stack node app. I'd like to bundle my front-end assets with webpack, and then have Express serve those assets with a template engine (Pug or EJS). It would be great to also put those statics assets in a folder that can then be served by Nginx. My issue is that I often see index.html files in the frontend folder being bundled by webpack along with the static files. I'm assuming this is because it's for static sites, rather than web applications...but I might be wrong.

So my questions are these:

What is the right way to structure a fullstack app without a front-end framework, with webpack, where you use a template engine to render your html?

Should my views folder be inside my server folder? Or should it be inside the frontend folder?

OR

Am I completely missing the point?

I've being doing web dev for quite a long time but I've never got my head round this, so I'd really appreciate any help.

Thanks

Comments

[Arne]

Assuming that the application is not going to consist of dozens of different views, here’s how I do it: my main elements consist of a base page (templates/base.html) partials (/templates/partials/_footer.html etc.). Base loads all these partials and has a placeholder for the view-specific contents. You might want to set up different base and partials, eg when logged users should see different things

[Trystan Sarrade]

I have something that can interest you.

I have my app.js file loading controllers (js files inside the Controller folder)

const Showcase_CTRLR = require('./Controller/Showcase_CTRLR');
app.use(Showcase_CTRLR);

const Authentification = require('./Controller/Authentification');
app.use(Authentification);

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 !

Here is my folder overview :

|- [Controller]
|--- Authentification.js
|--- Dashboard.js
|--- Showcase.js
|- [public] (Public folder, images, js files)
|- [src] (Sources files, Sass, Js...)
|- [views]
|--- [Dashboard]
|---|--- NavigationUser.ejs
|---|--- PanelA.ejs
|--- Index.ejs
|package.json
|app.js

[Raphael Hetherington]

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

[Trystan Sarrade]

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"/>

[Raphael Hetherington]

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! :)

[Trystan Sarrade]

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.

[Raphael Hetherington]

That's great, thanks for this! Many of the concepts I had an ok understanding of, but it's making more sense now.

[Tim Lee]

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?

[Trystan Sarrade]

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.

[Tim Lee]

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.

[Trystan Sarrade]

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.

[Tim Lee]

Hey Raphael,

Did you ever follow Trystan’s structure and build an app without a frame work? Looking for an example and this might come close.

[Raphael Hetherington]

Hi Tim,

I actually didn't persist with this because I'm primarily working with React now, however I think Trystan's structure is pretty good. The primary thing to remember is that since JS is just static files then you can serve it as such from your web server, and just make sure that each of your templates is hooked up to those static files. How you structure it (MVC or whatever other design pattern) is up to you. Let me know how you get on though!