EJS is not being rendered

index.js

import express from "express";
import bodyParser from "body-parser";

const app = express();
const port = 3000;

app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.render("index.ejs");
});

app.post("/submit", (req, res) => {
  const numLetters = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { numberOfLetters: numLetters });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

index.ejs

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Name Letters</title>
</head>

<body>
  <!-- Write your code here -->
  <h1>Write your name below</h1>
  <% if(locals.numberOfLetters){ %>
    <h1>There are <%= numberOfLetters %> letters in your name.</h1>
    <% } %>
      <form action="/submit" method="POST">
        <input type="text" name="fName" placeholder="First name">
        <input type="text" name="lName" placeholder="Last name">
        <input type="submit" value="OK">
      </form>
</body>

</html>

OUTPUT File Hierarchy

Can someone help me? I have installed all the required libraries.

It's not a big problem so I have tried whatever I could find on the internet. My previous activity was successfully rendered and I did nothing different this time.

Solution

The most probable cause is the lack of setting the location of views folder

app.set("view engine", "ejs");    
app.set('views', './views' );

...