Getting started with Node.js, Express and Jade using the WebStorm IDE

Node.js

Over the last few weeks I’ve been experimenting with Node.js and learning about how to use some of the great packages written for it. Node.js is a popular framework for building scalable server-side applications in JavaScript. To achieve high concurrency and scalability, Node.js leverages JavaScript’s event loop and function callbacks for longer running processes so that complex concurrent thread locking logic is not required. Manuel Kiessling’s Node Beginner Book goes through a great Node.js tutorial and explains in detail how to call long running processes (such as a database query or disk I/O operation) and not cause the request to block other operations.

In this post I’ll be explain how to quickly get up and running with Node.js and Express, a great web application framework for Node.js that handles a good bit of the plumbing described in the Node Beginner Book such as building a request router. Before diving into the WebStorm IDE and Express, I suggest you go through the Node Beginner Book tutorial so that you have a better understanding of the core Node.js platform.

The WebStorm IDE

If you are ready to see how WebStorm and Express make Node.js development fast and enjoyable, go to www.jetbrains.com/webstorm/, and download and install the trial version. Also ensure you’ve already installed node.js over at nodejs.org.

Once you have WebStorm installed, fire up the IDE and we can create our first Node.js Express application using the Jade template engine. Click “Create New Project” from the welcome screen.

Enter a project name, project location and choose “Node.js Express App” as the project type.

On the next screen you need to ensure WebStorm knows where the node executable files are and make sure you have “Jade” selected as the template engine: After clicking ok, WebStorm will use npm (the node package manager) to download express and jade to your project directory under the “node_modules” folder.

Project Directory Structure

Let’s take a look at the directory structure created by WebStorm: In the main directory WebStorm has created app.js, our main entry point for our Node.js application, app.js has been initialized to use some modules, configure the template engine to jade, setup routes and start listening on the configured port (which in our case happens to be 3000). You can also see we have a node_modules directory setup by npm for the packages our project required, and a public directory for our client side javascript, css, images, etc… You’ll also notice that we have a directory called routes, and one called views. The index.js and user.js files we have within routes contain functions that correspond with the configured url routes within the app.js file:

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

Finally, the views directory contains our jade templates which are rendered on the server then passed to the client when responding to a request (more on the jade templates later).

Routes

WebStorm allows us to quickly go to the definition of functions using Ctrl + Left Mouse click on Windows or Command + Left click on Mac.

The index.js route file is very straightforward:

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

“exports” just means that this function is going to be available to other files which “require” this file. Notice that each route takes the “req” and “res” as parameters, corresponding to express Request and Response objects. Currently, all our index function does is tell the Response object to render the “index” view passing a JavaScript object as data to the index template.

Jade Templates

Since we are using the Jade template engine, the file that goes along with the index view is: in “routes/index.js” and looks like this:

extends layout

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

Notice the Jade template syntax is very clean, you can build your HTML markup without using a ton of angle brackets and your tags are automatically closed for you. Jade templates are sensitive to whitespace at the start of lines, you can use tabs or spaces, but not both. Indenting signifies that the indented tags will be rendered within the non-indented tag above it. The ”#{titile}” will be replaced with the word “Express” because that is the value of the corresponding title variable in the data object we passed into the res.render call. Finally notice the “extends layout” at the top of the Jade template, that says that we are leveraging the parent template’s markup (within layout.jade) and that this index.jade template will override blocks defined in the parent. Here is the contents of “views/layout.jade” that renders the rest of our page content:

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

You can learn more Jade template syntax here.

Starting up the Node server

Now that we’ve seen a bit of what was created in our new Node.js Express project, let’s start up the Node.js server and see what it looks like in the browser. To do that we click the green run button on the top toolbar in WebStorm, if we wanted to debug the app (to be able to set breakpoints, step through our server JavaScript code, and set watch variables), we could hit the debug button just next to the run button instead.

Once you see: “Express server listening on port 3000” point your browser to: http://localhost:3000 and you’ll see a less than exciting page saying “Welcome to Express”.

Let’s code some additions

Now that we’ve started our Node.js server and seen what we have so far, let’s expand on it a bit and learn a little more about Node.js and the Jade template engine. Notice that we also have a user.js route that is invoked by app.js when you navigate to http://localhost:3000/users. First off, let’s just add a link to that url from our index page. We’ll simply add to our index.jade file:

  a(href='/users') Users

Make sure this new line is indented under the “block content” line within the file so it is treated as a child element to the content block.

Now for the fun stuff, right now all our user.js route does is

res.send("respond with a resource");

let’s make it so our user.js contains a list of users and renders that list out with a new Jade template.

If we were building a real app we would want to put our supporting User objects, and any database calls in a separate file, but for our example, we’ll just create a User “class” within routes/user.js:

var User = function(fname, lname, phone) {
    this.FirstName = fname;
    this.LastName = lname;
    this.Phone = phone;
};

var users = [];

We’ve now created a structure for our User objects containing FirstName, LastName and a Phone number, we also have an array called “users” to hold the list of the users our application knows about. Let’s now create an “init” function to populate our users array.

exports.init = function() {
    users.push(new User('Matt', 'Palmerlee', '818-123-4567'));
    users.push(new User('Joe', 'Plumber', '310-012-9876'));
    users.push(new User('Tom', 'Smith', '415-567-2345'));
}

Also we need to invoke this init method somewhere, let’s add a call to it at the end of our app.js file:

user.init();

Now, let’s change the method that is called when you navigate to “/users” so that it renders out a new jade template for this route that will list the users we know about:

/*
 * GET users listing.
 */
exports.list = function(req, res){
    res.render('users', {'users':users, 'title':'Users'});
};

The data we pass to the (soon to be created Jade template) is an object containing our users array and a title.

Now let’s create our new view Jade file. Right click on the views directory in WebStorm and select “New -> Jade File” and name it “users.jade” this is what it should look like:

extends layout

block content
    ul
        each user in users
            li #{user.FirstName} #{user.LastName}
                p(style="margin-left:5px")=user.Phone

Notice that we are again extending the main layout file and overriding the content block. Now things are getting a bit more interesting, we are looping through the users array passed into the jade template and for each element we’ll create an html list item with the user object’s FirstName and LastName as well as the Phone number.

Now that we’ve made these changes, we’re ready to see them in action, if you still have the node server running, you can simply click the “Rerun” button towards the bottom of the WebStorm IDE.

Once we’ve restarted the server, browse again to http://localhost:3000/users and we should see our new users list:

Now we are on our way towards making a full-fledged Node.js application using Express and Jade templates with the help of the WebStorm IDE.

Node.js Resources

Here are some great resources for you to learn more about the tools and technologies I’ve discussed: Node.js Express Jade Node Beginner Book Getting Started with Node.js on StackOverflow