Very, very stuck. Can't get pug to work

JavaScript
1

Tell us what’s happening:

I’ve installed pug, it’s required in server.js, it’s in the dependencies, yet it refuses to work. I’ve tried “./views/pug/”, “./views/pug”, “views/pug”, etc., every variation I can think of, including a “working” snipping from an answer from this post. Same error, every time.

repl.it link

Error: Failed to lookup view “/views/pug/index” in views directory “/home/runner/boilerplate-advancednode/views”
…
at /home/runner/boilerplate-advancednode/server.js:18:7
…

Your code so far

'use strict';
require('dotenv').config();
const express = require('express');
const myDB = require('./connection');
const fccTesting = require('./freeCodeCamp/fcctesting.js');

const pug = require("pug");

const app = express();

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

fccTesting(app); //For FCC testing purposes
app.use('/public', express.static(process.cwd() + '/public'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.route('/').get((req, res) => {

   res.render('/views/pug/index');

});
app.listen(process.env.PORT || 3000, () => {
console.log('Listening on port ' + process.env.PORT);
});

Dependencies are as follows:

"dependencies": {
 "dotenv": "^8.2.0",
 "express": "^4.16.1",
 "mongodb": "^3.6.1",
 "node": "12.18.0",
 "pug": "^3.0.0"
},

Very, very stuck.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Set up a Template Engine

Link to the challenge:

2

You can leave this out (I assume that is for accessing pug’s API). I have (in a working project)

    // Set view directory and view engine.
    app.set('views', './views');
    app.set('view engine', 'pug');

    app.route('/views/:page')
      .get(function(request, response) {
        return response.render(request.params.page);
      });

So you set the view directory and engine and then serve pages from that directory. So this will render, for instance, ./views/stories.pug when reached on the route /views/stories. Looks like you just need to set the view directory and then render pages from there; just make sure the path you set in app.set('views', directory); contains the pages you wish to render.

3

It’s odd though, because the “correct” solution doesn’t really match what your code is. I don’t doubt yours works, but the lesson’s correct format seems broken.

The steps from the lesson were:

  • Add pug as a dependency

  • Add app.set("view engine", "pug");

  • Render the index file in the views/pug directory by changing the argument in the existing res.render() to be the file path of the views/pug directory. Relative or absolute path, doesn’t need a file extension.

I tried all 3 options from the last step with many combinations between them. 3 main things I needed to do, and it didn’t seem to work.

Removing require("pug") doesn’t change the error in the least bit, so yeah I don’t think I need that.

4

I seem to have solved my own issue. Instead of inputting "./views/pug/index.pug", as what would make sense, I needed to enter "./pug/index.pug". Alright, whatever.

So the whole line should look like this:
res.render("./pug/index.pug");

1 Like
5

Why do we need the . before /pug/index.pug tho…

Edit: res.render always looks for the views folder, this also works

res.render("pug/index.pug")