MERN Stack ಕಲಿಯುವಿಕೆಯ 46ನೇ ದಿನ

ನನ್ನ MERN stack ಕಲಿಕೆಯ ಪ್ರಯಾಣದಲ್ಲಿ ನಾನು ಇಂದು 46ನೇ ದಿನದಲ್ಲಿದ್ದೇನೆ.

ನಿನ್ನೆ ನಾನು Tailwind CSS ಅನ್ನು ಸೆಟಪ್ ಮಾಡಿದೆ. ಇಂದು ನಾನು EJS templating engine ಅನ್ನು ಕಲಿತೆ.

ಇಂದಿನವರೆಗೆ ನನ್ನ HTML ಪುಟಗಳು ಸ್ಟ್ಯಾಟಿಕ್ ಆಗಿದ್ದವು. ಅವು ಸರ್ವರ್‌ನಿಂದ ಬರುವ ಬದಲಾವಣೆಗಳನ್ನು ತೋರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತಿರಲಿಲ್ಲ.

EJS ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (server-side rendering) ಅನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್‌ನಿಂದ ಲೈವ್ ಡೇಟಾವನ್ನು ಬಳಸಿ HTML ಅನ್ನು ರಚಿಸುತ್ತದೆ. ನೀವು ನಿಮ್ಮ HTML ಒಳಗೇ ನೇರವಾಗಿ JavaScript ಲಾಜಿಕ್ ಅನ್ನು ಬರೆಯಬಹುದು.

ಇಂದು ನಾನು ಇದನ್ನು ಹೇಗೆ ಸೆಟಪ್ ಮಾಡಿದೆ ಎಂದರೆ:

  • Express ಅನ್ನು view engine ಆಗಿ EJS ಅನ್ನು ಬಳಸಲು ನಾನು ಸೂಚಿಸಿದೆ.
  • ನನ್ನ ಟೆಂಪ್ಲೇಟ್‌ಗಳಿಗಾಗಿ ಒಂದು 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