How can I make Webstorm aware of Express server render variables, within EJS templates client-side?

I'm not sure how to best title this, but say I'm serving up a query response from MongoDB, and using Express to render the index page, by sending the results of the query as an array like so (server.js):

this.app.get('/', async (req, res) => {
  // recipes ends up as an array
  const recipes = await this.recipeCollection.find().toArray()
  res.render('index', { recipes })
})

I then render the resulting recipes on the client side (index.ejs):

<section>
    <h2>Recipes</h2>
    <ul class="recipe-list">
        <% for (const recipe of recipes) { %>
            <li class="recipe">
                <h3><%= recipe.name %></h3>
                <p><%= recipe.ingredients %></p>
                <p><%= recipe.instructions %></p>
            </li>
        <% } %>
    </ul>
</section>

Everything works, but Webstorm has no idea what "recipes" is in the EJS file. The best it can do is suggest "Element is not exported".

Is there any way to add support for EJS/Express/Node in this manner?

Also apologies, in this input form I can't figure out how to designate javascript for syntax highlighting in these code blocks.