Riding ExpressJs and Node.js to the Web

by | Jan 24, 2018

Originally published: IBM Systems Magazine on 5/13/15
Author Notes: Jade has been renamed to Pug.

One of the primary uses of Node.js is for creating Web applications. When it comes to popular Web frameworks for Node.js, Expressjs.com is at the top of the list. In this article, I’ll show how to get up and running quickly with a simple app that displays a listing of customers and explain the various technologies involved along the way.

First things first: Create a directory named nodejs_expressjs and cd into it, as shown:

You’ll notice two && characters in the middle. This allows me to enter two commands and have them execute in succession. I point this out because you’ll find this in Node.js documentation and I wanted to explain what it does.

Next, we need to use npm, Node Package Manager, to install the express package (aka “module”). Notice it will also download and install all the dependencies of express. This is a big timesaving feature as was discussed in my previous article.

Now that ExpressJs is installed, we’re ready to start developing our Web application. Hello World is always a good place to start. Create a file named app.js and insert the following code into it:

The first line is bringing in the express framework and the second is gaining access to the app object (in the end what we need). Next, we see a call to app.get(...). This is saying “whenever an HTTP GET request is made for the site’s root, send the words ‘Hello World’ as the response.” The second parameter is an anonymous function that’s called upon to handle requests to the root of the site. The last line tells the application which port to listen on (in this case port 8001).

Now it’s time to start the application for the first time and see if it works. You can start the app using the following syntax:

You should see something like Figure 1 if it worked.

Our first working application.

Our first working application.

A next step of making this a legitimate application is to create a package.json file, which will store things like module dependencies, author, version, etc.—much like what the express module uses its package.json file for. To create a package.json file, we use the npm init command, as shown:

That command will prompt you for a number of values with an end goal of generating a package.json file similar to the following. Notice how it recognized that express was installed already in the node_modules/ folder.

Introducing Jade

Next, we want to further develop our application by implementing a template engine to make creating dynamic HTML pages simpler. We’ll select the Jade template engine due to its popularity and flexibility. To install Jade, we will again go to the npm install command, except this time we’ll add a –save option at the end to declare we’d like this to be retained in the package.json file.

Following we see the modified package.json file with reference to the Jade module.

Next, we need to create a folder to hold our new template engine files so we can keep them separate and organized from the rest of the application. Run the following mkdir command to create a directory named views:

Within the views directory, create a file named index.jade and populate it with the following text, making sure to retain the leading spaces. What you see is Jade syntax that aims to make HTML composition significantly less “noisy” (i.e., more whitespace). Indentation in Jade allows us to declare when closing tags should be assumptively inserted. For example, the head tag will close when the body tag is encountered because they’re at the same indentation depth.

When you see an equal sign (=), or exclamation plus equal sign (!=), it means the content on the right is a variable made available to the view from the controller. There are many more aspects you can learn about in the Jade reference.

Following are the necessary Jade additions for views to work in app.js. First, we use app.set() to declare the folder where views are stored and then set the view engine to ‘jade’. Once the view engine is set, we can alter the contents of app.get() to invoke res.render(), passing the name of the view (index) and set named variables we want to pass to the view—namely title and message.

At this point, we’re ready to start the application again, with the following command. If your application is still running from last time, you’ll need to first end it (i.e., Ctrl + C) and start it again. Doing this will pick up the latest changes in app.js.

More Dynamic

Now that we know how to pass variables to the view layer, let’s make it a bit more dynamic by retrieving database rows to display a list of customers from table QIWS.QCUSTCDT. This table ships with IBM i. To accomplish this, we’re first going to create a new file named customers.jade in the views directory and populate it with the following content.

Here we learn about Jade’s ability to iterate over a result set using the each keyword. The results variable was provided by the controller (app.js) and the row variable is occupied with an SQL row at each iteration. LSTNAM and CUSNUM are columns in DB2 table QCUSTCDT.

Next, we need to make changes to app.js that query DB2 to provide the results variable to the customers.jade view, as shown. Note, only additions are being shown.

Next, let’s introduce a feature of displaying more information about a customer when it’s clicked. We can do that by modifying the td tag holding the CUSNUM value to have a dynamically generated link to that specific customer, as shown. The #{...} syntax is string interpolation and makes referencing variables in strings significantly easier. Also note the indentation needs to be correct number of spaces.

Now we need to add code to app.js to process requests for specific customers, as shown.

Note the :id reference in the first parameter of app.get(). This says that whatever is specified on the URL after /customer/ should be placed into a variable named id within the req.params array. We can then access it with the syntax req.params.id and concat it into the SQL statement. Then we use result[0] to set the result view variable.

NOTE: This SQL statement is open to injection attacks. I did this on purpose to generate dialogue in the comments section about how to address it with DB2 on i + Node.js. Let the conversation begin!

Restarting your application and navigating to /customers should reveal the results shown in Figure 2.

Our customer listing.

Our customer listing.

Next, we need to create a customer.jade file in the views directory to facilitate the previous res.render('customer', ...), as shown. Note that this view was singular and the other one was plural (customer.jade vs. customers.jade) as that’s a common convention.

Restart the application, go to the /customers page and click on a customer. You should see a page similar to Figure 3.

Individual customer listing.

Individual customer listing.

More Insight

I hope you’ve gained insight as to how the ExpressJs framework operates with Node.js to create a simple Web application. As you might guess, we’ve only touched the tip of the iceberg and there are many more features to work through in future articles (e.g., ExpressJs “middleware” is an important topic). I’ve included the entire source for this app in the Litmis Bitbucket Node.js repo for reference.

Please remember to comment on SQL injection in the Disqus form below!


  • Call web APIs from RPG
  • Process XML and JSON
  • Offer web services

Litmis Spaces

Affordable IBM i cloud hosting

CyberSource Toolkit for i

  • Process credit cards from native RPG
  • Integrate CyberSource payment services

Follow Us

Need assistance with Node.js? We can help. Contact us below.

  • This field is for validation purposes and should be left unchanged.

Get Social

Share to your favorite social platform