Express HTML templates?

Question:
Basically you know how in Python Flask you can use render_template to use HTML templates? Is there an easy alternative for Node.js Express? Currently I’m just using res.sendFile but I need to replace some text in there with some Repl Auth variables.

Repl link:
https://replit.com/@QwertyQwerty54/Nodejs-Express-Webserver-W-ReplAuth

1 Like

Using the EJS rendering engine you can achieve this:
index.js:

// ...

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

// ...

// render HTML file
res.render("path/to/file.html", {
    username: user.username,
    message: "Hello world!"
});

// ...

index.html:

<!-- ... -->

<div>
    <h3><%= username %></h3>
    <p><%= message %></p>
<div>

<!-- ... -->

Basically anything inside <%= %> is read as JavaScript code enabling you to use variables passed to the client via the object in res.render.

Here’s some more info you might want to read :slight_smile:

5 Likes

Thanks but clearly I’m doing something wrong :slightly_smiling_face:

Error: Cannot find module 'html'
Require stack:
- /home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/view.js
- /home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/application.js
- /home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/express.js
- /home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/index.js
- /home/runner/Nodejs-Express-Webserver-W-ReplAuth/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at new View (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/view.js:81:14)
    at Function.render (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/application.js:587:12)
    at ServerResponse.render (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/response.js:1039:7)
    at /home/runner/Nodejs-Express-Webserver-W-ReplAuth/index.js:18:9
    at Layer.handle [as handle_request] (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/layer.js:95:5)
1 Like

Try npm install html in the console :man_shrugging:

1 Like
Error: Module "html" does not provide a view engine.
    at new View (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/view.js:84:13)
    at Function.render (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/application.js:587:12)
    at ServerResponse.render (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/response.js:1039:7)
    at /home/runner/Nodejs-Express-Webserver-W-ReplAuth/index.js:18:9
    at Layer.handle [as handle_request] (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/layer.js:95:5)
    at /home/runner/Nodejs-Express-Webserver-W-ReplAuth/node_modules/express/lib/router/index.js:284:15

¯\_(ツ)_/¯

The function is not returned after the login file is sent and it still tries to render index.html after, just add return afterwards

if (!userid) {
  res.sendFile(__dirname + '/views/login.html');
  return;
}

Or, use else

if (userid) {
    res.render(__dirname + '/views/index.html', {
        url: url,
        pfp: pfp,
        username: username,
        userid: userid
    });
} else {
    res.sendFile(__dirname + '/views/login.html');
}
2 Likes

Thanks, that solved the problem. I’m marking @MattDESTROYER’s post as the solution though, as it answered my original question.

1 Like

That’s fine, I just wanted to help =P

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

So I don’t know if this is TL4 abuse, but I found the fix for the error, just use index.ejs instead of index.html and problem solved!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.