Not able to route some sites with ejs

I’m working on my side structure and tried to add multiple single pages.

Here is my site structure:

bin
node_modules
public
query
routes
- index.js

views
-menu
--menu1.ejs
--menu2.ejs
--menu3.ejs

-partials
--header.ejs

-index.js
-anzeige.js
-eintragen.js

I tried to route the sites in my index.js like this:

//works
router.get('/', (req, res) => {
  console.log('Request for index recieved');
  res.render('index');
});

//works
router.get('/menu1', (req, res) => {
  console.log('Request for menu1 page recieved');
  res.render('menu/menu1');
});

//not working
router.get('/menu2', (req, res) => {
  console.log('Request for menu2 page recieved');
  res.render('menu/menu2');
});

//not working
router.get('/menu3', (req, res) => {
  console.log('Request for menu3 page recieved');
  res.render('menu/menu3');
});

//works
router.get('/anzeige', (req, res) => {
  console.log('Request for anzeige page recieved');
  res.render('anzeige');
});

I also added index.js to my app.js as a route but somehow my console says me that menu2 and menu3 can’t be found (error 500 internal server error).

Request for menu2 page recieved
GET /menu2 500 7.958 ms - 305
GET http://localhost:3000/menu2 500 (Internal Server Error)

Additionally my app.js, which first creates const routes and implents it afterwards with app.use('/', routes);

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

//Place routes here
//var indexRouter = require('./routes/index');
const routes = require('./routes');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//add routes here
app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

menu2.ejs

<!DOCTYPE html>
<html lang="de">
<head>
<title>Speiseplan anzeige</title>
<%- include('partials/header') %>
</head>

<body class="mainContainer">
  <div class="midContainer">
    <h1>menu2</h1>
  </div>
</body>

</html>

Am I missing something? It’s a bit strange that some sites work and some not.

Answer

Problem found – here the soultion for everyone with the some problem.

As Rajan mentioned I should use ../partials/header instead of partials/header.

This worked for me and everything is now displayed perfectly.

Thank you all!

Advertisement

Answer