Day 46 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 46 of my daily coding run toward full-stack MERN mastery! Yesterday, I configured Tailwind CSS for modern utility styling. Today, I unlocked the ultimate bridge between backend data and frontend layouts by learning how to implement the EJS (Embedded JavaScript) Templating Engine!

Up until yesterday, my HTML pages were completely static. If data changed on the server, the UI couldn't reflect it. Today, I learned how to build server-side rendered (SSR), fluid templates that generate HTML dynamically on the fly based on live backend data streams!

---

🧠 Key Learnings From Node.js Lecture 13 (EJS & Server-Side Rendering)

EJS lets us inject pure, standard JavaScript logic directly inside HTML markup. Here is the technical breakdown of how I configured it today:

1. Registering the Template Hub

I learned how to configure Express to drop static HTML asset lookups and look into a dedicated templates directory (views). Initialized it cleanly with a single config setter:

javascript
app.set("view engine", "ejs");
const express = require("express");
const app = express();
const users = require("./MOCK_DATA.json"); // My mock local data

app.set("view engine", "ejs");

app.get("/users-list", (req, res) => {
    // Injecting the raw users array straight into our dynamic interface template!
    res.render("users", { allUsers: users }); 
});

app.listen(8000);