Sessions In Express: Node.js

After learning about cookies, lets look briefly about sessions in Express applications.

sessions-express-nodejs

If you’ve ever worked on any serious web application, you already know the importance of session. Creating session for logged in users, tracking the shopping cart items, storing the URL for redirect etc are some of the basic uses of sessions.

session middleware in Express: Node.js
app.js

1
2
3
4
5
6
var express = require('express');
 
var app = express();
 
app.use(express.cookieParser());
app.use(express.session({secret: 'some secret key'}));

session middleware needs cookieParser() because session objects lookup for the cookie for matching up the requests.

setting session variable in Express: Node.js
app.js

1
2
3
4
app.get('/user/:user', function(req, res){
	req.session.name = req.params.user;
	res.send('<p>Session Set: <a href="/user">View Here</a></p>');
});

session is present inside request object. So assign the string or the value to req.session.sessionName

Fetching session value in Express: Node.js
app.js

1
2
3
4
5
6
app.get('/user', function(req, res){
	if(req.session.name)
	 res.send(req.session.name+'<br /><a href="/logout">Logout</a>');
	else
	 res.send('user logged out!');
});

Here we check if the req.session.name has been set. If set, we show link to logout and also show current value present in the session variable. If the user is coming from /logout page, then we show “user logged out!” message.

destroy session value in Express: Node.js
app.js

1
2
3
4
app.get('/logout', function(req, res){
	req.session.destroy();
	res.send('<br />logged out!<br /><a href="/user">Check Session</a>');
});

Once the user clicks on /logout we destroy all the session by using req.session.destroy() We also give link to /user page, to check the fact that the session has already been destroyed.

Sessions In Express: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=vmDCakoxdwY [Watch the Video In Full Screen.]



Note: Make sure to have good session secret key – a combination of alphanumeric plus special characters. And make sure not to reveal it to anyone. Because, using this secret key / hash, someone with bad intention could possibly revoke the session and use your application as an authentic user, if care is not taken!

The main difference with cookie and a session is – session is stored on the server side and cookie on the client side.

Cookies In Express: Node.js

Cookies are one of the important recipe for building an effective web application.

cookies-express-nodejs

A cookie, also known as an HTTP cookie, web cookie, or browser cookie, is a small piece of data sent from a website you are surfing and stored in a user/client computer. Every time the user loads that website again, the browser sends this cookie back to the server to notify the website of the user’s previous activity.

This way, using cookie, we could track user activities like her navigational behaviors, previous purchases on our site or previous leads etc.

Setting Cookie in Express: Node.js
app.js

1
2
3
4
5
6
7
8
9
10
var express = require('express');
 
var app = express();
app.use(express.cookieParser());
 
app.get('/user/:user', function(req, res){
	res.cookie('username', req.params.user)
	    .send('<p>Cookie Set: <a href="/user">View Here</a>');
});
</p>

Using express’s cookieParser() middleware we can enable working with cookies.
Once the user navigates to /user/someUserName URL, the cookie is set with the name username and the value is actually fetched out of the request object’s params.

General Syntax for setting Cookie

res.cookie('cookieName', value, {expires: new Date() + 99999, maxAge: 99999});

Set a name to the cookie, give it some value. Also you can set the optional settings like, expiration date or the maxAge the cookie will be alive on the client computer.

Accessing Cookie in Express: Node.js
app.js

1
2
3
app.get('/user', function(req, res){
	res.send(req.cookies.username);
});

Once the user visits /user route, we fetch the value present in the req.cookies.username and display it to the user.

Cookie In Express: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=mdvQ74KL-fU [Watch the Video In Full Screen.]



Note: We could see the value stored in a cookie, by using chrome’s console window and typing document.cookie

Clearning Cookie in Express: Node.js
app.js

1
2
3
4
app.get('/user', function(req, res){
	res.clearCookie('username')
           .send(req.cookies.username);
});

You could remove a cookie by using clearCookie method of response object.

