MERN Stack പഠനത്തിന്റെ 46-ാം ദിവസം

എന്റെ MERN stack പഠനയാത്ര തുടങ്ങിയിട്ട് 46 ദിവസമായി.

ഇന്നലെ ഞാൻ Tailwind CSS സെറ്റപ്പ് ചെയ്തു. ഇന്ന് ഞാൻ EJS templating engine പഠിച്ചു.

ഇന്നുവരെ എന്റെ HTML പേജുകൾ സ്റ്റാറ്റിക് (static) ആയിരുന്നു. അവയ്ക്ക് സെർവറിൽ നിന്നുള്ള മാറ്റങ്ങൾ കാണിക്കാൻ കഴിയില്ലായിരുന്നു.

EJS സെർവർ സൈഡ് റെൻഡറിംഗ് (server-side rendering) അനുവദിക്കുന്നു. ഇത് നിങ്ങളുടെ ബാക്കെൻഡിൽ നിന്നുള്ള ലൈവ് ഡാറ്റ ഉപയോഗിച്ച് HTML നിർമ്മിക്കുന്നു. നിങ്ങൾക്ക് HTML-നുള്ളിൽ നേരിട്ട് JavaScript ലോജിക് എഴുതാം.

ഇന്ന് ഞാൻ ഇത് സെറ്റപ്പ് ചെയ്ത രീതി ഇതാ:

  • വ്യൂ എഞ്ചിനായി (view engine) EJS ഉപയോഗിക്കാൻ ഞാൻ Express-നോട് പറഞ്ഞു.
  • എന്റെ ടെംപ്ലേറ്റുകൾക്കായി ഞാൻ ഒരു 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-യുമായി ബന്ധിപ്പിക്കാൻ സാധിക്കുന്നു.

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh