Send Emails with EJS Template Using NodeMailer

Published in

Loops Blog

4 min readMay 8, 2019

In the current days most of the real world application got bounded to or make use of Email in it’s scope for various reasons…..

Some such instances are
1.Authentication and Registration purpose
2.Confirmation/Acknowledgement purpose
3.Verification purpose
4.Lost or forgot password resetting purpose.

Such a way Email functionality implementation become most obvious feature…

Recently I also encountered such an instance, where in a MERN full-stack project I was asked to provide a feature of confirming the appropriate party about their account activation when Admin register the new person’s details into the System

There were several way of implementing these feature,but as a newbie I found out NodeMailer with the EJS template engine as most efficient,easy to implement as well as a setup that’s being widely use in current days.

Although there were articles,blogs and documentation for these implementation pattern.There were no outputs combining both of these implementation patterns.So I though of sharing I knowledge gather during this learning phase

So lets begin…

Basically for most of my blog, I used to share where I started learning most basic concept implementations and finally how adapted it and ended up what I actually wanted.

So we a implement this using ReactJs for front end and NodeJs for the backend. So here we submit a form with Receivers Name,Email-ID and Message

Part 1. Setting up the Front-End

Here I assume you have a basic idea of setting up front-end using create-react-app, if not check this out.

//Make a folder
> mkdir NodeMailer_App//Check into it
> cd NodeMailer_App//Initialize the front end
> create-react-app front_end//Check into it and start
> cd front_end//Install necessary dependencies
> npm i axios bootstrap reactstrap//Now Start
> npm start

Now lets setup the App.js, as follows

Now we’ll setup the form design

Here I actually made use of few designing dependencies such as reactstrap and bootstrap for better user-friendliness

Part 2. Setting up the Back-End

//Make sure you are in NodeMailer_App not NodeMailer_App/front_end//create a folder within NodeMailer_App
> mkdir back_end//Check into it
> cd back_end//Initialize the node
> npm init -y//Install necessary dependencies
> npm i body-parser cors express nodemailer ejs

Before getting into code lets setup the Gmail we going to use.
You have to allow non secure apps to access gmail,by going to this gmail settings here. This is to make nodemailer can use your gmail for sending the emails

Now we need to set the credential details in order sent mail, basically credentials are the userName (MailID) and the password of you mail account

//Create a folder within NodeMailer_App/back_end
> mkdir config//Within newly created config create a file called credential.js

Now we need to create a template using the EJS Template, create a file called Hello.ejs within the NodeMailer_App/back_end

we are almost reached to the final part of setting up the back_end/server.js. So in the following server.js, I have included the comments in order to make it easy understand.

Note: Here we only pass the user_name into the ejs template, but you can pass any amount of arguments into the template.For an example we didn’t actually pass the message we got from client.You can simply adopt it with minor modifications

That’s all, we are done at the end your file structure will look something like as follows