Express is one of the popular
web frameworks for Node.js. It provides a wrapper to very useful functionality
such as Rendering, Routing etc. In this session, i am going to cover Router()
in Express framework.
Express router is a class which
helps us to create router handlers. By router handler i mean to not just
providing routing to our app but also can extend this routing to handle
validation, handle 404 or other errors etc.
To demonstrate the usage of
Routing in Express i am going to cover the following points step by step. At the
end you will have a complete code covering all scenarios.
1.
Basic routing
2.
Advance routing using middleware
3.
Middleware Router
4.
Accessing parameter in routing
5.
Handling 404 errors
Here is our Server file that covers all the above points.
1. Basic Routing: For Basic routing Create
a file with the code
server.js
var express = require('express');
var app = express();
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log('Server started at Port: %s', PORT);
});
// Root URL
app.get('/', function (req, res) {
res.sendFile(__dirname + '/home.html');
});
// Basic Routing
app.get('/home', (req, res) => {
res.sendFile(__dirname + '/home.html');
});
app.get('/about', (req, res) => {
res.sendFile(__dirname + '/about.html');
});
app.get('/contact', (req, res) => {
res.sendFile(__dirname + '/contact.html');
});
Also, create three HTML files at the same path with the code
home.html, about.html and contact.html
home.html
(Add same code in other files replacing the naming convention)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<style>
.container {
background-color: skyblue;
height: 200px;
border-radius: 5px;
box-shadow: 2px 2px;
}
</style>
</head>
<body>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<div class="container">
<h4 style="padding: 10px;">Home</h4>
</div>
</body>
</html>
2. Advance Routing: For advance routing update
file with the code
server.js
// Advance Routing using Router
const router = express.Router();
app.use('/admin', router);
router.get('/dashboard', (req, res) => {
res.sendFile(__dirname + '/dashboard.html');
});
router.get('/development', (req, res) => {
res.sendFile(__dirname + '/development.html');
});
router.get('/training', (req, res) => {
res.sendFile(__dirname + '/training.html');
});
Also, create three more HTML files on the same path with the same above HTML code with the updated naming convention
dashbord.html, development.html and training.html
3. Middleware Router: Middleware
– as the name implies will be executed before your routes get invoked. There
are many possible usages for using Middleware for routes such as to log every
request before its invoked or finding out whether request is proper or not.
Let’s define one simple
Middleware which will print the type of Request ( GET, POST etc ).
server.js
// Router middleware, mentioned it before defining routes.
router.use(function (req, res, next) {
console.log(req.method + ' ' + req.url);
next();
});
next()
function will take your router to next routes.
4.
Accessing parameter in Routing : Before explaining this scenario, let me show you how routes with
params look like.
Route : http://localhost/admin/:name/
Route with data : http://localhost/admin/pankaj/
Route with data : http://localhost/admin/pankaj/
So name
– > pankaj. Now we can access this params in Route as well as on Middleware.
Let me show you both.
Case 1:
Accessing it in Middleware.
Assuming
the param name is “id”.
// This middle-ware will get the id param
// check if its 0 else go to next router.
router.use('/:id', function (req, res, next) {
if (req.params.id == 0) {
res.send('Message: You must pass ID other than 0');
} else next();
});
Case 2: Accessing it
in Router.
router.get('/:id', function (req, res) {
res.send('Message: Hello ' + req.params.id);
});
Now we create a separate folder Router for
structure your application better.
Here is complete code “admin.js”
const express = require('express');
const router = express.Router();
// Router middleware, mentioned it before defining routes.
router.use(function (req, res, next) {
console.log(req.method + ' ' + req.url);
next();
});
// This middle-ware will get the id param
// check if its 0 else go to next router.
router.use('/:id', function (req, res, next) {
if (req.params.id == 0) {
res.send('Message: You must pass ID other than 0');
} else next();
});
// CASE-2 This middle-ware will get the id param
// with valid admin name
router.get('/:id', function (req, res) {
res.send('Message: Hello ' + req.params.id);
});
router.get('/dashboard', (req, res) => {
res.sendFile(__dirname + '/dashboard.html');
});
router.get('/development', (req, res) => {
res.sendFile(__dirname + '/development.html');
});
router.get('/training', (req, res) => {
res.sendFile(__dirname + '/training.html');
});
// Export your router
module.exports = router;
server.js
// Import Router from admin.js
const router = require('./Router/admin');
app.use('/admin', router);
5. Handling
404 errors
server.js
// If any of the above URL not matched
// will call FALLBACK function for 404
app.use('*', function (req, res) {
res.status(404).sendFile(__dirname + '/404.html');
});
Now Create 404.html in same
folder and it will be accessed when unrecognized URL will be called.
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404</title>
<style>
.status {
align-items: center;
text-align: center;
font-size: 500%;
}
</style>
</head>
<body>
<p class="status">404!</p>
</body>
</html>
