Express EJS Template Engine

Registered members can download the FREE Get Started App. This is the project I used to compose articles about setting up VS Code and developing Node with Express and the Embedded JavaScript (EJS) view engine.

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. Express Embedded JavaScript (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.

When I decided to learn Express, I found a lot of articles and AI suggestions which did not implement ES6 standards. ES6 or ECMAScript 2015 changed the landscape of JavaScript with the ability to create promises for asynchronous programming. I am familiar with ASP.NET Core and C# web applications and SQL Server databases. I developed this Express application with KenHaggerty.Com as a model. Registered members can download the FREE Get Started PostgreSQL app and Get Started MySQL app which implement this getting started with Express EJS tutorial.

Let's Talk About Express

Development Environment Setup

Features Since ECMAScript 2015(ES6)

Express EJS Template Engine

Express EJS Views, Layouts, and Partials

Express Error Handling

Express Routers and Controllers

Express Environment Variables

MySQL and Services

PostgreSQL and Services

EmailSender With Nodemailer

I prototyped "pug" and "ejs" projects. As soon as I started working with ejs I felt familiar and knew I could migrate a lot of my ASP.NET Core razor pages. I will assume you have a simple Express "Hello World" project working. If not, please see the Development Environment Setup article.

You need to add the ejs package to the project. From a Terminal window opened in the get-started folder or with the Terminal tab in VS Code, execute the npm CLI (Node Package Manager Command Line Interface) install command.

npm install ejs

Next add a views folder, which will contain the ejs templates. From the VS Code Explorer tab, click the New Folder button.

Configure the application to use ejs as the view engine and the views folder for templates by adding the set commands to server.js.

server.js

app.set('view engine', 'ejs');
app.set('views', './views');

Add a new file to the views folder, name it index.ejs.

We can add server-side data to variables and use them in the template. I created a small array of objects for demonstration. Update the "Hello World!" route with this code.

server.js

app.get('/', (req, res) => {
  const articles = [
    { title: 'Let\'s Talk About Express', titleslug: 'lets-talk-about-express' },
    { title: 'Development Environment Setup', titleslug: 'development-environment-setup' },
    { title: 'Features Since ECMAScript 2015(ES6)', titleslug: 'features-since-ecmascript-2015es6' },
  ];
  const templateData= {
    pageTitle: 'Get Started With EJS',
    articles
  }
  res.render('index', templateData);
})

This passes the templateData to the "index.ejs" template in the views folder. Add HTML, ejs delimited code, and a little JavaScript code to the index template.

index.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= pageTitle %></title>
    </head>
    <body>
        <h1><%= pageTitle %></h1>
        <p>This is the HTML result of an Embedded JavaScript (EJS) view template.</p>
        <ul>
            <% articles.forEach(article => { %>
                <li><%= article.title %>, titleslug = <%= article.titleslug %></li>
            <% }) %>
        </ul>
        <button type="button" id="JavaScriptTestButtonId">JavaScript Test</button>

        <script>
            document.querySelector('#JavaScriptTestButtonId')
                .addEventListener('click', () => alert('Embedded JavaScript Test'));    
        </script>
    </body>
</html>

Launch "Run and Debug" then open a browser and enter "http://localhost:3000".