Once the cookie has been removed, you can set it again explicitly using Chromes console window.
Type: document.cookie = “username = Microsoft”
now refresh the browser, and you’ll see Microsoft being displayed!

Middleware In Express: Node.js

We’ve been using middlewares in our previous video tutorials. Today, we’ll have a look at these middlewares.

middleware-connect-express-nodejs

Connect is a middleware framework of Node.js

But since connect is one of the dependencies of Express, we need not install it separately. If we have installed Express, then we already have connect.

Middeware in Express: Node.js
app.js

1
2
3
4
5
6
7
8
var express = require('express');
var app = express();
 app.use(express.bodyParser());
 app.use(express.methodOverride());
 app.use(express.cookieParser());
 app.use(express.session({secret: "some secret key"}));
 app.use(app.router);
 app.use(express.static(path.join(__dirname, 'public')));

express.bodyParser extensible request body parser
express.methodOverride faux HTTP method support
express.cookieParser cookie parser
express.session session management support with bundled MemoryStore
express.static streaming static file server supporting Range and more
express.directory directory listing middleware

Middleware In Express: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=c4ScybD2690 [Watch the Video In Full Screen.]



For list of all supported middleware, visit senchalabs
Also check the list of all the 3rd-party middleware supported by Connect.

Note: Ordering of these middleware is very important.
For Example:
1. You can only override method after you’ve parsed the body, so methodOverride() must come only after bodyParser()
2. Similarly, session middleware depends on cookieParser(), so session middleware must come only after cookieParser()

As your application becomes popular you’ll need middlewares to handle csrf( Cross-site request forgery ), DDos attacks etc. Also it’s very important to validate the user requests before you allow the user request to fetch the data from your database. Learn to use middleware properly, and I’m sure, it’ll be a life-saver for your application.

Advanced Routing Using Express: Node.js

After learning basics of routing, lets look at some of the advances/complex routing techniques of Express.

routes node server request response technotip Basic Routing Using Express: Node.js

In this video tutorial, we shall teach you how to work with multiple params and also defining routes with regular expressions.

Two params in a Route: Express
app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var companies = [
   {
      "name": "Apple",
      "product": "iPhone"
   },
   {
      "name": "Google",
      "product": "Nexus"
   },
   {
      "name": "Oracle",
      "product": "sql"
   },
   {
      "name": "Microsoft",
      "product": "Windows"
   }
 ];
 
app.get('/user/:from-:to', function(req, res){
    var from = parseInt(req.params.from, 10),
        to   = parseInt(req.params.to,   10);
 
  res.json( companies.slice(from, to+1) );
});

Here we have an array of objects – which in real-time application we get from a database ( Ex: MongoDB ). Now we define a route, and get two params in a single URL. By fetching and parsing those two params, we pass it to slice method of array and get array objects within the range/limit. Also note the use of response in json formatting while sending the data using response object.

Regular Expressions in Routes: Express
app.js

1
2
3
4
5
6
7
8
9
app.get(/\/user\/(\d*)\/?(edit)?/, function(req, res){
 
	if(req.params[0])
	 res.send("Viewing user id: "+req.params[0]); 
	else if(req.params[1])
	 res.send("editing user with an id "+req.params[0]);
	else
	 res.send("Enter User ID!!");
});

we enter our regular expression between two forward slashes. And to escape the forward slash present inside our regular expression, we make use of escape character i.e., a back slash. After /user/ we can have zero or more digits, after that an optional edit keyword followed by an optional trailing forward slash.

These routes match our pattern:
/user/
/user/userId/
/user/userId/edit
/user/userId/edit/

Depending on which URL the user is requesting, we could serve the purpose, using conditionals.

Advanced Routing Using Express: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=jYqhlVYnr30 [Watch the Video In Full Screen.]



Note: In our example we are simply displaying the view and edit modes. But in real-time applications you could replace it with some database queries and make sure the operations makes proper sense.

