November 25, 2020
Express Js Routing Tutorial | Beginners

Express Js Routing Tutorial | Beginners

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=POST. Also 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> 

Express Js Routing Tutorial | Beginners

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

4. Where to proceed from here

All express js basic routing has been discussed. You should now be comfortable with setting up express js server and express js routing but its just the basics as you would want to know more about other routes like redirect(), sending json object etc. So, always follow the official documentation  https://expressjs.com/en/guide/routing.html

Happy learning

Similar Posts:

 

admin

Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply