How To Use View Templates Node Express

While it's possible to render static websites from a server, in that location are a lot of limitations with this arroyo, including lawmaking duplication and a lack of flexibility — especially when it comes to reading data from a database. Luckily, Limited.js provides the states a way to create dynamic HTML pages from our server-side applications through a template engine.

A template engine works in a rather uncomplicated manner: you create a template and, with the appropriate syntax, pass variables into it. Then, at the appropriate route to render the template, y'all assign values to the variables declared in your template file. These are compiled in existent fourth dimension as the template gets rendered.

One essential feature of template engines is that they allow u.s.a. to create reusable components chosen partials, which can be reused in other files. This helps prevent lawmaking duplication and brand changes easier to implement.

At that place are a number of template engines available today, and the more popular ones include Pug (fka Jade), Handlebars, EJS, Mustache, Swig, and others. This post will discuss the following template engines for Express:

Pug
EJS
Handlebars

Getting started

Set upwardly a new npm project and install Express past typing the following commands in your terminal:

npm init npm i express

Create a src folder. This is where we'll write all our lawmaking for this project. In the binder, create a file named app.js and a folder named views to hold the views we'll render through Express. Add a partials subfolder in the views binder to hold the partials. Your folder structure should wait similar this:

├──src   ├───views     ├───partials   app.js

Add this Express average code into the app.js file:

const express = require('limited'); const path = require('path'); const app = express(); app.get('/', (request, response) => {   return response.send('OK'); }); app.listen(5000, () => {   console.log('App is listening on port 5000'); });

Integrating Express template engines

Integrating a template engine into your Express awarding only takes a few lines of code. Just after assigning the Express function (before creating your routes), add the following app settings:

views, the directory where the template files are located (e.g., app.ready('views', './views')). This defaults to the views directory in the application root directory
view engine, your template engine. For example, to use the Pug template engine: app.set('view engine', 'pug')

Pug

Pug has a very singled-out syntax, favoring indentation and spaces over the traditional angle brackets in HTML tags. A typical folio with caput and body segments looks like this:

doctype html html     head         meta(name='viewport', content='width=device-width')         link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/four.4.i/css/bootstrap.min.css")         title= subject field     body         div.container.mt-2             header                 h2 Welcome                 p  Here is the homepage for #{name}             section                 h2 Here is the body                 p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, repellendus!             footer                 h2 Hither is the footer                 p                     a(href=link) Unsubscribe

From the example above, yous can see in that location are no opening or closing tags. Instead, the enclosing tag is declared, and its children are indented just below, like in Python. The content of each tag is declared beside the tag, while attributes are declared inside parentheses. Classes are indicated with . and ids with #.

Variables tin be defined in ii ways:

Using the equals (=) sign – This is usually used when the variable to be alleged is the only content of the corresponding tag or aspect, as seen in our championship and a tags
Using the #{variable} syntax – This method can exist used both when the variable is the only content of the tag/aspect and when information technology is a office of a longer cord

To return the above content in Express, first install the Pug packet from npm:

npm i pug

Side by side, copy the code above into an index.pug file inside the views folder, and in app.js, register Pug equally the preferred template engine:

app.set('view engine', 'pug'); app.fix('views', path.join(__dirname, 'views'));

In the same file, create a route that renders the file this manner:

app.get('/index', (request, response) => {   response.render('alphabetize', {     subject: 'Pug template engine',     name: 'our template',     link: 'https://google.com'   }); });

The render method takes the proper name of the file (without the extension) and and then the values of the variables in the template file.

Using partials in Pug

Let's create a reusable nav file called _nav.pug in the partials subfolder; I similar to prepend partials with an underscore (_). This volition contain our nav menu with the post-obit code:

nav.navbar.navbar-nighttime.bg-main.navbar-expand     .container         a.navbar-make(href='#') TMP         ul.navbar-nav.mr-automobile             li.nav-particular                 a.nav-link(href='#')                     span Home             li.nav-detail                 a.nav-link(href='#')                     span Almost             li.nav-item                 a.nav-link(href='#')                     span Menu             li.nav-item                 a.nav-link(href='#')                     bridge Contact         bridge.navbar-text             a.nav-link(href='#')                 span  Login

We can and so include the fractional in our index.pug file using the include keyword just inside the body tag:

body     include  partials/_nav  // partial included here     div.container.mt-2

Visit localhost:5000/index and you should go something like this:

Partials Pug Template Homepage Localhost

This is a simple introduction to the Pug template. You tin learn more from the official pug website.

EJS

EJS is much more like to HTML than Pug is, retaining the usual method of opening and endmost tags as well every bit specifying attributes. Variables are alleged using angle brackets and the percent sign in this way: <%= name %>.

EJS tags tin can be used in different ways:

<%= – Escape the provided value, and output it to the template
<%- – Output the provided value without escaping. It is brash you escape all HTML variables before rendering to forestall cantankerous-site scripting (XSS) attacks
<% – Perform control operations such as using a conditional or loop

Integrating EJS into Express

Showtime, install the ejs package from npm:

npm i ejs

Side by side, switch the app view engine setting from Pug to EJS:

