ExpressJS res.render() Function

In an ExpressJS application if you want to render a view created using HTML templates then that can be done using response.render() function.

In ExpressJS, response.render() renders a view and sends the rendered HTML string to the client.

Syntax

res.render(view, locals, callback)

view- A string that is the file path of the view file to render.
locals- An object whose properties define local variables for the view. This is an optional parameter.
callback- A callback function, it is an optional parameter. callback function takes two arguments error and rendered string.

res.render() example in Express

We are going to use EJS template engines for JavaScript so we need to install EJS which can be done using the following command.

npm install ejs

You can set EJS as templating engine in your application using the following command.

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

EJS, by default, looks for HTML templates in the views directory in the application root directory. So, let's create a 'views' directory and then create a 'home.ejs' file there with the following code.

views\home.ejs

<h3>Welcome to my site <%= siteName %></h3>

app.js

This file has the code to render the above template.

const express = require('express');
const app = express();
const port = 3000;

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

app.get('/', (req, res) => {
    // render template
    res.render('home', {siteName: 'knpcode.com'});
})

//Server
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

Important points to note here-

In res.render(), first argument is the view name which is set as ‘home’. By default, it will look in views folder and view engine is set as ejs so the view resolves to views/home.ejs
There is one variable in the view- siteName. Using second argument, an object whose properties define values for the variables is set.

res.render() with callback function

You can also pass a third argument, a callback function, in res.render() method. With the callback you can intercept the rendered template before sending it. That gives you a chance to change the HTML in anyway you want before sending back the response.

const express = require('express');

const app = express();
const port = 3000;

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

app.get('/', function(req, res){
    // render template
    res.render('home', {siteName: 'knpcode.com'}, (err, html) => {
        console.log(html);
        res.send(html);
    }); 
});

//Server
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

If you run the application then you should be able to see the rendered template in the console too because that is done in the callback.

node app.js
Example app listening on port 3000
<h3>Welcome to my site knpcode.com</h3>

That's all for the topic ExpressJS res.render() Function. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

June 7, 2024