Handlebars files not beig rendered in localhost

Question

I am compeltely new to Handlebars.js and I'm still learning JavaScript as well. I am trying to build a webpage in Visual Studio Code, and visualize it in localhost with the help of WAMP server. The purpose of the page is to create a very basic user management system, but I can't get through the most basic part, which is viewing the page at web. I'm using .hbs files instead of .html files, and I'm having trouble to render them. Instead, what I have in localhost is: Here are my paths:

And here are my codes:

app.js

const express = require('express');
const app = express();
const exphbs  = require('express-handlebars');

const bodyParser = require('body-parser');
const mysql = require('mysql');

require('dotenv').config();
const port = 5000;

// Parsing middleware
// Parse application/x-www-form-urlencoded
// app.use(bodyParser.urlencoded({ extended: false })); // Remove
app.use(express.urlencoded({extended: true})); // New

// Parse application/json
// app.use(bodyParser.json()); // Remove
app.use(express.json()); // New

// Static Files
app.use(express.static('public'));

// Templating Engine
app.engine('hbs', exphbs({
    defaultLayout: 'main',
    exphbs: '.hbs'
}));
app.set('view engine', 'hbs');

// Routes
const routes = require('./server/routes/user');
app.use('/', routes);

// Listen on port 5000
app.listen(port, () => console.log(`Listening on port ${port}`));

//novo
app.get('/', function (req, res) {
    res.render('home');
});

main.hbs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Management System</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">User Management System</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/">Home</a>
          </li>
        </ul>

        <form class="d-flex" method="POST" action="/" novalidate>
          <input class="form-control me-2" type="search" placeholder="Search" name="search" aria-label="Search">
          <button class="btn btn-outline-light" type="submit">Search</button>
        </form>

      </div>
    </div>
  </nav>

  <div class="container pt-5 pb-5">
      {{{body}}}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>
</body>

</html>

home.hbs

{{#if removedUser}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
  User has been removed.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/if}}

<div class="row">
  <div class="col-6">
    <h1>Users</h1>
  </div>
  <div class="col-6 d-flex justify-content-end">
    <a href="/adduser" type="button" class="btn btn-primary align-self-center">+ add user</a>
  </div>
</div>

<table class="table table-bordered">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col" class="text-end">Action</th>
    </tr>
  </thead>
  <tbody>

    {{#each rows}}
    <tr>
      <th scope="row">{{this.id}}</th>
      <td>{{this.first_name}}</td>
      <td>{{this.last_name}}</td>
      <td>{{this.email}}</td>
      <td>{{this.phone}}</td>
      <td class="text-end">
        <a href="/viewuser/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-eye"></i> View</a>
        <a href="/edituser/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-pencil"></i>
          Edit</a>
        <a href="/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-person-x"></i> Delete</a>
      </td>
    </tr>
    {{/each}}

  </tbody>
</table>

Any ideas on how I got this wrong?

I am confused. WAMP is for serving PHP web applications with Apache. Your code is using Express, which is for serving Node JS web applications with a Node JS server. Presumably, one you have started your Express app, you are able to load it at http://localhost:5000. What are you trying to do with the WAMP server? — 76484, Jun 19 '21 at 15:37
Because localhost:5000 doesn't open, it looks like this: https://imgur.com/V0CHQg2 — pkrein, Jun 19 '21 at 16:01
Yes, I get an error: code: 'ER_ACCESS_DENIED_ERROR', errno: 1045, sqlMessage: "Access denied for user 'pkrein'@'localhost' (using password: YES)", — pkrein, Jun 19 '21 at 16:26
Well _that_ is your problem. You need to resolve this error so that you can run your Express (Node) app. Your issue has nothing to do with Handlebars. It has to do with Express and MySQL. This might be a good starting point for your search: https://stackoverflow.com/q/40477625/3397771 — 76484, Jun 19 '21 at 16:31

Handlebars files not beig rendered in localhost

0 Answers0