Getting started with ExpressJS

Please get in touch with your teacher or tutor in case you have a question related to this lesson

In the last chapter we created a simple web page using express. In this chapter we will learn how to use views and templates with our Express application, there is a fair bit to cover so let’s get the ball rolling. Let me load my previous app.js file, and run it with node, When I load my app in web browser, it will display “hello and welcome to express”, as you can see that I am using app.get method to catch home page request and then using response object’s send method, to send out some data out.


When I go to my browser and refresh it, it will nicely print the string that I wanted to be shown. Before we do anything else let’s install node demon, this is important because when you run your app with it, it automatically detects file changes and we don’t need to kill the node process and start it again to view our changes in browser.

Let’s start my app with node demon at port 3001, when I make a change, the change will automatically be reflected in the web browser with a refresh. I don’t have to kill the process and start it again.

There are various Templating engines supported by Express, The first one we will be looking at is Jade, Jade is pretty much the default for many developers, because it is really easy to use, but to make use of it we have to install Jade.

Let’s install Jade with NPM command. Once Jade library is available, I can then create a folder called views. Express uses the views folder to look for different templates or views. Express is very smart in detecting which template engine to use, all we need to do is to mention correct file extensions to our template files.

So let’s create the first template as index.Jade. Because of Jade as file extension, Express will use Jade templating engine to render the views. We will use response object’s render method and pass on index.jade as first parameter value. We will also get rid of the old line with the send method, and don’t forget that the file name has to be the template name.

Jade is a high performance templating engine for node JS, it’s basically inspired from HAML, Jade is a white space sensitive language, and you don’t have to close the tags, Jade does it for you, you can nest tags within another tags by indenting them.

Jade will create accurate HTML every time unless you make any indentation error. In index.Jade file I have declared h1 tag, and have some text after it, this will create a H1 tag and put the provided text within it. When I load this app into my browser, I get the perfect HTML. Now I can indent a paragraph under h1 tag. When I refresh my web page, paragraph font size will inherit from h1. Now I’ll show you how to add attributes. Let’s add a style attribute font size 12 pixels to our paragraph tag.

When I reload the webpage again, the paragraph font size has been reduced. This is how you do attributes with Jade. Another thing I can show you here, which is really important is passing the data to our Jade template, Render method accepts second parameter as a key value pair object, where key becomes a local variable with the template itself.

Let’s pass name variable to our template. To make use of name variable, I have to put equals followed by the variable name, everything that comes up after equal symbol is treated as a JavaScript expression. If there is no equal symbol then name will be printed as it is, but with equals operator, subject coach will be printed.

If you want to use another templating engine, you can make use of what suits you, In this chapter the second templating engine that we will use is called EJS. EJS is an acronym for embedded JavaScript. We have to install it, to use it, just as we installed Jade, I will now create a file called index.ejs, the syntax is a bit different to what we did in Jade. In EJS we will have to make use of HTML tags and a special embed tag to make use of passed variables. To make use of variable name have to use this for special expression. We can move this expression anywhere in our HTML code. This tutorial is about express JS so will not cover EJS or Jade in detail, but their respective websites for each of these templating engines, that will help you out with different things if you are stuck. Many people or developers also prefer EJS over Jade, because EJS combines data and HTML to produce perfect HTML with ease.

In next chapter, we will learn about some core methods used by Express JS.