Skip navigation

Introduction to Node.js: Part 2

Jon Price - The C2 Group

The C2 Group

Read Node.js part one here: Introduction to Node.js: Part 1

In my first Node.js introduction, we discovered Node.js and how to set it up. Once we had it up and running, we looked briefly at how we could serve up simple web pages.

In this tutorial, we will look at a Node.js package that simplifies the creation of a Node.js web server and an html templating package. We will create a simple web application to familiarize ourselves with these tools.

Getting Started

In order to get started, we will need to install two Node.js packages. These packages are Express and Jade. To begin, create a new folder where you will keep this applications project files. Inside this folder, create two folders that will be used to keep our html templates, css, and javascript files.

C:>  mkdir part2
C:\part2>  mkdir public
C:\part2>  mkdir views

The view directory will keep our website template files and the public directory will be for static files (css/javascript). We will not be using the public directory as part of this tutorial.

Next, we will install the two node packages we will use to build our sample application. This is done by issuing the following command: npm install <package name>.

C:\part2>  npm install express
C:\part2>  npm install jade

Creating the server

Express (Express.js) is the Node.js package. Complete documentation can be found at the Express.js website. Express.js is a lightweight web application framework. Using Express we can quickly stand up a web server and start serving web applications, RESTful web services, or most anything else you can dream up on the web.

The main file that will run the webserver will be called app.js. Here it is in its entirety:

app.js

var express = require('express');
var app = express();
var http = require('http');
 
app.configure(function() {
    // Configure template engine
    app.set('view engine', 'jade');
    app.set( 'view options', { layout: false } );
    app.locals.pretty = true;
 
    // setup public directory for static files (css/js)
    app.use(express.static(__dirname + '/public'));
 
    // Other express configurations
    app.use(express.json());
    app.use(express.urlencoded());
    app.set( 'port', 8080 );
});
 
// Default route.  GET requets made to the root of the site will
// serve up the index.jade file.
app.get('/', function(req, res) {
    res.render('index.jade', {layout: false});
});
 
// Start up the http server using the express application on
// port 8080.
http.createServer( app ).listen( app.get('port'), function() {
    console.log( 'Listening (' + app.get('env') + ') on port ' + app.get('port') );
    
    // more here later
});

We create the Express application, configure it, create the first route, and then start the server. In order to run the server you would issue the following command in your command prompt:

C:part2>  node app.js
Listening (development) on port 8080

You should now be able to use your web browser of choice and browse to http://localhost:8080/.  Right now nothing will be returned because there is no index.jade file.

Creating Your First Template

We are using the Jade templating engine to render the application. Jade looks very similar to html except it allows us to use more advanced features. Defining variables and control structures will allow for more advanced control over the layout of the page. We will look further at Jade features in our next tutorial, part 3. For now, the important thing to know is the file is structured. Each block of your Jade file must be indented. You also cannot mix spaces and tabs in a single file.

In the views directory create a file named index.jade. Here is this file in its entirety:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Tutorial Part 2</title>
  </head>
  <body>
    <p>Hello Jade</p>
  </body>
</html>

Restart your app.js node application and then navigate to http://localhost:8080/. You should now see the phrase Hello Jade in your browser.

Have questions about Node.js? Post your questions or comments for Jon Price below.