Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

DZone's Guide to

Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

We take a look at three popular templating engines and demonstrate how to use one of them, EJS, to create the content of our web pages.

· Web Dev Zone ·
Free Resource

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

Welcome back to our series on Node.js for beginners! Last time, we went over the advantages of using Node.js and Express, got our environment set up, and coded up some basic web pages. In today's post, we'll go over the roles of templating engines in Node.js applications and figure out how to use them to get some basic HTML markup onto our pages. 

Project Recap

I'll be basing the app I work on in this series of a project from a Udemy course (found here) that I've been using on-and-off for a while. I love to travel, and the US National Parks are some of my favorite places to go. To teach myself Node.js, Express.js, templating engines, and Bootrap, I'm going to design an application to keep track of my park travels.

Introduction to Templating Engines

Templating engines are essentially pieces of software that allow you to render markup on the web pages you create with the powerful Node/Express combination we explored in the last article. The explanation given by the Express docs, which is far better than a beginner developer like me could do, is as follows: 

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Per these same docs, web developers working with Node and Express tend to use one of three popular template engines: Pug, Mustache, and EJS. After poking around the documentation for each of these options, I ultimately decided to go with EJS as it allows me to use actual HTML to create my markup, rather than a syntactically similar, but ultimately different, style of code. 

To give a quick example of these three template engines, I'll show how to create a simple list using each. (Note: the code for Pug and Mustache in this section is taken from the docs linked to above.)

Lists in Pug 

Here's how we'd have to go about creating a list with Pug: 

var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

Come render time, however, this code will act like standard HTML, and be rendered like so: 

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

Lists in Mustache

In a Mustache view file, we'd have to enter the following code: 

{
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}

In the Mustache template file, we'd then enter this code: 

{{#stooges}}
<b>{{name}}</b>
{{/stooges}}

The output would, just like Pug, be rendered as standard HTML: 

<b>Moe</b>
<b>Larry</b>
<b>Curly</b>

Lists in EJS

In EJS, all we have to do is create a .ejs file, let's say landing.ejs, link this page in our Express code, and then type in regular old HTML. Here's an example: 

app.js (Node/Express code) 

const ejs = require('ejs');

app.get("/", function(req, res){
  res.render("landing");
});  

landing.ejs

<!---for an ordered list --->
<ol>
  <li></li>
  <li></li>
  <li></li>
<ol>

<!---for an ordered list --->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

To me, this seems much easier. But I also don't want to make it seem like Pug and Mustache aren't great options. They're widely popular and have huge open source communities around them. No matter which of the three you go with, you'll be working with great software. EJS just makes the most sense to my (admittedly strange) mind. 

Me Make Things Pretty(ish)

As promised in my last article, we'll make the basic pages we got to render using basic Express actually look like a web page (granted, at first, it'll look like something straight outta the '90s). And that's why I'm bringing EJS into this tutorial. 

To get EJS onto your machine, run the command  npm i ejs --save. Like in the section above on creating a list in EJS, we then have to tinker with the app.js file we were using to get my Node servers and Express pages up and running. In this file, we have to tell Node that we're using EJS as our templating engine. We can do this like so: 

const ejs = require('ejs'); 

app.set ("view engine", "ejs"); 

Okay, now Node knows to use EJS to render the markup for our web pages. Awesome! Next, we need to create some actual EJS files. This part is pretty simple. cd into our dzone_app1 project, and create a views directory with the command $mkdir views. Within this directory, let's create our first EJS file (I've called my file landing.ejs) with the command $touch landing.ejs

Fantastic! Now that we've got that file going, we can punch in the following HTML: 

<h2>National Park App Page </h2>
    <h3>Parks I've Seen:</h3>
        <p>Park Name: <input type="text" placeholder = "Yosemite, Yellowstone..."></p>
        <p>Park Picture: <input type="text" placeholder="URL"></p>
        <button>Add to my Memories</button>

Then, if we run our server with the node app.js command, we should see the HTML render on the page.  

Image title

Voilà! Magnifique! Alright, that might be hyperbole, but I'm still super happy that in just two days we've gone from Node novices to an actual web page using a markup language. Pretty neat. 

To get the basic skeleton of the application down, let's create one more page, which I'll denote in my app.js file as /parks. The JavaScript to create this page server-side will look like this: 

app.get("/parks", function(req,res){
    res.render("parks");
});

Then $touch another EJS file, parks.ejs, and label it with a basic h2 tag (more for organizational purposes than coding reasons). 

<h2> The Parks I've Seen</h2>

When we restart the server, and go to the page, ending the URL address in /parks, we should see the following: 

Image title

Conclusion

Cool! We now have two pages with the basic HTML skeletons set up for our app. In the next article, we'll link these pages together and implement some basic JavaScript logic. 

Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.

Topics:
web dev ,ejs ,node.js tutorial for beginners ,node.js tutorial ,web application development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}