Basic Routing Using Express: Node.js

Today let us learn a very important lesson in any web application development i.e., setting up the routes.

basic route using Express Node.js

Express is an excellent web framework for Node.js

Basic Routing with Express
app.js

1
2
3
app.get('/', function(req, res){
    res.send("Hello World!"); 
});

This would output Hello World when users access the index or home page.

Basic Routing with Express
app.js

1
2
3
app.get('/myPhone', function(req, res){
    res.send("Sony Xperia!"); 
});

This would output Sony Xperia! when users access the /myPhone route.

Dynamic Routing with Express
app.js

1
2
3
app.get('/user/:username', function(req, res){
    res.send(" "+req.params.username+"'s profile!"); 
});

When we request information of particular user by using his username in the URL, it fetches the username using request object and displays appropriate message.
Example: If the user requests /user/Satish it’ll output Satish’s profile!

Public Folder

If we put some files inside our public directory, it would be convenient if some middlewares fetch the files directly upon user request, instead of writing routes for all those files. Connect module which is a dependency of Express web framework takes care of this.

Middleware for public folder files
app.js

1
2
3
4
5
6
var express = require('express');
var path = require('path');
 
var app = express();
 
 app.use(express.static(path.join(__dirname, 'public')));

This would set the public directory.

Middleware for public folder files
app.js

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

If you want your custom routes to be checked before the public folder, then you could specify it using another middleware, i.e., app.router

Note that, the ordering of Middleware is significant.

Sending HTML in Routs: Express
app.js

1
2
3
4
5
6
7
8
9
10
app.get('/', function(req, res){
    var msg = [
               "<h1>I love Google..</h1>",
               "<p>Because they make awesome products",
               "<br />like my Nexus 7 Tablet",
               "which is so amazing!"
    ].join("\n");
    res.send(msg); 
});
</p>

This would out put with all HTML semantics on the browser.

Get, Post, Put, Delete Requests
Web browsers by default support only get and post requests. But we can override methods and make sure our Node.js application supports even the Put and Delete requests.

Post Request
HTML Form
index.html present in public directory

1
2
3
4
5
6
7
8
9
10
11
12
13
< !DOCTYPE html>
<html>
<head>
<title>Enter your name</title>
</head>
<body>
<form action="/user" method="POST">
	<label for="name">Name: </label>
	 <input type="text" name="name"/>
	 <input type="submit"/>
</form>
</body>
</html>

Here we have a form with post method and also take note of action field value.

POST Route
app.js

1
2
3
4
5
app.use(express.bodyParser());
 
app.post('/user', function(req, res){
    res.send("Submitted user's name is: "+req.body.name);  
});

Inorder to parse the HTML page, you’ll need bodyParser middleware. Once you have it in place you can get form field entries and use it to insert the data into database or simply display as in our case with this example.

We could similarly write code for PUT and DELETE requests.
PUT & DELETE Routes
app.js

1
2
3
4
5
6
7
8
9
10
app.use(express.bodyParser());
app.use(express.methodOverride());
 
app.put('/user/:userId', function(req, res){
    res.send("Editing user with userid: "+req.params.userId);  
});
 
app.delete('/user/:userId', function(req, res){
    res.send("Editing user with userid: "+req.params.userId);  
});

By getting the unique userId of the user, you could fetch the data from database and make changes and update the information using Put request. Similarly, using the unique userId of the user, you could select and delete the information about the user!

Basic Routing Using Express: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=zHykHw9JlhE [Watch the Video In Full Screen.]



Separating Route Files
As your application grows, its hard to keep the code cleaner and maintainable, so it’s always a good idea to separate these kind of information from the main application file. So we create a file called routes and include it as a local module in our main application file.

External Route File
/routes/index.js

1
2
3
4
5
6
7
/*
 * GET home page.
 */
 
exports.index = function(req, res){
  res.send('Google Nexus 5 To Be Release Shortly ..');
};

exports is a global provided by node.js
index is a name given by us; it’s a property name and we assign a function to it.

Accessing External Route File
app.js

1
2
3
var routes = require('./routes');
 
app.get('/', routes.index);

This would output: Google Nexus 5 To Be Release Shortly ..

Configuration of Express Application: Node.js

You may often want different settings for development environment and a different settings in the production environment. Also you could keep pushing the files to server for testing. So you’ll need to test your application in two different environments: development & production

development-production-environment-express-nodejs

In situations like this, you could have environment specific configurations using express. In this video tutorial, I’ll be walking you through setting up configurations for these environments using Express, web framework of Node.js.

Main application file
app.js

1
2
3
4
5
6
7
8
9
10
var express = require('express');
var app = express();
 
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
 
app.set('view cache', true);
// app.enable('view cache');

Here we create an express object, using which we set the configurations.
First we set the port number to whatever is set by the server – which is present in the environment variable process.env.PORT if it is not set use 3000 as port number.
Next, assign views a directory: root directory( __dirname ) and views folder. You could create any folder inside root and assign it to views. Then, set default view engine as Jade. Next we enable the view cache – btw View caching is useful in production environment.

Development Environment
app.js

1
2
3
4
// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

Here we could list all the settings needed for our development environment.

Production Environment
app.js

1
2
3
4
// production only
if ('production' == app.get('env')) {
  app.enable('view cache');
}

Here we could list all the settings needed for our production environment.

Configuring Express Application: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=60xRnFSMRk8 [Watch the Video In Full Screen.]



Note: To run with specific environment settings configuration use the following command while running your Node.js application

1
2
C:/>cd node
C:/node>NODE_ENV = production node app.js

Mixins in Jade: Node.js

Mixins in Jade are much like functions/methods in many other programming languages.

mixin-jade-express-nodejs

Basically, if you’re repeating your code at many places, you could place that code inside a mixin and replace your code with the mixin call. This would make your code cleaner and maintainable over long run.

Related Read: Loops and Conditions In Jade: Node.js

mixins in Jade
mixin.jade

1
2
3
4
mixin fetch(users)
 ul
 -each user in users
  li= user

This would get the users as argument – loop through each user and put the individual user in the list item of an unordered list.

include in index file: Jade
index.jade

1
2
3
4
5
6
7
8
9
include mixin
 
- users = ["Apple", "IBM"];
mixin fetch(users)
 
<br /><br />
 
- users = ["Google", "Amazon"];
mixin fetch(users)

Here we have included the mixin.jade file, and now use our fetch mixin and pass-in our array variable, which is converted into an unordered list of items and output on the browser.

Mixins in Jade: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=g6DPkVpfauc [Watch the Video In Full Screen.]



Note: Clearly, in real-time applications the array or object come from the database.
Example: You might encounter the situation to list out all the users in your list and list of all the participating companies. Or list of all companies someone has worked at. In such cases you’ll get an array of objects which you need to out put to the user in a well formatted manner. In situations like this, mixins are a great tool to have, to avoid the necesity to repeat your code allover your application.

Have all your mixins in a single file and then include that file wherever you are calling your mixins.

Loops and Conditions In Jade: Node.js

After going through the basics of Jade, lets learn about loops and conditional statements in Jade.

loops-and-conditions-in-jade-nodejs

Note: Since most text editors designed for web remove the indentation(and some retain only new line characters), thus compressing the file and optimizing it for the web use. But this doesn’t serve any good for writing Jade. Because indentation is at the heart of Jade syntax!

So in this tutorial, we are using a Chrome extension called Jade Editor to illustrate loops and conditional statements. You can simply test your code in this Google Chrome extension and then copy over the code to your actual file. This would even help reduce the complicated errors in lengthy files.

each loop in Jade
arrays

1
2
3
4
5
- names = ["Apple", "Microsoft", "Oracle"];
 
ul
each name in names
  li #{name}

output

  • Apple
  • Microsoft
  • Oracle

sign is optional for each loop. Here it loops through the array names and prints out each element of the array.

each loop and loop index in Jade
arrays

1
2
3
4
5
- names = ["Apple", "Microsoft", "Oracle"];
 
ul
each name, i in names
  li #{i+1}: #{name}

output

  • 1: Apple
  • 2: Microsoft
  • 3: Oracle

This prints out name along with the index number. Since index in JavaScript array starts with 0, we add 1 to it, to make it more sensible for non-programmers.

for loop and loop index in Jade
arrays

1
2
3
4
5
- names = ["Apple", "Microsoft", "Oracle"];
 
ul
for name, i in names
  li #{i+1}: #{name}

output

  • 1: Apple
  • 2: Microsoft
  • 3: Oracle

Same holds good even for for loop.

each loop in Jade
objects: Key, Value pair

1
2
3
4
5
- obj = {cmp1: "Apple", cmp2: "IBM"};
 
ul
each val, key in obj
  li #{key}: #{val}

output

  • cmp1: Apple
  • cmp2: IBM

Since objects in JavaScript has {key: value} pair, we make use of it to extract and print from the object.

for loop in Jade
objects: Key, Value pair

1
2
3
4
5
- obj = {cmp1: "Apple", cmp2: "IBM"};
 
ul
for val, key in obj
  li #{key}: #{val}

output

  • cmp1: Apple
  • cmp2: IBM

Same holds good to for loop too.

Conditional Statements

if, else if, else In Jade
Conditional Statements

1
2
3
4
5
6
7
8
- var fc = 2;
 
if( fc === 0 )
 p You have no followers
else if( fc === 1 )
 p You have 1 follower
else
 p You have #{fc} followers

output
You have 2 followers

Here we use the condition to check for execution of block of code. Also note that sign before if, else if and else keywords are optional.

Loops and Conditions In Jade: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=wL60uzhwwTA [Watch the Video In Full Screen.]



In coming video tutorials, we shall learn about Mixins.

Basics of Jade – Template Engine: Node.js

Lets learn some of the basics of Jade Template Engine. Jade is the default template engine for Express Web Framework of Node.js Also note that, Jade and Express are open source product of the same company, so go very well with each other!

jade-template-engine-nodejs-express-web-framework

Using template engine might seem pointless in the beginning, but if you’re building a large-scale application, it’s a handy tool and you’ll feel good about your decision to use one for your project.

Make sure you’ve installed Express Web framework and Jade module locally for your application. You can find the procedure at Express Web Framework: Node.js

Configuration Section
app.js

1
app.set('view engine', 'jade');

This would let your application know that you’ll be using Jade as Template Engine. This way, you need not mention the Template Engines file extension each time.

Jade File: Indentation
index.jade

1
2
3
4
html
 head
  title Technotip
 body

Would output

1
2
3
4
5
<html>
 <head><title>Technotip</title></head>
 <body>
 </body>
</html>

Indentations in Jade decide which element(s) is/are a child off which element.

Jade File: Variable
index.jade

1
2
 - var name = "Love For Design"
 p= name

and

Jade File: String. Minus sign significance
index.jade

1
2
 - var name = "Love For Design"
 p #{name}

Out put Love For Design on the browser, inside a paragraph tag.

Jade File: Code Interpretation – REPL
index.jade

1
 p #{ 1 + 5 }

This outputs 6 on to the browser inside a paragraph tag.

Jade File: String Length Management
index.jade

1
2
3
4
5
6
7
 p
  | My Name is Satish
  | I Love web development
  | I love helping people
  | by teaching them whatever I know
  | I believe, this is a good cause of 
  | spreading knowledge.

This would treat the entire string as a single line text, and out put looks like:
My Name is Satish I Love web development I love helping people by teaching them whatever I know I believe, this is a good cause of spreading knowledge.

Jade File: Id’s and Classes
index.jade

1
2
div#wrapper
  p.highlight I Love Node.js

This would apply the id wrapper to div and highlight class to p tag.

Jade File: Multiple id and class
index.jade

1
2
div#wrapper.content.highlight
  p I Love Node.js

We could even assign multiple id’s and classes to a html element.

Jade File: Anchor Tag
index.jade

1
a(href="/about", rel="nofollow") Satish

This would wrap the word Satish with anchor tag and nofollow attribute.

Jade File: Anchor Tag and Image Tag
index.jade

1
2
a(href="/about", rel="nofollow") Satish
img(src="1.gif", alt="Child Eating KitKat")

This would output Satish with anchor tag and nofollow attribute. Also an image with alt attribute attached to it. Both these tags are siblings.

Jade File: Hyperlink the Image file – Hypermedia
index.jade

1
2
a(href="/about", rel="nofollow")
 img(src="1.gif", alt="Child Eating KitKat")

Indent img tag inside anchor tag and the image gets linked to by the anchor tag.

Jade File: Writing Function inside Jade file
index.jade

1
2
- var fn = function() { return "android KitKat"}
p #{fn()}

This outputs android KitKat to the browser.

Jade File: Accessing elements of Object
index.jade

1
2
3
4
- obj = { name: "Apple", product: "iPhone"}
ul
  li #{obj.name}
  li #{obj.product}

This would output

  • Apple
  • iPhone

Jade File: Accessing elements of an array
index.jade

1
2
3
4
- obj = [ "Nexus 5", "iPhone 5S"]
ul
  li #{obj[0]}
  li #{obj[1]}

This would output

  • Nexus 5
  • iPhone 5S

Jade File: Including another jade file
index.jade

1
2
p
 include show

This would include the contents of show.jade file inside index.jade file.

Basics of Jade – Template Engine: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=xNoWTLsZbaU [Watch the Video In Full Screen.]



Note:
sign tells jade that the code that follows should be executed.
= sign tells that the code should be evaluated, escaped and then output.

Stay subscribed: In next video we’ll show how to use bootstrap + Express + Jade + Node.js
Building a web form. Loops and Conditional statements present in Jade.

Auto Restart Server With NoDemon: Node.js

As we have already started using Web Framework of Node.js i.e., Express, we’ll be building considerably large web applications, and it needs us to edit the files often. We need to restart the server every time we save changes to main application file. This would start consuming lot of time and sometimes we may forget to restart the server and may think that our application file has bugs, as it doesn’t reflect on the browser!

node-server-auto-restart

To solve this issue, we could make use of some dependency modules which listens to the changes we saved to these main node application file and restarts the server automatically by itself.

Package File
package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "route-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "jade": "*",
    "nodemon": "*"
  }
}

As you can see we have added nodemon as a dependency to our application.

Local Module Installation
installation of dependencies

1
npm install

This installs all the dependencies listed in package.json file. If some of the dependencies are already installed, it ignores such things and installs the new dependencies listed in package.json file.

1
nodemon app.js

Since NoDemon is a local module to our application, you can not execute your node application using above command. However there is a simple work around for this:

Change starting point of execution
package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "route-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "nodemon app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "jade": "*",
    "nodemon": "*"
  }
}

In above file we change the value of start from node app.js to nodemon app.js

Execution Command
Command Prompt / Console

1
npm start

Now this command would trigger the nodemon app.js present inside package.json file, which is local to our specific application.

Auto Restart Server With NoDemon: Node.js


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=eMZZa1nh8iY [Watch the Video In Full Screen.]



Now whenever we make changes to app.js file, and hit save, nodemon object listens to the new changes we saved, and restarts the server. This way we save a lot of time while in development mode, and directly see the changes reflect on our web browser almost immediately upon refreshing the web browser.

Note: Changes to files in public directory and the .jade files doesn’t require a server restart to reflect on the browser. These are files which are simply rendered upon calling, so whatever is present in these files are [compiled and] shown whenever there is a request to it.