How to Handle Global Data in ExpressJS

user_7477670 0
Viewed 430

I am trying to build an express.js app and I want to pass some data to my main layout. For example, a list of navigation links that I use on every page. I know how to pass data to an individual view -- for example:

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

But what if I want to pass data to my main layout (as opposed to an individual view). For example, let's say a list of links that I put in a header navbar that appears on each and every page.

How do I pass that data into my main layout?

Thanks.

express node.js javascript
5 Answers

Here you can include file of header & footer inside your each ejs file

<%- include('<path>/header.ejs') %>
<%- include('<path>/footer.ejs') %>

This is for ejs view engine

app.set("view engine", "ejs");
user_120905560

A better solution instead of using app.locals will be to set a middleware that runs before each route.

app.use((req,res,next) => {
  res.locals.navLinks = [ 
    // array data
  ];
  next()
});

Will run before any HTTP request and will set the navLinks before every route.

this will cause the navLinks to be valid only for the request lifetime and won't polute app.locals. (which will persist throughout the life of the application).

user_12836720

Why are you not just using global state?

const navbarItems = [{ pageTitle: 'Home' }]

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

You don't send vars to the layout in any special way: whatever you send to the template is accessible in the layout.

You have a few options here:

  • you populate those vars in every request handler, meaning you'll have to duplicate the call to the function that populates those
  • you use some global variables as @garritfra suggested, meaning those vars will be application specific and not request-specific (ie: the same for all the users)
  • you create an express middleware where you'll populate those variables and apply it to the routes. I'd say this is the way to go, because that middleware can also use the global variables and can also populate the variables with request-specific info.
user_4592330

I ended up using app.locals like this:

// app.js
app.locals.navLinks = [ 
  // array data
]

I can then use it in my views (including my layout views) as follows:

// views/layouts/main.html
{{#each navLinks}}
  <a href="{{ url }}">{{title}}</a>
{{/each}}
user_74776700
Related