I am new developing with node.js and I could not make handlebars render the html for my code. Both my addOEdit.hbs and list.hbs are not being rendered as html.
It is rendering the html itself as a text. I tried to all dependencies are installed. Like this:
My index.js file:
require("./models/db");
//Initializing dependencies
const express = require("express");
const path = require("path");
const handlebars = require("handlebars");
const exphbs = require("express-handlebars");
const {
allowInsecurePrototypeAccess,
} = require("@handlebars/allow-prototype-access");
const bodyparser = require("body-parser");
const studentController = require("./controllers/StudentController");
//initializing app
const app = express();
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.listen(3000, () => {
console.log("Server up and running on port 3000");
});
//Home page
app.get("/", (req, res) => {
res.send(`
<h2>Welcome to the students database</h2>
<h3>Click here to get access to the <b> <a href="/student/list">Database</a></b></h3>`);
});
//Setting Handlebars
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/views/"));
app.engine(
"hbs",
exphbs.engine({
handlebars: allowInsecurePrototypeAccess(handlebars),
extname: "hbs",
defaultLayout: "mainLayout",
layoutsDir: __dirname + "/views/layouts/",
})
);
app.use("/student", studentController);
My studentcontroller:
const express = require("express");
var router = express.Router();
const mongoose = require("mongoose");
const Student = mongoose.model("Student");
router.get("/", (req, res) => {
res.render("student/addOrEdit", {
viewTitle: "Insert Student",
});
});
router.post("/", (req, res) => {
if (req.body.id == "") {
insertRecord(req, res);
} else {
updateRecord(req, res);
}
});
function insertRecord(req, res) {
var student = new Student();
student.fullName = req.body.fullName;
student.email = req.body.email;
student.mobile = req.body.email;
student.city = req.body.city;
student.save((err, doc) => {
if (!err) {
res.redirect("student/list");
} else {
console.log("Error during insert: " + err);
}
});
}
function updateRecord(req, res) {
Student.findOneAndUpdate(
{ id: req.body._id },
req.body,
{ new: true },
(err, doc) => {
if (!err) {
res.redirect("student/list");
} else {
console.log("Error during update: " + err);
}
}
);
}
//Listing all students
router.get("/list", (req, res) => {
Student.find((err, docs) => {
if (!err) {
res.render("student/list", {
list: docs,
});
} else {
console.log("Error retrieving the list: " + err);
}
});
});
//Get student by id
router.get("/:id", (req, res) => {
Student.findById(req.params.id, (err, doc) => {
if (!err) {
res.render("student/addOrEdit", {
viewTitle: "Update Student",
student: doc,
});
console.log(doc);
}
});
});
//Delete student
router.get("delte/:id", (req, res) => {
Student.findByIdAndRemove(req.params.id, (err, doc) => {
if (!err) {
res.redirect("student/list");
} else {
console.log("Error in deletion: " + err);
}
});
});
module.exports = router;
Main Layout:
<html>
<head>
<title>Students</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
/>
</head>
<style>
#box { background-color: #fff; margin-top: 25px; padding: 20px;
-webkit-box-shadow: 10px 10px 20px 1px rgba(0, 0 , 0, 0.75);
-moz-box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, 0.75); box-shadow: 10px
10px 20px 1px rgba(0, 0 , 0, 0.75); border-radius: 10px; -moz-border-radius:
10px; -webkit-border-radius: 10px; border: 0px solid #000000; }
</style>
<body class="bg-info">
<div id="box" class="col-md-6 offset-md-3">
{{body}}
</div>
</body>
</html>
Appreciate any help!
