How to send emails using Express and NodeJS

Abhishek Sharma — Mon, 03 Feb 2025 19:45:03 +0000

Introduction

I love contributing to OSS, and I recently received a task in one of the projects of Team Shiksha, where I had to send emails to the product's clients using our custom templates with a personalized look and feel. This post is about how to customize emails using different templates.

Creating Email Templates

Sending emails using Express is not a big deal, and almost every other project uses Nodemailer for that. We too, were using the same, but we were just sending text through it.

The first step here was to create different templates for different flows in the application and then send the email through the HTML property of the transport object.

So, I did the same. Created a few templates in simple HTML and CSS and added them as a string in my transport object like below:

(The process core module of Node.js provides the env property which hosts all the environment variables that were set when the process was started. Read more here: How to read environment variables from Node.js)

sendEmail function

async function sendEmail(email, subject, text) {
  try {
    const transporter = nodemailer.createTransport({
      host: process.env.EMAIL_HOST,
      service: process.env.EMAIL_SERVICE,
      port: Number(process.env.EMAIL_PORT),
      secure: true,
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS,
      },
    });
    await transporter.sendMail({
      from: process.env.EMAIL_USER,
      to: email,
      subject: subject,
      text: text,
      html: text,
    });
    return { success: true };
  } catch (error) {
    console.error(error);
    return { success: false, error: error };
  }
}

A function to replace the variable in the HTML with the actual values

const getHTMLReplyForCustomer = (message, reply) => {
  return `<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Lato:wght@700&family=Nunito&family=Poppins&display=swap" rel="stylesheet" />
      <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          list-style: none;
        }
        * {
          padding: 0;
          margin: 0;
          font-family: Inter;
        }
      </style>
    </head>
    <body style="--white: rgb(255, 255, 255); --smooth-purple: rgb(79, 70, 229); --black: rgb(17, 24, 39); --smooth-gray: rgb(107 114 128); --description: rgb(75, 85, 99); --light-purple: rgba(79, 70, 229, 0.1); --faded-purple: rgba(79, 70, 229, 0.5); --border: 2px solid rgb(229, 231, 235); --bradius: 6px; --shadow: rgba(140, 152, 164, 0.125) 0px 6px 24px 0px; --small-text: 12px; --medium-text: 16px; --large-text: 20px; --gray-drag-drop-background: rgb(249, 250, 251); --error: rgb(255, 55, 55); --success: rgb(52, 168, 83); --table-heading-bg: rgb(226, 224, 224);">
      <header style="padding: 20px; background-color: #f1f1f1;">
        <a class="logo" href="https://logoexecutive.vercel.app/home" style="color: var(--black); cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center;">
          <img src="https://logoexecutive.vercel.app/static/media/business-man-logo.3a122f718b0294570293.webp" style="height: 35px; width: 35px; margin-right: 10px;" />
          <h2 style="font-size: 24px; font-weight: 800;">LogoExecutive</h2>
        </a>
      </header>
      <main style="padding: 30px;">
        <h4 style="font-weight: 400;">
          Hi there,
          <br />
          <br />
          Thanks for connecting with us through our contact-us form. We have prepared a response based on your query:

          <br />
          <br />
          <b>Query:</b>
          <br />
          ${message}
          <br />
          <br />
          <b>Reply:</b>
          <br />
          ${reply}
          <br />

          <br />
          <br />
          Thanks,
          <br />
          OpenLogo Team
        </h4>
      </main>
      <footer class="footer" style="width: 100%; background-color: #f1f1f1; display: flex; padding: 12px 0; position: fixed; left: 0; bottom: 0; width: 100%;">
        <section class="footer-child" style="padding: 12px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 20px; flex-grow: 1; max-width: 500px; text-align: center; margin: 0 auto;">
          <div class="footer-child-heading-container" style="display: flex; gap: 16px;">
            <h4 style="font-size: var(--large-text); color: var(--black);">Copyright © 2024 | OpenLogo</h4>
          </div>
          <section class="poweredBy" style="display: flex; align-items: center; justify-content: center; border: 2px solid var(--smooth-purple); border-radius: 6px; padding: 2px 6px; cursor: pointer; color: var(--smooth-purple); font-weight: 700; font-size: var(--medium-text);">Powered By<img src="https://logoexecutive.vercel.app/static/media/teamshishalogo.7bfb117958cfe1b031c9.webp" alt="TeamShiksha Logo" style="margin-left: 5px; width: auto; height: 18px;"></section>
        </section>
      </footer>
    </body>
  </html>`;
};

Using sendEmail

