Building a Simple Express Application with EJS: A Beginner’s Guide

3 min readFeb 13, 2024

Welcome to my beginner’s guide to building a simple Express application with EJS! In this tutorial, we’ll walk through the process of creating a basic Express project that uses the EJS view engine to render dynamic content.

Our project is a straightforward Express application that displays a “Hello, World!” message using EJS. While it may seem simple, it serves as a great starting point for beginners who want to learn how to work with Express and EJS.

To get started, let’s set up our project. First, create a new directory for your project and navigate into it in your terminal:

mkdir my-ejs-project
cd my-ejs-project
npm init -y
npm install express ejs

Now, let’s create a file named server.js and add the following code

const express = require('express');
const app = express();
const path = require('path');

// Set EJS as the view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Define a route to render the index.ejs file
app.get('/', (req, res) => {
    res.render('index', { message: 'Hello, World!' });
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

We begin by importing the necessary modules for our Express application. We require express to create our Express app, and path to handle file paths.

we configure Express to use EJS as the view engine. We use app.set() to set the view engine to 'ejs', indicating that we'll be using EJS for rendering views. Additionally, we set the directory where our EJS templates are located using app.set('views', path.join(__dirname, 'views')). We specify the views directory as path.join(__dirname, 'views'), which resolves to the views directory relative to the current directory (__dirname).

Next, we define a route using app.get(). This route handles GET requests to the root URL ('/'). When a request is made to the root URL, the callback function (req, res) is executed. Inside this function, we use res.render() to render the index.ejs file. We pass an object { message: 'Hello, World!' } as the second argument to res.render(). This object contains data that we want to pass to the template. In this case, we're passing a message with the value 'Hello, World!'.

Finally, we start the Express server by calling app.listen().

Next, create a directory named views, and inside it, create a file named index.ejs with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My EJS Project</title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

Inside the <body> section, there's an <h1> tag with the EJS syntax <%= message %>. This is where dynamic content is inserted into the HTML. In this case, the value of the message variable passed from the server is inserted here. When the template is rendered, EJS evaluates the <%= message %> expression and replaces it with the actual value of the message variable. In our Express server, we passed { message: 'Hello, World!' } as data when rendering this template, so "Hello, World!" will be displayed as the content of the <h1> tag.

You can now start your Express server by running the following command:

node server.js

Visit http://localhost:3000 in your web browser to see the "Hello, World!" message rendered using EJS.

Building a Simple Express Application with EJS: A Beginner’s Guide

Written by Akhil Mottammal