Express Js Routing Tutorial | Beginners

by Priyanka Arora
Jun 6, 2020
1643 Views
2

Express Js Routing is among the primary things to know when starting your journey with nodejs and expressjs. In this tutorial we will know more about express js, the difference between express routing and express router routing, setting up routes, and playing with HTML forms. Initially we would set up a home page route. Then render a template on signup form which on submit would post the parameter to welcome page. So, this tutorial will lead you from scratch and at par with the fresher level experienced people in the industry. So, let’s get started now.

Express JS Routing

Express js goes in hand with nodejs as it is the most popular nodejs web application with features like routing, debugging, middleware. here We will discuss express js routing. There are two types of routing one using router other using express js default routing. The tutorial is regarding express js default routing but let’s talk a bit of the difference here too. Router() links to the subroutes whereas app.get() route to individual respective routes which would be more clear with this example.

app.use('/', homepage); route to '/'path

app.get('/link1', link1page); route to '/link1'path

app.get('/link2', link2page);          route to '/link2' path


var router = express.Router();

app.use('/', router); // Mount the router as middleware at path /

router.get('/sub1', sub1page); route to /sub1 path

router.get('/sub2', sub2page);       route to /sub1/sub2 path

Now, let’s begin the code and get straight into express js routing


1. Setting up Express Js Application

var express = require('express');
var app=express();
app.get('/',function(req,res)
{
 res.send('<h1>Welcome to home page</h1>')
});
var server=app.listen(3000,function(){});

Add the above code in app.js and run using npm app.js.  Here you have developed an express server which would be listening on port 3000  and on landing page you would get a welcome message as below.


Express Js Routing Tutorial | Beginners

2. Express Js Routing with Template

Now, will attach a template to route /signup and on submit it will route to path /welcomepage  action method=POSTAlso for template path we are using node module path to give the existing path of signup.html page. Also  to parse the request parameters we have used body-parser. So do       npm install body-parser.


var express = require('express');
var app=express();
const bodyParser=require('body-parser');
app.use(bodyParser.urlencoded({extended:true}));
const path=require('path');
app.get('/',function(req,res)
{
 res.send('<h1>Welcome to home page</h1>')
});
app.get('/signup',function(req,res)
{
 res.sendFile(path.join(__dirname+'/signup.html'));
});
app.post('/welcomepage', function(req,res)
{
const username=req.body.username;
console.log(username);
}); 

var server=app.listen(3000,function(){});
<div>
 <div><h1>Signup Form..</h1></div>
 <div>
 <form method="POST" action="/welcomepage">
 <input name="username" id="username"/>
 <input type="submit"/>
 </form>
 </div>
</div> 

Since its a post route you won’t see results on the browser as it uses GET request. Hence we have consoled the output like below but to test you should always use postman.


Express Js Routing Tutorial | Beginners

Frequently Asked Questions

Express is for server side routing so that when client would hit api to fetch data it would hit express routes.

Definitely. Express just provides more cleaner approach.

https://expressjs.com/en/guide/routing.html contains the routing documentation.

Yes parse the request object you need to install this dependency too.

Similar Posts

Mean stack tutorial in 30 minutes-2020
Jun 6, 2020, 1643 Views, 2
Mysql with NodeJs Connection and CRUD
Jun 6, 2020, 1643 Views, 2
Sql Server with NodeJs CRUD Operations
Jun 6, 2020, 1643 Views, 2
MongoDB with NodeJs CRUD Tutorial Guide
Jun 6, 2020, 1643 Views, 2

Comments Section

Rajat Mondal
Jun 15, 2021

Nice!!

Viraj
Nov 11, 2020

Such a perfect piece:)