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.