How to Set up a Template Engine

Tell us what’s happening:
I am trying to pass the test, Set up a Template Engine on my Replit.

I first added the pug@~3.0.0 as a dependency in the package.json file.

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

Then I put in the codes, app.set('view engine', 'pug') & the code, views/pug into res.render() into the server.js file.

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

const app = express(); 

fccTesting(app); //For FCC testing purposes.
app.set('view engine', 'pug'); // <=  I added this code from FCC in here
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'); // <= I added this code from FCC in here
});

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

But every time I run the replit, it always shows fail in the Console results.

  • What am I doing wrong in the package.json file. and the server.js file?
  • Is there a way to install the pug into the dependencies through the console?
  • Is there a syntax error in my replit code?
  • Did I put a certain code in the wrong order?
  • Can I please receive help in this first test?

Much appreciated

Your project link(s)

solution: https://boilerplate-FCC-advancednode-trial-1.artc.repl.co

Your browser information:

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

Challenge: Set up a Template Engine

Link to the challenge:

Please provide the link to the editor when asking for help.

https://replit.com/@ArtC/boilerplate-FCC-advancednode-trial-1


  1. JSON does not support comments so you have to remove the comment from package.json

  2. If you look at the code

app.use('/public', express.static(process.cwd() + '/public'));

it gives you a hint as to how to get to the /views/pug folder (the last part with the path concatenation)

I will say the challenge is being pretty vague about the path.

Even looking at the docs for res.render and Using template engines with Express wouldn’t yield much help with getting to the same code like the example code is using.

I never really used template engines much but the way it is set up in the express docs also isn’t the same as the example code.

This is a spoiler, so please read the docs first and try it using that method first. It does work with the code the docs uses and will pass the test.

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

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

Ok, I took your advice of removing the comment in package.json file.
I also edit my code,

fccTesting(app); //For FCC testing purposes.
app.set('view engine', 'pug'); // <=  I added this code from FCC in here
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('pug'); // <= I added this code from FCC in here
});

Now I was able to pass the FCC test, thank you very much!

1 Like

As I said, I never use template engines, but I’m surprised that works. I guess pug is seen as the folder and because the file is named index it is automatically the one rendered (not actually sure, just a guess).

I opened an issue for the challenge as I think it should teach the way the docs shows how to do it and it might be a little less vague about it as well.