85

Ok, so I have built a blog using Jekyll and you can define variables in a file _config.yml which are accessible in all of the templates/layouts. I am currently using Node.JS / Express with EJS templates and ejs-locals (for partials/layouts. I am looking to do something similar to the global variables like site.title that are found in _config.yml if anyone is familiar with Jekyll. I have variables like the site's title, (rather than page title), author/company name, which stay the same on all of my pages.

Here is an example of what I am currently doing.:

exports.index = function(req, res){
    res.render('index', { 
        siteTitle: 'My Website Title',
        pageTitle: 'The Root Splash Page',
        author: 'Cory Gross',
        description: 'My app description',
        indexSpecificData: someData
    });
};

exports.home = function (req, res) {
    res.render('home', {
        siteTitle: 'My Website Title',
        pageTitle: 'The Home Page',
        author: 'Cory Gross',
        description: 'My app description',
        homeSpecificData: someOtherData
    });
};

I would like to be able to define variables like my site's title, description, author, etc in one place and have them accessible in my layouts/templates through EJS without having to pass them as options to each call to res.render. Is there a way to do this and still allow me to pass in other variables specific to each page?

8 Answers 8

114

After having a chance to study the Express 3 API Reference a bit more I discovered what I was looking for. Specifically the entries for app.locals and then a bit farther down res.locals held the answers I needed.

I discovered for myself that the function app.locals takes an object and stores all of its properties as global variables scoped to the application. These globals are passed as local variables to each view. The function res.locals, however, is scoped to the request and thus, response local variables are accessible only to the view(s) rendered during that particular request/response.

So for my case in my app.js what I did was add:

app.locals({
    site: {
        title: 'ExpressBootstrapEJS',
        description: 'A boilerplate for a simple web application with a Node.JS and Express backend, with an EJS template with using Twitter Bootstrap.'
    },
    author: {
        name: 'Cory Gross',
        contact: 'CoryG89@gmail.com'
    }
});

Then all of these variables are accessible in my views as site.title, site.description, author.name, author.contact.

I could also define local variables for each response to a request with res.locals, or simply pass variables like the page's title in as the optionsparameter in the render call.

EDIT: This method will not allow you to use these locals in your middleware. I actually did run into this as Pickels suggests in the comment below. In this case you will need to create a middleware function as such in his alternative (and appreciated) answer. Your middleware function will need to add them to res.locals for each response and then call next. This middleware function will need to be placed above any other middleware which needs to use these locals.

EDIT: Another difference between declaring locals via app.locals and res.locals is that with app.locals the variables are set a single time and persist throughout the life of the application. When you set locals with res.locals in your middleware, these are set everytime you get a request. You should basically prefer setting globals via app.locals unless the value depends on the request req variable passed into the middleware. If the value doesn't change then it will be more efficient for it to be set just once in app.locals.

9
  • 1
    app.locals makes more sense than what I suggested. It has one catch though, you can't access the locals in your middleware. In this case it probably doesn't matter but it's one of those gotchas that you sometimes run into.
    – Pickels
    May 12, 2013 at 16:31
  • You can also define configuration in a js or json file and simply require() it everywhere you need it. The file will only load once during the application, and every module that requires it gets access to the values it defined. See the various answers at stackoverflow.com/questions/5869216/…
    – Joe Lapp
    Jul 18, 2014 at 1:50
  • 53
    In Express 4 locals is not a function, but an object. To set a property: app.locals.site.title = 'Example'; Jan 9, 2015 at 22:39
  • Wow! Now whole app is configurable through a single file. A clean shot. +1
    – Dipak
    May 7, 2016 at 5:42
  • 1
    @MarttiLaine I can only seem to set one level down... so app.locals.title = 'Example' works but app.locals.site.title = 'Example' does not. Why is that?
    – volume one
    Nov 6, 2019 at 12:59
60

You can do this by adding them to the locals object in a general middleware.

app.use(function (req, res, next) {
   res.locals = {
     siteTitle: "My Website's Title",
     pageTitle: "The Home Page",
     author: "Cory Gross",
     description: "My app's description",
   };
   next();
});

Locals is also a function which will extend the locals object rather than overwriting it. So the following works as well

res.locals({
  siteTitle: "My Website's Title",
  pageTitle: "The Home Page",
  author: "Cory Gross",
  description: "My app's description",
});

Full example

var app = express();

var middleware = {

    render: function (view) {
        return function (req, res, next) {
            res.render(view);
        }
    },

    globalLocals: function (req, res, next) {
        res.locals({ 
            siteTitle: "My Website's Title",
            pageTitle: "The Root Splash Page",
            author: "Cory Gross",
            description: "My app's description",
        });
        next();
    },

    index: function (req, res, next) {
        res.locals({
            indexSpecificData: someData
        });
        next();
    }

};


app.use(middleware.globalLocals);
app.get('/', middleware.index, middleware.render('home'));
app.get('/products', middleware.products, middleware.render('products'));

I also added a generic render middleware. This way you don't have to add res.render to each route which means you have better code reuse. Once you go down the reusable middleware route you'll notice you will have lots of building blocks which will speed up development tremendously.

4
  • I know this is an old answer, but the params in your globalLocals function for req and res are backwards.
    – brandon927
    Mar 9, 2015 at 7:21
  • Can I query data intended to be global, this way, e.g. navbar data that loads directly from db each page request? That seems to be this idea might be overstepping the usage of locals, e.g. a mongoose call. I am looking for direct load, on every route, since navbar is global, will look into caching later. Alternatively, maybe i need a function that runs once, then loads these to locals after collecting the data.
    – blamb
    Jul 2, 2017 at 0:53
  • 1
    res.locals doesn't seem to be a function anymore.
    – killjoy
    May 14, 2020 at 19:41
  • I use your approach to show some products into the footer. Thank you! Sep 15, 2020 at 5:48
19

For Express 4.0 I found that using application level variables works a little differently & Cory's answer did not work for me.

From the docs: http://expressjs.com/en/api.html#app.locals

I found that you could declare a global variable for the app in

app.locals

e.g

app.locals.baseUrl = "http://www.google.com"

And then in your application you can access these variables & in your express middleware you can access them in the req object as

req.app.locals.baseUrl

e.g.

console.log(req.app.locals.baseUrl)
//prints out http://www.google.com
1
  • 2
    Also the express server needs to be restarted when new locals are added in code.
    – Wtower
    Jul 5, 2016 at 12:30
17

In your app.js you need add something like this

global.myvar = 100;

Now, in all your files you want use this variable, you can just access it as myvar

5
  • I'm using require modules, and had to reference it as global.myvar everywhere, and that worked. This was a nice easy solution for socket.io, where I want to emit messages from handlers in other files. I put my "io" object on global.myIO and all is working great. Nov 5, 2013 at 11:58
  • 6
    This is actually not recommended or considered a good practice in Node development. Node.JS includes a module system implementation based on the CommonJS system and is completely centered on the idea of modules which do not share a global scope, instead using the require method. This also sets a global js var in Node instead of a local for Express view/templates like the question asks for.
    – Cory Gross
    Nov 24, 2013 at 22:14
  • @CoryGross Is it a good practice to set request object as a global variable like this? Jul 28, 2017 at 10:33
  • Only this worked. Thanks Mr. F! @CoryGross how do I let all files in my application access a single object? Jan 14, 2019 at 20:50
  • This is the best answer. It means the global object is available to pass to a view or anywhere you want. Like global.cdnURL = "https://cdn.domain.com that you can pass to a view to load up static conent.
    – volume one
    Nov 21, 2019 at 17:26
0

One way to do this by updating the app.locals variable for that app in app.js

Set via following

var app = express();
app.locals.appName = "DRC on FHIR";

Get / Access

app.listen(3000, function () {
    console.log('[' + app.locals.appName + '] => app listening on port 3001!');
});

Elaborating with a screenshot from @RamRovi example with slight enhancement.

enter image description here

0

you can also use "global"

Example:

declare like this :

  app.use(function(req,res,next){
      global.site_url = req.headers.host;   // hostname = 'localhost:8080'
      next();
   });

Use like this: in any views or ejs file <% console.log(site_url); %>

in js files console.log(site_url);

1
  • This will cause race conditions. global isn't namespaced to that particular request.
    – winrid
    Dec 26, 2021 at 21:02
0

With the differents answers, I implemented this code to use an external file JSON loaded in "app.locals"

Parameters

{
    "web": {
        "title" : "Le titre de ma Page",
        "cssFile" : "20200608_1018.css"
    }
}

Application

var express     = require('express');
var appli       = express();
var serveur     = require('http').Server(appli);

var myParams    = require('./include/my_params.json');
var myFonctions = require('./include/my_fonctions.js');

appli.locals = myParams;

EJS Page

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title><%= web.title %></title>
    <link rel="stylesheet" type="text/css" href="/css/<%= web.cssFile %>">
</head>

</body>
</html>

Hoping it will help

-1

What I do in order to avoid having a polluted global scope is to create a script that I can include anywhere.

// my-script.js
const ActionsOverTime = require('@bigteam/node-aot').ActionsOverTime;
const config = require('../../config/config').actionsOverTime;
let aotInstance;

(function () {
  if (!aotInstance) {
    console.log('Create new aot instance');
    aotInstance = ActionsOverTime.createActionOverTimeEmitter(config);
  }
})();

exports = aotInstance;

Doing this will only create a new instance once and share that everywhere where the file is included. I am not sure if it is because the variable is cached or of it because of an internal reference mechanism for the application (that might include caching). Any comments on how node resolves this would be great.

Maybe also read this to get the gist on how require works: http://fredkschott.com/post/2014/06/require-and-the-module-system/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.