Greetings I have a problem with handlebars It won't read HTML in my file here is the screenshot of a problem with provided code. Folder structure is
- views
layouts
- main-layout.hbs
home.hbs
server.js
const express = require("express");
const session = require("express-session");
const bodyParser = require("body-parser");
const con = require("./database/dbConnect");
const bcrypt = require("bcrypt");
const validator = require("validator");
let app = express();
const hbs = require("express-handlebars");
let PORT = process.env.PORT || 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static("public"));
app.engine('hbs', hbs.engine({ extname: 'hbs' }));
app.set('view engine', 'hbs');
app.set('views', './views');
app.get("/", (req, res) => {
res.render("home", {
layout: "main-layout",
title: "Login",
});
});
app.listen(PORT, (err) => {
if(err) console.log("Error Occured: ", err);
console.log("Server is running on port: http://localhost:" PORT);
});
main-layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
{{ body }}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
home.hbs
<h1>{{ title }}</h1>
<p>Welcome</p>
CodePudding user response:
I found the solution to the problems it the
{{ body }}
It must be with 3 curly braces
{{{ body }}}