ejs async true with node Express

Question

I want to call some of my functions which are asynchronous to be called from within my ejs files.

Like I have this functions set as my app.locals.someFunction

async someFunction(param){
  let data = await someAsyncStuff();
  // &  other things
  return data;
}

and I want to use it inside ejs file as below:

<%
let data = await someFunction()
for(let x of data){%>

   <li><%=x%></li>

<%}%>

This is possible with ejs if {async:true} is passed as an option. But where exactly should I pass this when my view engine setup is like the following?


//view engine setup
app.engine ('.html', ejs.renderFile);
app.set ('view engine', 'html');

Nikolai Savun · Accepted Answer · 2020-03-25T07:01:17.453

17

instead res.render()

const ejs = require('ejs');
const html = await ejs.renderFile(view, data, {async: true});
res.send(html);

every include with await

<body>
    <%- await include(pageView);%>
</body>

async now fine

<%
let data = await collection.find().toArray();

for(let x of data){%>

   <li><%=x%></li>

<%}%>

edited Mar 25 '20 at 07:01

answered Mar 24 '20 at 04:01

Nikolai Savun

186
6

yeah, that's the way I did it. forgot to post the answer though.... – Imtiaz Chowdhury Mar 25 '20 at 11:39
I couldn't find it in the docs, thanks! – Darvesh Dec 19 '22 at 07:39

score 2 · Answer 2 · answered Feb 13 '20 at 08:31

2

You have to pass the argument async into your render() function call as opts. E.g.

res.render(view, {.., async:true, ... }...)

answered Feb 13 '20 at 08:31

phaen

349
2
12

1

this puts only an empty ```{}``` as response no matter what the page has. – Imtiaz Chowdhury Feb 13 '20 at 08:39
That might be the cause of the async function being called within your template. I assume you should be calling that function within your rendering function and not within the template itself. – phaen Feb 13 '20 at 08:44
actually the project requires some functions to be called within the tamplate. – Imtiaz Chowdhury Feb 13 '20 at 08:46
the response is still {} when the file contains only Hello world but works as intended when {async:true} is not passed – Imtiaz Chowdhury Feb 13 '20 at 08:48

score 2 · Answer 3 · answered Jun 18 '20 at 16:41

For people who are still trying to figure out how to implement async ejs templates, I am listing my complete solution below:

In your main app file (app.js)

// app.js
// Set ejs as view engine
app.set('view engine', 'ejs');

let ejsOptions = {
  // delimiter: '?', Adding this to tell you do NOT use this like I've seen in other docs, does not work for Express 4
  async: true
};

// The engine is using a callback method for async rendering
app.engine('ejs', async (path, data, cb) => {
  try{
    let html = await ejs.renderFile(path, data, ejsOptions);
    cb(null, html);
  }catch (e){
    cb(e, '');
  }
});

Now for your route responses...

app.route('/login')
  .get( async (req, res) =>{
      // layout.ejs is my version of blocking. I pass the page name as an option to render custom pages in the template
      return await res.render(`layout.ejs`, { page : 'login' }, (err, html) => standardResponse(err, html, res));
})

I user the function standardResponse() in the callback for both readability and so I have to write less lines. The function works like this...

const standardResponse = (err, html, res) => {
  // If error, return 500 page
  if (err) {
    console.log(err);
    // Passing null to the error response to avoid infinite loops XP
    return res.status(500).render(`layout.ejs`, { page : '500', error: err }, (err, html) => standardResponse(null, html, res));
  // Otherwise return the html
  } else {
    return res.status(200).send(html);
  }
}

And viola! Asynchronous ejs rendering.

ejs async true with node Express

3 Answers3

Linked