Skip to main content
Prototype Kit Training home

Express

What is Express?

Express is the web application framework used by the GOV.UK Prototype Kit. It is based on JavaScript. Knowing a little about Express will help you understand the way routing works and implement branching in your projects.

Express is installed as part of installing the Prototype Kit - there is nothing to install separately.

Routing

Routing essentially means how an application (or website) responds to URLs (which stands for Uniform Resource Locator - a unique web address basically. Sometimes also referred to as URI, or Uniform Resource Indentifier).

In the Prototype Kit, if you create a view (or page) in app/views called test.html, you can then navigate to it by going to localhost:3000/test in your browser. This is down the routing that is built into the kit: there is Express code that is 'catching' the request to /test and returning test.html.

The Prototype Kit includes a file in your app folder called routes.js. You can put your own code in there that 'catches' calls to given URLs (or web addresses), and then do stuff.

Catch a request to a URL

router.get('/page1', function (req, res) {
  res.redirect('/page2')
})

Placed in your routes.js file, the above example code will 'catch' a request to localhost:3000/page1 and return a view called page2.html.

Accessing variables from session data in your routes

You will be familiar with variables if you've covered some of the JavaScript or Nunjucks resources.

Session data is information that the Prototype Kit stores in the browser as a user interacts with it. The value of a text input, a checkbox being selected or a radio button being selected for example.

req.session.data['full-name']

The above example code is the syntax to access any session data or variables in your prototype.

If / else statements

Sometimes known as 'conditional statements', these let you do different things in your routes depending on the value of something, for example:

router.get('/superhero-answer', function (req, res) {
  const fullName = req.session.data['full-name']
  if (fullName === 'Clark Kent') {
    res.redirect('/superman')
  } else {
    res.redirect('/not-superman')
  }
})

Placed in your routes.js file, the above code will 'catch' a request to localhost:3000/superhero-answer, establish the value of the full-name session variable, and then return different views according to that.

You can also make use of else if in your conditional statements if necessary:

router.get('/superhero-answer', function (req, res) {
  const fullName = req.session.data['full-name']
  if (fullName === 'Clark Kent') {
    res.redirect('/superman')
  else if (fullName === 'Bruce Wayne') {
    res.redirect('/batman')
  } else {
    res.redirect('/not-superhero')
  }
})

The syntax of the if / else statements is just standard JavaScript - it's the bit around the routing that's specific to Express.

The === is called a comparison, see a full list of JS comparisons.

You can also string different conditions together using && (which means 'and') and || (meaning 'or'):

router.get('/superhero-answer', function (req, res) {
  const fullName = req.session.data['full-name']
  if (fullName === 'Clark Kent' || fullName === 'Bruce Wayne') {
    res.redirect('/superhero')
  } else {
    res.redirect('/not-superhero')
  }
})
router.get('/superhero-answer', function (req, res) {
  const fullName = req.session.data['full-name']
  const otherName = req.session.data['other-name']
  if (fullName === 'Clark Kent' && otherName === 'Bruce Wayne') {
    res.redirect('/ultimate-superhero')
  } else {
    res.redirect('/not-superhero')
  }
})

GET vs POST

You'll sometimes see different syntax in Express routing: router.get('...')... and router.post('...')...

If you want to catch a URL that's being accessed via a hyperlink, use get.

If you want to catch a URL that's the result of a form being submitted, the URL it will go to is the action attribute, and you will have to match the method attribute for whether it's a get or a post.

HTML in view for 'get'

<form action="superhero-answer" method="get">...

routes.js

router.get('...')...

HTML in view for 'post'

<form action="superhero-answer" method="post">...

routes.js

router.post('...')...

Read more about the method attribute on HTML forms

More resources