Routing

We've created a view template, and told our Express app where to find it and how to read it.

However, we still can't see our view in the browser.

When we served static files, we could add a path to the end of the URL (eg. /test.html) and Express would automatically respond with the right file.

For dynamic views, this isn't done for us. We need to write a route to "attach" each view template to a particular URL.

Write a route

A route is a block of code that checks for a particular URL, and responds with the right view.

The following route will display our index.njk file when the user first visits our application.

server.get('/', function(req, res){
  res.render('index.njk')
})

The slash in quotes on the first line is the URL we want to check for. Here, we're looking for URLs that have just a slash—the homepage, in other words.

If the URL matches the one we've given, then the user will see the view file named in res.render().

We can add this route to our server.js file. The order matters, so only include routes after turning on Express and setting up nunjucks:

const express = require('express')
const nunjucks = require('nunjucks')

// Turn on Expresss
let server = express()

// Set up nunjucks
nunjucks.configure(__dirname + '/views', {
  autoescape: true,
  express: server
});

// A route
server.get('/', function(req, res){
  res.render('index')
})

// Serve static files
server.use(express.static(__dirname + '/static'))

server.listen(3000, function(){
    console.log("Server is running")
})

Add this route into your server.js file, restart your app and view it on the web. You should see the message in your index.njk file.

If you don't see the message, there are several things you can check:

1. Have you installed nunjucks? Check this by looking for it in the dependencies section of your package.json file.
2. Is your route formatted correctly?
3. Does your index.njk file exist, and does it have a message inside it?

Handling multiple routes

We can write as many routes as we want. Express will work down the list from the top, and stop at the first route that matches.

Let's say that our app has a home page and an about page.

First, create a second view template called about.njk. Store it with index.njk. Put a different message inside it.

We can write a second route to handle our new about page:

server.get('/', function(req, res){
  res.render('index.njk')
})
server.get('/about', function(req, res){
  res.render('about.njk')
})

Restart the app and visit it in the browser.

You should be able to add /about to the URL and see the second message on your about page.

We've now laid the groundwork for our app to display real, dynamic content, such as the automatically updating list of posts from our earlier blogging app example.

In the next lesson, we'll connect this all together with some real data.