Embedded Javascript

EJS (Embedded Javascript)

Original author(s)	Matthew Earnisse
Initial release	February, 2011
Repository	https://github.com/mde/ejs
Type	Web Template System, Templating language
Website	https://ejs.co

Embedded JavaScript (EJS) is a web templating system or templating language that allows developers to code HTML markup with simple JavaScript. Unlike other engines that use templates, EJS is very simple, light, fast, flexible and it is an efficient tool for rendering templates on the server side. It mainly uses logic from JavaScript, which makes benefits for developers who already know JavaScript language before. EJS is frequently used in Node.js, it means that any platform that supports JavaScript language also supports EJS.

History

EJS was first published in February 2011 by Matthew Eernisse, also known as mde on GitHub. Eernisse designed EJS to be a simple, light, fast and flexible templating engine for Node.js, and it allows developers to embed JavaScript logic directly into HTML. EJS is open-source for everyone and continues updates and improvements by Eernisse and other contributors in the Node.js community through the GitHub repository. EJS is licensed under the Apache License, version 2.0. EJS was inspired by templating systems like ERB ( also known as Embedded Ruby) used in Ruby on Rails, which also allows code embedding within HTML. ELS was created for JavaScript developers to create server-rendered HTML pages in an easy and familiar way, likely other templating engines available in other programming ecosystems.

As EJS became more popular, it gradually added new features such as subtemplates that can be included in other templates and caching to improve performance to make it run faster.

Example

Initialize Node.js with cli using

npm init -y

Then install Express.js and EJS with cli using

npm i express ejs

Go to the package.json file and add "type": "module",

├── src
│   ├── node_modules
│   ├── views
│   │   ├── index.ejs
│   ├── index.js
│   ├── package.json
│   ├── package-lock.json

Create index.js then config server file (index.js) with import, set view engine and listening port

import express from "express";
import ejs from "ejs";

const app = express();
const port = 3000;

app.set("view engine:, "ejs");

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

Then use the GET method to the ‘/’ endpoint then return with the GET with this code.

res.render('index', { user: { name: 'ok' } });

It will look like the code below.

app.get('/', (req, res) => {
    res.render('index', { user: { name: 'ok' } });
});

This code will render and send user data to an index.ejs, then create folder name views, then create an EJS file, and put this code in it.

├── src
│   ├── node_modules
│   ├── views
│   │   ├── index.ejs
│   ├── index.js
│   ├── package.json
│   ├── package-lock.json

<% if (user) {%>
    <h2><%= user.name %></h2>
<% } %>

It will receive data user that we send from the server. We can use it with

<%= user.name %>

After finishing these steps, you have to run Node in cli using

node index.js

Then go to http://localhost:3000/ or replace 3000 with your port