Nodejs on the rocks: Express.js

MEAN

Express JS is a web framework which makes it easier to build a web server in Node JS.

Express helps in writing the NodeJS code cleanly.

Installation

  1. npm install express save
  1. Building and running HTML on a web server

No need to mention header with Content-Type etc. like done before in nodejs.

  1. var express = require(‘express’);
  2. var app = express();
  3. app.get(‘/’, function(req,res){
  4. res.send(‘<html><head></head><body><h1>Hello Sarthak, Welcome to express!</h1></body></html>’)
  5. });
  6. app.listen(3000);

run as >nodemon file.js

2. Using it to build a API.

  1. var express = require(‘express’);
  2. var app = express();
  3. app.get(‘/api’, function(req,res){
  4.     res.json({firstname: ‘Sarthak’, lastname: ‘Srivastava’})
  5. });
  6. app.listen(3000);

Send request to localhost:3000/api

3. Routing in express js

  1. var express = require(‘express’);
  2. var app = express();
  3. app.get(‘/person/:id’, function(req, res){
  4. res.send(‘<html><head></head><body><h1>Hello, Your ID is : ‘+req.params.id+‘</h1></body></html>’)
  5. });
  6. app.listen(3000);

request to http://localhost:3000/person/123

4. Using static files and middleware using Express

Middleware means code that sits between req. and res.

Where static files are HTML, CSS, IMG etc files

//middleaware

  1. app.use(‘/assets’, express.static(__dirname, +‘/public’));
  1. var express = require(‘express’);
  2. var app = express();
  3. app.use(‘/assets’, express.static(__dirname, +‘/public’));
  4. app.get(‘/css’, function(req,res){
  5. res.send(‘<html><head><link href = assets/style.css type = text/css rel=stylesheet></link></head><body><h1>Hello Sarthak, Welcome to express!</h1></body></html>’)
  6. });
  7. app.listen(3000);

public/style.css

  1. body{
  2.     background: pink;
  3.    
  4. }

req to http://localhost:3000/css

4. Template and Template Engines in Express JS

Express comes with whole variety of template engines like JADE, EJS etc

Lets use EJS, it is similar to ASP.net, PHP etc.

Installing EJS

  1. npm install ejs save

index.ejs

  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Hello to EJS.
  7.         </h1>
  8.     </body>
  9. </html>

Person.ejs

  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Person: <%= ID %> <br/>
  7.             Person ID length: <%= ID.length %>
  8.         </h1>
  9.     </body>
  10. </html>

app2.js

  1. var express = require(‘express’);
  2. var app = express();
  3. app.set(‘view engine’,‘ejs’);
  4. app.get(‘/’, function(req, res){
  5.     res.render(‘index’);
  6. });
  7. app.get(‘/person/:id’, function(req, res){
  8.     res.render(‘Person’, {ID: req.params.id});
  9. });
  10. app.listen(3000);

http://localhost:3000/

http://localhost:3000/person/sarthak

5. Rendering Query String

In a GET request the query string can be rendered from the API url.

GET/api?id=4&page=3

  1. var express = require(‘express’);
  2. var app = express();
  3. app.set(‘view engine’,‘ejs’);
  4. //GET
  5. app.get(‘/person/:id’, function(req, res){
  6.     res.render(‘personGet’,{
  7.         ID: req.params.id,
  8.         Qstr: req.query.Qstr
  9.     });
  10. })
  11. app.listen(3000);

personGet.ejs

  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Person: <%= ID %>
  7.             <br/>
  8.              Query String value: <%= Qstr %>
  9.         </h1>
  10.     </body>
  11. </html>

http://localhost:3000/person/tony?Qstr=123

6. Accessing POST request parameters

It can be done via body-parser module

  1. npm install bodyparser save

Since in POST request the query string is in the body of the request unlike the GET request.

Here for HTML data we will use URLencodedParser

js file

  1. var express = require(‘express’);
  2. var bodyparser = require(‘body-parser’)
  3. var app = express();
  4. app.set(‘view engine’,‘ejs’);
  5. var urlencodedparser = bodyparser.urlencoded({extended:false})
  6. app.get(‘/’, function(req, res){
  7.     res.render(‘bodyparserpost’);
  8. });
  9. app.post(‘/person’,urlencodedparser, function(req, res){
  10.   res.send(‘Thank you for POST req.’)
  11.   console.log(req.body.firstname);
  12.   console.log(req.body.lastname);
  13. })
  14. app.listen(3000);

ejs code file

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. Fill the form:
  6. <form method=“POST” action=“/person”>
  7.    firstname: <input type=“text” id=“firstname” name=“firstname” />
  8.     <br/><br/>
  9.     lastname: <input type=“text” id=“lastname” name=“lastname” />
  10.     <br/><br/>
  11.     <input type=“submit” value=“submit”/>
  12. </form>
  13. </body>
  14. </html>

http://localhost:3000/

 Click on Submit:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s