Stack Exchange
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.

Just for clarification on the file hierarchy, index.js, package-lock.json, package.json and solution.js are at the root of the project folder right? I know the line of the directory ends above, but the indent is confusing me

The most probable cause is the lack of setting the location of views folder
app.set("view engine", "ejs");    
app.set('views', './views' );

...