app.fix('view engine', 'ejs');

Now, to rewrite our Pug code above in EJS, create an index.ejs file in your views folder and add the following code:

<!DOCTYPE html> <html>   <head>     <meta name="viewport" content="width=device-width" />     <link       rel="stylesheet"       href="https://stackpath.bootstrapcdn.com/bootstrap/4.iv.ane/css/bootstrap.min.css"     />     <title><%= subject %></championship>   </caput>   <body>     <div grade="container mt-ii">       <header>         <h2>Welcome</h2>         <p>Hither is the homepage for <%= name %></p>       </header>       <section>         <h2>Hither is the torso</h2>         <p>           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam,           repellendus!         </p>       </section>       <footer>         <h2>Here is the footer</h2>         <p><a href="<%= link %>">Unsubscribe</a></p>       </footer>     </div>   </body> </html>

Using partials in EJS

Within the partials subfolder, create a _nav.ejs file and add together this code:

<nav class="navbar navbar-nighttime bg-primary navbar-expand">   <div form="container"><a class="navbar-brand" href="#">TMP</a>     <ul class="navbar-nav mr-auto">       <li class="nav-particular"><a class="nav-link" href="#"><span>Home</bridge></a></li>       <li grade="nav-item"><a course="nav-link" href="#"><span>Nearly</span></a></li>       <li class="nav-detail"><a class="nav-link" href="#"><span>Carte du jour</span></a></li>       <li class="nav-item"><a class="nav-link" href="#"><span>Contact</span></a></li>     </ul><span class="navbar-text"><a class="nav-link" href="#"><span> Login</span></a></bridge>   </div> </nav>

You can add together the nav fractional into your index file by adding the relative path of the partials file to the include keyword, modifying the line only below the body tag:

<body>     <%- include('./partials/_nav'); %> // fractional included here     <div grade="container mt-2">       <header>

Add the following route to the app.js file:

app.get('/index', (request, response) => {   response.render('index', {     subject: 'EJS template engine',     name: 'our template',     link: 'https://google.com'   }); });

Now, when you get-go your server and visit the /alphabetize route, the page should exist rendered with similar content with the Pug template.

Handlebars

Handlebars, similar EJS, tries to stay faithful to the usual HTML way with a simple manner of inserting variables using ii braces — due east.g., {{variable}} — or three braces for HTML-unescaped characters. It is built on the mustache templating engine, and then they share some similarities.

There are a number of npm packages bachelor for compiling and rendering Handlebars in Express, but I'll exist using the hbs bundle. This is installed via the command:

npm i hbs

Nosotros and so set our view engine to hbs with:

app.set up('view engine', 'hbs');

An index.hbs rewrite of our previous index pages would look similar this:

<!DOCTYPE html> <html> <caput>     <meta name="viewport" content="width=device-width" />     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/iv.iv.1/css/bootstrap.min.css" />     <championship>         {{subject}}     </title> </caput> <body>     <div class="container mt-two">         <header>             <h2>Welcome</h2>             <p>Hither is the homepage for {{name}}             </p>         </header>         <section>             <h2>Hither is the body</h2>             <p>                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam,                 repellendus!             </p>         </section>         <footer>             <h2>Here is the footer</h2>             <p><a href="{{link}}">Unsubscribe</a></p>         </footer>     </div> </body> </html>

Using partials in Handlebars

Using the same file structure as earlier, create a _nav.hbs file inside the partials folder. We'll use the aforementioned code in the _nav.ejs file above since it is the usual HTML syntax without any variables defined in it.

Unlike the other template engines, you take to annals your partials in Handlebars before you can use them. Import the hbs module in your app.js file and apply the registerPartials method:

const hbs = require('hbs'); hbs.registerPartials(path.join(__dirname, 'views/partials'));

After registering, you lot simply use the filename of the partial instead of the relative path when including it in an hbs file. The syntax for including a partial into another hbs file is {{>partialname}}. You can include your nav partial in your alphabetize file by adding modifying the line just below the opening body tag:

<div class="container mt-2">     {{>_nav}}  // partial included here     <header>

Add the post-obit road to the app.js to render the index file:

app.go('/alphabetize', (request, response) => {   response.render('index', {     subject: 'hbs template engine',     name: 'our template',     link: 'https://google.com'   }); });

Visiting the /alphabetize route should render a page similar to the same route in the Pug application.

Conclusion

Template engines are quite like shooting fish in a barrel to set and require trivial or no average, and y'all can create large applications with them without having to spend as well much time learning the syntax. You lot tin larn more nigh them by visiting their docs to starting time creating dynamic webpages rendered from the server.

The source code for this application is on GitHub with each template engine in a dissimilar branch, named eponymously.

200's only Monitor failed and tiresome network requests in product

Deploying a Node-based spider web app or website is the easy role. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you're interested in ensuring requests to the backend or tertiary party services are successful, try LogRocket. LogRocket Network Request Monitoring https://logrocket.com/signup/

LogRocket is like a DVR for spider web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why bug happen, yous can aggregate and report on problematic network requests to quickly understand the root cause.

LogRocket instruments your app to record baseline performance timings such as page load fourth dimension, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.