Routes & Routers

Overview

This section will walk you through how to set up your first routes for your Express server. Afterwards, we will see how we can clean up the code using routers.

Routes & HTTP Requests

In Express, a route interprets the HTTP request method made to the server.

Routing is the action of determining what information is display or what action is taken when a user navigates or triggers a specified endpoint or path.

A simple route comprises the following components

app : the instance of Express that you have created in Getting Started
method: the Express route method corresponding to HTTP requests (eg. get, post, or put)
path: the defined endpoint of the request
handler: the function that is called when the route is hit

Handler functions

The handler will often be an anonymous function written as either a regular function or an arrow function. You may see more than one handler function per route in more complex routes.

GET & POST

The GET method is used to request data from a server.
The POST method is used to send data to create date or update data on a server. ¹

We left off in Installing Express with the index route already set up. The handler for this route is an anonymous function that takes in two parameters. The first parameter represents the HTTP request object (often written as request or req) and the second parameter is the response object (written as response or res).

A response method is called in the handler to terminate the request-response cycle.

const express = require('express');
const app = express();

app.get('/', (req, res) => { // (1)
  res.send('Hello World!'); // (2)
});

module.exports = app;

'/' (forward slash) is your root route.
res.send() can send back various types of content.

Info

Remember you can click on the numbers at the end of a line of code for extra information about the specific examples used.

Returning a Static Webpage Using GET

As an example, let's create a route to display a contact page in the form of a static HTML page.

Start with the route method and insert the path for your Express server to listen for:
```
app.get('/contact');
```
Insert an empty handler that has the parameters for the request and response objects:
```
app.get('/contact', (req, res) => { });
```
Insert the action you want to perform into the handler function:
```
app.get('/contact', (req, res) => {
  res.sendFile('contact.html'); // (1)
});
```
1. Use res.sendFile() to serve a static HTML page.

Sending Data Using POST

Suppose you have a form on your contact page for users to submit a message. You would use a POST request so that you can retrieve the submitted data and store it somewhere.

Action & Name Attributes

The action attribute must match the path that will match the route path where we insert the handler logic.
The name attribute for each input will become the key/property of the object that the form will send to your server.

Start with the route method and insert the path for your Express server to listen for.
```
app.post('/contact');
```
Note that you can use the same path with different methods to perform different actions.
Insert an empty handler that has the parameters for the request and response objects
```
app.post('/contact', (req, res) => { });
```
Insert the action you want to perform into the handler function.
```
app.post('/contact', (req, res) => {
  const email = req.body.email; // (1)
  const message = req.body.message;
  // code to process the form data
  res.redirect('/confirmation'); // (2)
});
```
1. req.body` is the object containing the input names and values from the form that was posted.
2. Use res.redirect() to redirect your user to another page/route to end your handler function.

Success

At this point, you have the tools to set up many routes in your src/app.js. Next we will cover how to refactor your routes so src/app.js is more manageable.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
})

app.get('/contact', (req, res) => {
  res.sendFile('contact.html');
});

app.post('/contact', (req, res) => {
  const email = req.body.email;
  const message = req.body.message;
  // code to process the form data
  res.redirect('/confirmation');
});

app.get('/reviews', (req, res) => {
  res.sendFile('reviews.html');
});

app.get('/reviews/add', (req, res) => { // (1)
  // code to add a review
  res.redirect('/reviews');
});

app.get('/reviews/delete', (req, res) => {
  // code to delete a review
  res.redirect('/reviews');
});

module.exports = app;

Note that you can use multi-level paths as well.

Setting up Routers

As the scope of your project grows or scales, you may find the need to organize your routes for ease of maintenance. Express provides a class to help achieve this called a Router.

If you had several related endpoints, it would be more manageable to organize these related routes into their own file. The Express router can help you achieve this by allowing you to export this grouping into another file (in our case src/app.js). This file acts as a main hub directing requests to the appropriate endpoints.

Router Example

We will add onto our previous example with the contact page routes. At the moment, these routes are in src/app.js. We want to move the contact routes to their own file for better organization.

Create a new JavaScript File called contactRoute.js in src/api/routes.
You can technically make this file anywhere you wish in your project but for this example, we will use this project structure.
Require Express into contactRoute.js and create a new instance of the Router class by storing it to a new variable (router).
```
const express = require('express'); // (1)
const router = express.Router(); // (2)
```
1. Import the Express module so we can access its properties
2. Make a new instance of the built-in Router class that will hold the routes we assign to it.

Cut and paste the two contact routes from app.js into the contactRoute.js file.

const express = require('express');
const router = express.Router();

app.get('/contact', (req, res) => {
  res.sendFile('contact.html');
});

app.post('/contact', function(req, res) {
  const email = req.body.email;
  const message = req.body.message;
  // code to process the form data
  res.redirect('/confirmation');
});

Change app to router so that the routes are now associated to this router instance.
We can remove 'contact' from our path now as we will be setting the 'contact' path in app.js.

const express = require('express');
const router = express.Router();

router.get('/', function(req, res) {
  res.sendFile('contact.html');
});

router.post('/', function(req, res) {
  const email = req.body.email;
  const message = req.body.message;
  // code to process the form data
  res.redirect('/confirmation');
});

Add an export to the end of the file so we can access this router and its associated routes from other files.

const express = require('express');
const router = express.Router();

router.get('/contact', function(req, res) {
  res.sendFile('contact.html');
});

router.post('/contact', function(req, res) {
  const email = req.body.email;
  const message = req.body.message;
  // code to process the form data
  res.redirect('/confirmation');
});

module.exports = router; // (1)

Your routes have been set to this variable so we only have to export the router and not the individual routes.

Import the contact router into app.js.

const express = require('express');
const app = express();

const contactRoute = require('api/routes/contactRoute'); // (1)

module.exports = app;

Make sure you are requiring your router from wherever you have placed your contactRoute.js in your project.

Use app.use() to load the router into the Express app.
Paths that start with /contact will now be sent to contactRoute.js for further routing.
```
const express = require('express');
const app = express();

const contactRoute = require('api/routes/contactRoute');

app.use('/contact', contactRoute); // (1)

module.exports = app;
```
1. app.use() tells Express what functions you want to associate with the path in the first parameter.

Success

You can have many router files in your project that you can import into another file for use. This will keep your files a mangeable size for readability.

const express = require('express');
const app = express();

// Routes
const indexRoute = require('api/routes/indexRoute');
const contactRoute = require('api/routes/contactRoute');
const authRoute = require('api/routes/authRoute');
const reviewsRoute = require('api/routes/reviewsRoute');

// Route Matchers
app.use('/', indexRoute);
app.use('/contact', contactRoute);
app.use('/auth', authRoute);
app.use('/reviews', reviewsRoute); // (1)

module.exports = app;

The reviews/add and reviews/delete paths now exist in a reviewRoute.js file as /add and /delete.

Conclusion

By the end of this section, you will have successfully learned the following:

How to write a route to set the desired response to different HTTP requests
How to use the Express Router class to group routes
How to export and import the router for use in separate file

Great job 🤗. You can go ahead and click on the link below to move on to the next step:

Using Middleware

HTTP Request Methods. ↩