Exporting HTML using EJS

Why do we need to export HTML?

In some cases, we need to export HTML, for example, we need to email an invoice to the user. In this case, we need to create a template and then pass data to it to generate HTML. We can use EJS to export HTML.

Exporting HTML using EJS means

Exporting HTML means, we are creating a template, and then passing data to it to generate HTML. Our template can have HTML tags, CSS styles, and JavaScript for dynamic content, and apply some logic to it.

For example, if a school wants to send results to the students, why creating a template would be a good idea cause every student would have different results, so the HTML would be different for every student. We can create a template, and then pass data to it to generate HTML. The template would be generic for all students, and the data would be different for every student, due to which the HTML would be different for every student.

Let's see how we can do it.

Installation

npm

npm install ejs

Yarn

yarn add ejs

pnpm

pnpm add ejs

Bun

bun add ejs

I am not setting ejs with express as we did in the previous doc. I am using it as a standalone package. So, let's see how we can do it.

ejs.render()

The ejs.render method is used to render a string of EJS code. The following code shows an example of how to render a string of EJS code:

index.js

import ejs from "ejs";

const template = `
  <h1>Hello <%= name %></h1>
  
  <p>You have <%= count %> unread messages.</p>
`;

const data = {
  name: "Ali",
  count: 5,
};

const html = ejs.render(template, data);

console.log(html);

Here, template is a string of EJS code. data is an object that contains the data that will be passed to the template. The ejs.render method will render the template and return the generated HTML.

Output

<h1>Hello Ali</h1>

<p>You have 5 unread messages.</p>

ejs.renderFile()

The ejs.renderFile method is used to render a file of EJS code. So, first, we need to create a file of EJS code. Let's see how we can do it.

Creating a template file

I created a new folder in the project called templates and added an EJS template file with a .ejs extension, like this:

templates/email.ejs

<h1>Hello <%= name %></h1>

<p>Here are your products:</p>

<!--Here I am checking if the products array has any data-->

<% if (products.length > 0) { %>
<!--if yes, then show their names-->
<ul>
  <% products.forEach(function(product) { %>
  <li><%= product.name %></li>
  <% }); %>
</ul>
<% } else { %>
<!--else, show this-->
<p>You have no products.</p>
<% } %>

<p>
  If you have any questions, please contact us at
  <a href="mailto:<%= email %>"><%= email %></a>.
</p>

<p>Thanks!</p>

<p><%= company %></p>
<p><%= address %></p>
<p><%= phone %></p>
<p><%= website %></p>
<img src="<%= logo %>" alt="<%= company %> logo" />

Exporting HTML

To export HTML, you need to use the ejs.renderFile method. The following code shows an example of how to export the email.ejs template with a name parameter:

index.js

import ejs from "ejs";

const products = [
  { name: "Product 1" },
  { name: "Product 2" },
  { name: "Product 3" },
];

// data to pass to the template

const data = {
  name: "Rizwan",
  products,
  email: "mrizwanashiq@outlook,com",
  company: "MercurySols",
  address: "Rahim Yar Khan, Pakistan",
  phone: "+923004000000",
  website: "https://mercurysols.org",
  logo: "https://mercurysols.org/logo.png",
};

// passing the path of the template and data to the renderFile method, and it also takes a callback function.
ejs.renderFile("./templates/email.ejs", data, (err, html) => {
  // if there is an error, log it
  if (err) {
    console.log(err);
  }

  // else, log the generated HTML
  else {
    console.log(html);
  }
});

Output

Output

<h1>Hello Rizwan</h1>

<p>Here are your products:</p>

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
</ul>

<p>
  If you have any questions, please contact us at
  <a href="mailto:mrizwanashiq@outlook,com">mrizwanashiq@outlook,com</a>.
</p>

<p>Thanks!</p>

<p>MercurySols</p>
<p>Rahim Yar Khan, Pakistan</p>
<p>+923004000000</p>
<p>https://mercurysols.org</p>
<img src="https://mercurysols.org/logo.png" alt="MercurySols logo" />

See, how simple it was, just need to create a template first, we can use conditions, loops, and other things in the template. Then we need to pass data to the template, and ejs will generate HTML for us. It creates HTML dynamically.

Sending emails

We can use this HTML to send emails to the user. We can use nodemailer to send emails.

HTML can be used to send emails, it can provide a better user experience than plain text like adding images, styling, buttons, clickable links, etc.

Conclusion

In this article, we learned how to export HTML using EJS. We can use EJS to export HTML, we can create a template, and then pass data to it to generate HTML.