Explore

Lecture note on Node.js NPM ejs with code examples

#template_engines

Learning outcome:

How to configure EJS as the view engine for your web application.

Introduction:

EJS (Embedded JavaScript) is a popular Node.js templating engine that simplifies the process of generating and serving dynamic web pages to users. Instead of manually generating HTML content in code, EJS allows developers to create reusable HTML templates with embedded JavaScript. This makes the code cleaner, more maintainable, and easier to work with.

By using token substitution, EJS enables developers to inject dynamic data into HTML templates at runtime. This helps create personalized and data-driven web pages without the need for cumbersome string concatenation or complex logic in the code.

In summary, EJS is a powerful templating engine for Node.js that streamlines the creation of dynamic web pages by providing a clean and reusable way to integrate JavaScript and HTML. This simplifies the overall development process and allows for more efficient rendering of HTML content to end users' browsers.

Node.js is a runtime environment built on Chrome's V8 JavaScript engine, allowing developers to create server-side applications using JavaScript.

NPM (Node Package Manager) is the default package manager for Node.js, which helps manage dependencies and packages for your projects.

EJS (Embedded JavaScript) is a popular templating engine used by Node.js for creating dynamic HTML templates [3].

Step 1: Setting up a new Node.js project

Create a new project directory and navigate to it using the terminal:

mkdir ejs-demo

cd ejs-demo

Initialize a new Node.js project by running the following command:

npm init -y

This will create a package.json file in your project directory [1].

Step 2: Installing Express and EJS

Install Express, a Node.js web application framework, and EJS using NPM:

npm install express ejs --save

This will add Express and EJS as dependencies in the package.json file [2].

Step 3: Configuring EJS in server.js

Create a server.js file in the project directory and add the following code:

const express = require('express');

const app = express();

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

app.get('/', (req, res) => {

res.render('index', { title: 'EJS Demo', message: 'Welcome to the EJS demo!' });

});

app.listen(3000, () => {

console.log('Server is listening on port 3000');

});

This sets up an Express server, configures EJS as the view engine, and listens on port 3000 [2].

Step 4: Creating EJS views

Create a "views" folder in the project directory and an "index.ejs" file inside it.

Add the following code to the "index.ejs" file:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

This EJS template displays the title and message passed from the server.js file [2].

Step 5: Running the Node.js application

Start the Node.js server by running the following command in the terminal:

node server.js

Visit "

http://localhost:3000⁠

" in your browser to view the rendered EJS template [1].

Conclusion:

In this lecture note, we covered the basics of Node.js, NPM, and EJS with code examples. We demonstrated how to set up a Node.js project, install Express and EJS, configure EJS as the view engine, create an EJS template, and render it using Express [2].

References:

[1]

How To Use EJS to Template Your Node Application⁠

⁠

[2]

How to use EJS to template your Node.js application⁠

⁠

[3]

Use EJS as Template Engine in Node.js⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.