Categories
Express JavaScript

Guide to the Express Application Object — Rendering and Setting

Spread the love

The core part of an Express app is the Application object. It’s the application itself.

In this article, we’ll look at the methods of the app object and what we can do with it, including rendering HTML and changing settings.

app.render(view, [locals], callback)

We can use the app.render method to render HTML of a view via its callback function. It takes an optional parameter that’s an object containing variables for the view.

For example, we can use it as follows:

const express = require('express');  
const bodyParser = require('body-parser');  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.engine('ejs', require('ejs').renderFile);  
app.set('view engine', 'ejs');
app.render('index', { people: ['geddy', 'neil', 'alex'] }, (err, html) => {  
  console.log(html);  
});
app.listen(3000);

Then if we have the following in views/index.ejs :

<%= people.join(", "); %>

Then we get:

geddy, neil, alex

outputted from console.log(html);

app.route(path)

We can use app.route to define route handlers with the given path .

For example, we can use it as follows:

const express = require('express');  
const bodyParser = require('body-parser');  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));
app.route('/')  
  .get((req, res, next) => {  
    res.send('GET request called');  
  })  
  .post((req, res, next) => {  
    res.send('POST request called');  
  })  
  .all((req, res, next) => {  
    res.send('Other requests called');  
  })app.listen(3000);

Then when a GET request is made to / , we get GET request called . If a POST request is made to / , then we get POST request called .

Any other kind of requests to / will get us Other requests called .

The order matters since all will handle all kinds of requests. So if we want to listen to specific kinds of requests in addition to other kinds of requests, all should come last.

app.set(name, value)

We can use set to set the setting with the given name to the given value .

For example, we can use it as follows:

const express = require('express');  
const bodyParser = require('body-parser');  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));  
app.set('title', 'Foo');
app.get('/', (req, res) => {  
  res.send(app.get('title'));  
})
app.listen(3000);

Since we called app.set(‘title’, ‘Foo’); to set the title setting to Foo we should see Foo displayed when we make a GET request to / .

Some settings are special for Express. They include:

  • case sensitive routing — boolean value for enabling or disabling case sensitive routing (e.g. /Foo will be considered different from /foo if this is true )
  • env — string for the environment mode
  • etag — ETag response header
  • jsonp callback name — string for the JSONP callback name
  • json escape — boolean option to enable or disable escaping JSON response from res.json , res.jsonp or res.send . <, >, and & will be escaped if this is true
  • json replacer — replace callback for JSON.stringify
  • json spaces — spaces argument for JSON.stringify
  • query parser — disable query parsing if set to false , or set the query parse to use either 'simple' or 'extended' or a custom query string parsing function.
  • strict routing — boolean setting for enabling/disabling strict routing. If this is true , then /foo will be considered different from /foo/
  • subdomain offset — number of dot-separated parts of the host to remove to access subdomain. Defaults to 2.
  • trust proxy — indicates that the app is behind a proxy is it’s true . The X-Forwarded-* headers will determine the connection and IP address of the client.
  • views — string or array of directories to look for view templates. If it’s an array, then the views will be searched in the order they’re listed
  • view cache — boolean to enable view template compilation caching
  • view engine — string for setting view engine for rendering templates.
  • x-powered-by — enable 'X-Powered-By: Express HTTP header

Options for `trust proxy` setting

It can take on the following options:

  • true — client’s IP address is understood to be the leftmost entry of the X-Forwarded-* header
  • false — the app is assumed to be directly facing the Internet
  • String, comma-separated strings, or array of strings — one or more subnets or IP address to trust
  • Number — trust the nth hop from the front-facing proxy server as the client.
  • Function — custom trust implementation

Options for etag setting

It can take on the following options:

  • Boolean — true enables weak ETag, false disables ETag
  • String — 'strong' enables strong ETag, ‘weak’ enables weak ETag
  • Function — custom implementation.

Conclusion

We can render an HTML string with the app.render method. It takes a view file name, an object for variables and a callback with the html parameter to get the HTML rendered.

app.route lets us define route handlers.

app.set lets us set the options we want for our app. Some settings are special for Express and will be processed by it if they’re set.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *