Express.js Tutorial

From: http://www.hacksparrow.com/express-js-tutorial.html

As the author said, looking for a good tutorial on Express.js to help you get quickly productive in it? You have come to the right place.

1.Request flow in Express

This is how a request to an Express server flows:

Route → Route Handler → Template → HTML

The route defines the URL schema. It captures the matching request and passed on control to the corresponding route handler. The route handler processes the request and passes the control to a template. The template constructs the HTML for the response and sends it to the browser.

The route handler need not always pass the control to a template, it can optionally send the response to a request directly .

To understand how Express works, let's get working on the Ninja Store app.

Setting up the Routes

We will modify some of the stuff Express generated for us to make it more suited for our app, and more logical so that you can understand the inner workings of Express better.

Rename the index.jade file in the views folder to home.jade. This is actually a part of setting up views in Express.js, I will get there in the next section.

Delete the index.js and user.js from the routes folder. We don't need them and their presence could be potentially confusing. Create a new file called store.js in the routes folder, and put the following code in it:

exports.home = function(req, res){
  res.render('home', { title: 'Ninja Store' })
};

Then we are going to modify app.js:

Delete these

  , routes = require('./routes')
  , user = require('./routes/user')

Add the following right before var app = express();.

var store = require('./routes/store');

Delete these

app.get('/', routes.index);
app.get('/users', user.list);

and add this

app.get('/', store.home);

With that we have set up our own route for the home page.

Routes are URL schema for a website. In Express you define them using app.get(), app.post(),app.delete() etc. The get, post, delete methods are derived from their corresponding HTTP verbs.

So far we created a single route for our app. Very soon we will be creating more, but before that I'll tell you about the files in the routes directory.

The routes directory is a convention, not a compulsion. In the routes directory we create appropriately named files which will handle the routes we define in the app.js file. We will import these files into our app and assign the functions defined in them to handle various routes.

The imported file becomes sort of like an instance of the class of the route handler file. In our case./routes/store.js is the class, store is instance, and store.home is a method of the instance.

Again as a recommended convention, we create an appropriately named variable for the imported file from the routes directory. Then we pass one of its functions as the second parameter for the route. For eg:

app.get('/', store.home);

From that you might probably guess, we can pass any function as the second parameter for the route. You are correct, even this would work:

app.get('/', function(req, res) {
    res.render('home', { title: 'Ninja Store' });
});

We don't need to render HTML pages either:

app.get('/', function(req, res) {
    res.send('Look ma, no HTML!');
});

Now run the app again and see what you get. Title has changed to "Ninja Store" .

2.Rendering Views

You have seen res.render() and res.send() in action already and probably have a fair idea about what they do. res.send() will directly send a string of text to the browser and res.render() will render a Jade template.

While it is possible to create a website entirely using res.send(), it is certainly not recommended to do so, because you will only end up with a complex and dirty looking codebase. Jade is the default templating engine for Express. Let's find out the basics of res.render() and the Jade templates.

Open the file named home.jade in the views directory. Let's examine its content:

extends layout

block content
  h1= title
  p Welcome to #{title}

extend layout means, this view file should look for another view file named layout.jade in the same directory and fill in the block placeholders defined in layout.jade.

Now, let's take a look at the contents of layout.jade.

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

It does indeed have a block named content, the content for which is defined in home.jade. Note, you can use anything for block names; "content" is just a convention.