const htmlReply = getHTMLReplyForCustomer(revertForm.message, reply);
const emailRes = await sendEmail(
  revertForm.email,
  "Response for your query at LogoExecutive",
  htmlReply
);

But with this implementation, I faced two issues:

Email template was not consistent across different email clients.
Look at this email I got on the outlook:

And now this is what I got on the gmail:
Separation of concerns was not achieved fully, as the same file had the code for HTML and JavaScript.

So, now I had to first figure out how to create templates that behave the same for all the email clients. And then find a way to separate HTML templates from JavaScript code.

Creating consistent templates

After playing around and digging the internet, I found out that the issue is with how email clients render the HTML. And the solution is to use a table structure to have seamless and consistent behavior across different clients (Btw, this post by Fanny helped me a lot in creating the templates).

So, I created the templates using table structures and voila 🎉 It worked like a charm! See the below samples:

Separating HTML templates from the JS code

As suggested by a teammate, I found out that I'll need to create the template in a different file and then replace the variables in it using some utility. So, again after searching for some packages, I figured that Handlebars would be the best solution for our problem.

I created the template in a different file and used the replacements to replace the variables in the HTML, and it worked like a perfectly:

HTML Template

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenLogo Email</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Lato:wght@700&family=Nunito&family=Poppins&display=swap"
    rel="stylesheet" />
</head>

<body style="margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; box-sizing: border-box;">
  <table width="100%" cellpadding="0" cellspacing="0"
    style="background-color: #ffffff; max-width: 675px; margin: 0 auto; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
    <tr>
      <td style="padding: 20px; background-color: #f1f1f1; margin: 0 auto; text-align: center">
        <a href="https://logoexecutive.vercel.app/home" style="color: rgb(17, 24, 39); text-decoration: none;">
          <img src="https://logoexecutive.vercel.app/static/media/business-man-logo.3a122f718b0294570293.webp"
            alt="Logo" style="height: 35px; width: 35px; margin-right: 10px; vertical-align: bottom;">
          <span style="font-size: 24px; font-weight: 800;">OpenLogo</span>
        </a>
      </td>
    </tr>
    <tr>
      <td style="padding: 50px 20px;">
        <h4 style="font-weight: 400; margin: 0;">
          Hi there,
          <br><br>
          Thanks for connecting with us through our contact-us form. We have prepared a response based on your question
          (<b><i>{{message}}</i></b>) below:
          <br><br>
          <i>{{reply}}</i>
          <br><br>
          Thanks,<br>
          OpenLogo Team
        </h4>
      </td>
    </tr>
    <tr>
      <td style="background-color: #f1f1f1; padding: 12px; text-align: center;">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding-bottom: 10px;">
              <p style="font-size: 14px; color: #777; margin: 0;">
                Copyright © 2024 | OpenLogo
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <div
                style="display: inline-block; border: 2px solid rgb(79, 70, 229); border-radius: 6px; padding: 2px 6px;">
                <a href="https://team.shiksha/" target="_blank" rel="noopener"
                  style="text-decoration: none; color: rgb(79, 70, 229); font-weight: 700; font-size: 16px; display: flex; align-items: center;">
                  Powered By
                  <img src="https://logoexecutive.vercel.app/static/media/teamshishalogo.7bfb117958cfe1b031c9.webp"
                    alt="TeamShiksha Logo" style="margin-left: 5px; width: auto; height: 18px;">
                </a>
              </div>
            </td>
          </tr>
          <tr>
            <td style="padding-top: 10px;">
              <p style="font-size: 10px; color: #777; margin: 0;">
                This is an automated message from OpenLogo. Please do not reply to this email.
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

Using sendEmail

const htmlFile = fs.readFileSync(
  __dirname + "/../../templates/RevertEmail.html",
  "utf-8"
).toString();
const template = handlebars.compile(htmlFile);
const replacements = {
  message: revertForm.message,
  reply
};
const htmlBody = template(replacements);
const emailRes = await sendEmail(
  revertForm.email,
  "Response for your query at LogoExecutive",
  htmlBody
);

And this is all we need. We've not only created consistent templates, but we've separated the HTML and Javascript code.
So, this is how we create our own customized e-mail templates and send them in the e-mail!

P.S. Let me know if you liked this post and if you have any suggestions in the comments. I'll keep posting about my learnings here. Also, do join Team Shiksha to contribute, learn, and enhance your skills as a software engineer.

DEV Community: Abhishek Sharma

How to send emails using Express and NodeJS

Introduction

Creating Email Templates

sendEmail function

A function to replace the variable in the HTML with the actual values

Using sendEmail

Creating consistent templates

Separating HTML templates from the JS code

HTML Template

Using sendEmail