Home > Blockchain >  express-handlebars won't read html in main-layout expressjs
express-handlebars won't read html in main-layout expressjs

Time:03-08

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

The Problem

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 }}}
  • Related