Express: Working with Dynamic
Content & Adding Templating Engines
This post is my second Node blog, and today I am going to talk about Express and how to work with dynamic content using template engines.
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.
Here is a quick refresher on how we create an app using Node Express:
const express = require('express')
const app = express()
app.listen(3000)Now let’s write a custom route for our users page without a template.
As you can see, it’s not fun to do it this way, instead Express offers so many template engines, but today I will talk about 2 of my favorite template engines pug and ejs .
Let’s start with pug, npm i -- save pug will install pug at your project, and don’t forget to install both Express and nodemon, and check pug’s docs at https://pugjs.org/api/getting-started.html
Pug is a template engine for Node and for the browser. It compiles to HTML and has a simplified syntax, which can make your code more readable. Pug makes it easy to write reusable HTML and render data pulled from a database or API. Now let’s create a pug file, we will call it
users.pug .
<!DOCTYPE html> html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") meta(http-equiv="X-UA-Compatible", content="ie=edge") title Document body
h1 Users Page
I like pug because you can write HTML without too much code, you also don’t need closing tags, but indentation is significant when you use pug.
Now let’s get back to app.js to set our view engine to pug and views to views folder. We can now use the render method to go to the views folder and render ‘users’, and we don’t have to add .pug extension.
The second template I will talk about is ejs; by far, this is my favorite template so far because EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.
- If you joined Flatiron Bootcamp, this might look familiar at Ruby on Rails mod, where we used a similar template for Ruby to write and generate HTML views pages.
Let’s dive in and install EJS by npm i --save ejs , and we will do the same by creating a users.ejs file in the views folder.
We will also need to change the views engine at our app.js file to accept ejs template.
app.set('view engine' , 'ejs')app.set('views' , 'views')
Let’s say we have an array of users to iterate and show in an unordered list.
<% if(users.length > 0 ) { %> <h1>Users List</h1> <ul> <% users.forEach((user) => { %> <li> <%= user.name %> </li> <% }) %> </ul><% } else { %> <h1> No Users Found</h1><% } %>
It’s effortless to write Javascript code in here with those signs:
- For Javascript code:
<% JS code %>. - To declare a variable or show a value:
<%= %>.
Working with Partials:
Partials come in handy when you want to reuse the same HTML across multiple views. Think of partials as functions. They make big websites easier to maintain as you don’t have to change a piece of text on every page it appears on. Instead, you define that reusable bundle of code in a file and include it wherever you need it.
For example, if we have a navbar that we need to add to all pages, we can create navigation. ejs file and add it to all ejs files by doing the following:
- Create a navigation ejs file in the views folder.
- Add the HTML code into the navigation.ejs
- Add this <%- include(‘path’) %> where you’d have the navigation code on all your ejs files.
#Keep learning
Best,
Mokhtar
