Express Routing

In an Express, we can route to the particular URI (Uniform Resources Identifier) through HTTP Client request method (GET, POST, DELETE, PUT and so on).

const router = express.Router();
Router class: In express have router class, we can use router class method on the HTTP verbs – GET, PUT, DELETE and etc.

The syntax of routes in an Express application − app.method(path, handler) The path is the route at which the request will run and each route can have one or more handler functions, which are executed when the route is matched.
Example :

router.get(‘/’, (req, res, next) => {
   res.send(‘ARTICLES’);
});

 


In an example below we are using an express route to access the resources of HTTP get / or root, /about, /contact etc.

Step 1: First create app.js file in root folder, add the following code 

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

//port 

const port = 3000;
//init app

const app = express();
const index = require('./routes/index');
const articles = require('./routes/articles');
const categories = require('./routes/categories');
const manage = require('./routes/manage');
const manage = require('./routes/blog');

//set static folder

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/articles', articles);
app.use('/categories', categories);
app.use('/manage', manage);

app.listen(port, () =>{
    console.log('Server startd on port ' +port);
})

 

Step 2: Define routing for index, /about and /contact page

In root folder create a folder called routes, create following file index.js, about.js and contact.js file. Add the following code in index.js file

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

router.get('/', (req, res, next) => {
    res.send('INDEX');
});

module.exports = router;

Add route code for about.js file

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

router.get('/', (req, res, next) => {
    res.send('ABOUT');
});

module.exports = router;

Add route code for contact.js file

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

router.get('/', (req, res, next) => {
    res.send('CONTACT');
});

module.exports = router;

NOTE: We can access root file as http://localhost:3000, we can access about page at http://localhost:3000/about

 

Example 2 : We are accessing the sub path, eg we are accessing the http://localhost:3000/blog/articles/add.

Step 1: In the routes, folder adds a new file called blog.js file to access the routing code for blog and blog/articles/add.

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

router.get('/', (req, res, next) => {
    res.send('BLOG');
});

router.get('/articles/add', (req, res, next) => {
    res.render('add_article', {title: 'Create Article'});
});

module.exports = router;

 

Step 2: Create a folder view in the root folder and add two new files for the template, add_article.pug and layout.pug. Add the following code in layout.pug file

doctype html
html
  head
    title BooksBlog
  body
    block content

add the following code in add_article.pug file

extends layout

block content
  h1 #{title}

 

 

Example 3: Accessing the particular sub-path like particular articles like http://localhost:3000/manage/books/edit/2

Step 1:  We will first add manage.js code of route in routes folder.  We can access to http://localhost:3000/manage/books/edit/2, http://localhost:3000/manage/books, http://localhost:3000/manage/books/add

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

router.get('/books', (req, res, next) => {
  res.render('manage_books', {title: 'Manage books'});
});

router.get('/books/add', (req, res, next) => {
  res.render('add_book', {title: 'Create book'});
});

router.get('/books/edit/:id', (req, res, next) => {
  res.render('edit_book', {title: 'Edit book'});
});

module.exports = router;

Step 2: In view folder, we will have to add 3 file books.pug, edit_book.pug and edit_book.pug. We will add code for books.pug and same code can be added to other two files.

extends layout

block content
  h1 #{title}