Home > Mobile >  Express.js can't get index.ejs file
Express.js can't get index.ejs file

Time:01-29

Sorry, this is basic question, but I can not solve this problem by myself.

I try to make express server which responses index.ejs file when accessing http://localhost:3000. It is simple what I want to do. My server code is below.

server.mjs

import express from 'express';
import path from 'path';

const app = express();

console.log(process.cwd());
console.log(path.join(path.resolve(), 'views'));

app.set('views', path.join(path.resolve(), '/views'));
app.set('view engine', 'ejs');
app.get('/', (res, req) => {
    res.render('index');
});

app.listen(3000, () => {
    console.log(`Example app listening on port 3000`);
});

The above server.mjs returns Cannot GET /index.ejs page, and GET http://localhost:3000/index.ejs 404 (Not Found) message is displayed the browser console.

The project directory tree is below.

.
├── node_modules
├── package-lock.json
├── package.json
├── server.mjs
└── views
    └── index.ejs

And the results of process.cwd and path.join in above code are below.

//the result of process.cwd()
/Users/****/Documents/IntelliJ project/****

//the result of path.join()
/Users/****/Documents/IntelliJ project/****/views

Is the configuration of path to index.ejs wrong?. Why does not the server get the index.ejs?

My project environment is here.
OS: MacOS v11.6
IDE: IntelliJ IDEA 2021.2
node.js: v14.17.0
express.js: v4.17.2
ejs: v3.1.6

CodePudding user response:

Crucial in this case is this line

// set the view engine to ejs
app.set('view engine', 'ejs');

In your code you repeat app.set twice unnecessarily:

app.set('views', path.join(path.resolve(), '/views'));

Afterwards, You misused this function, you swapped the parameters(req,res) this will cause an error TypeError: res.render is not a function:

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

I commented out redundant lines of your code. The rest of the solution below.

pacakge.json

{
  "name": "express",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.2"
  }
}

Project File and Folder structure:

enter image description here

server.js

import express from "express";
// import path from "path";
const port = 3000;
const app = express();

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

// console.log(process.cwd());
// console.log(path.join(path.resolve(), "views"));

// app.set("views", path.join(path.resolve(), "/views"));

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

app.listen(port, () => {
  console.log(`Server is  listening at http://localhost:${port}`);
});

index.ejs

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <h1>It works fine!</h1>
  </body>
</html>

Output:

enter image description here

  •  Tags:  
  • Related