День 46 навчання MERN stack

Мій шлях у вивченні MERN stack триває вже 46 днів.

Учора я налаштував Tailwind CSS. Сьогодні я вивчив шаблонізатор EJS.

До сьогодні мої HTML-сторінки були статичними. Вони не могли відображати зміни з сервера.

EJS дозволяє рендеринг на стороні сервера (server-side rendering). Він створює HTML, використовуючи актуальні дані з вашого бекенду. Ви пишете логіку JavaScript безпосередньо всередині вашого HTML.

Ось як я це налаштував сьогодні:

  • Я вказав Express використовувати EJS як view engine.
  • Я створив директорію views для своїх шаблонів.
  • Я використав метод res.render для передачі даних на фронтенд.

Код виглядає так:

const express = require("express");
const app = express();
const users = require("./MOCK_DATA.json");

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

app.get("/users-list", (req, res) => {
    res.render("users", { allUsers: users }); 
});

app.listen(8000);

Цей метод миттєво пов'язує мої дані з UI.

Джерело: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh