Dynamic Email Templates with Node.js and Nodemailer - Using Handlebars

hello and welcome in this video we're going to learn how to send a template email message with Dynamic data using a famous template engine called handlebars handlebars can be installed as a regular module in OJs and it allows the creation of dynamic and reusable templates for rendering and for this video we're going to use handlebars together with another node.js module to send emails called node mailer I already have a project here on vs code using the node mailer module so let's take a look so here I have a file called index.js which will be our main file and inside here on the top I'm importing the node mailer module and down here we have a few steps I'll just explain here real quick but if you want to learn inap the node mailer module we already have a video here on the channel explaining how to use the node mailer module with lots of examples I'll leave the link in the description below so in Step number one we need to create something called transporter by calling the create transport function from node mailer and inside we need to enter some details like the service we're using in this case Gmail I'll be using one of my personal Gmail accounts and next we need to enter the off option with the user which is our personal Gmail address and the password and both these informations are stored securely inside the M file uh note that this password is not the password of our Gmail account this is a different password generate to use in a third- party application uh on the video link in the description below I'll explain how to generate this password on your personal Gmail account and on step number two we're creating a mail options constant object with some details like from which is who is sending the email and two which is the address we're sending the email the subject of the email and here we're setting the text option which is just a simple text without h HTML and CSS and step number three we're sending the email calling the transport object we created here on the top calling the sand mail function and inside we're passing the mail options with the information we created on step number two and the second parameter is a call back function which returns an error and information about the email we're sending and inside this callback function we're checking if there is an error and if there is we're printing the error on the console otherwise we're putting a success message so let's run this index.js file by opening the terminal here on the top and type node and the file name which is index hit enter and perfect message sent successfully now let me open my Gmail here and here's the new message let's open and as you can see we just have a simple message here with no Styles back on the code now let's send a style HTML message and later on the video we'll learn how to make the content more Dynamic so I'll start by installing the module we're going to use here on the terminal so npm install and the module is called node mailer Das Express Das handlebars okay hit enter and perfect module is installed now we may need more several templates let's say when a user just register or if the user forgot the login password or we might need to send uh like a promotion for a specific product to our users so all these email templates will store inside another folder so I'll create a new folder here on the root of our project call views and inside the new views folder I'll create our first template so new file and we'll call this one the welcom message. handlebars great so in a handlebars file we can add HTML code just like a normal HTML file so in vs code if we type here HTML and we can select this HTML column five option here and vs code will create a basic HTML template for us so here inside the body tag I'll just create a simple template here so I'll add a H1 and inside I'll type welcome user and let's add a paragraph as well uh with a message saying you are registered to the application okay very simple now we need to send this template on the email instead of just a simple text message so on the index.js file I'll be starting by importing the node mailer Express handlebars module here below the node Mailer in Port so con and I'll call this HBS which is short for handlebars equals to require and inside the node mailer Express handlebars good now right after we create our transporter object uh let's configure some details of the new module so I'll just put a comment here saying configure handlebars plugin okay now let's create a constant here call HPS which is handlebars options and this is equals to an object now inside this object we need to set two required options here the first one is called view engine and camo case and this is equals to another object so the handlebars plugin expects that we have a default template called main. handlebars but we didn't create this file here so we need to set an option called default layout equals to false and this option should be in camo case as well and later on the video we'll see an example using this option here and that's it for the view engine option now we need to set the view path option also in camell case in here we need to inform the directory where our templates are stored in this case the views folder and since this folder is on the same level as the index file so here on the view path we can put views directly here and that's it for now with the HBS options and we need to pass these options to the transporter so below here I'll call the transporter object. use and here we have two parameters the first one is the step and we need to set as compile and the second parameter is the handlebars plugin so here I'll call the handlebars module we import it here on the top so HPS and inside we can pass the HPS options we created here perfect so the handlebars plugin is configure now we need to make some changes here on the mail options object to send the welcome message template we created instead of sending just a simple text message using the text option so we can remove the text option here and instead we want to set the template option and this will receive a string with the name of the template we created it so welcome message uh we don't need to add the extension because the plugin already expects to be a do handlebars file so now when we send the email the user should receive this template on the email box okay so let's open the terminal here on the top and let me clear here first and run again node index okay message sent successfully now let's go back to the Gmail so here we have the old message with the simple text let me remove this one and here's the new email message let's open and perfect here's the message with the template we created and as you can see here we have the H1 welcome user and the paragraph saying you are registered to the application great and we can also add some CSS on this template so here inside the head tag I'll add a style tag and let's add some style to the age1 and I'll change the color of the text to Green for example and let's change for the paragraph as well I'll also change the color property to a darker gray color like this and let's change the font size as well to 20 pixels good now here on the terminal let's run again Noe index okay message sent successfully back on Gmail so here we have the old message without this tile let's remove this one and here is the new message let's open and perfect as you can see now the H1 is green and the paragraph is with a darker gray color and bigger than before perfect now here on the index file we could write some HTML directly here on the mail options setting the HTM property like this and we can add some back ticks and add the code directly here but the biggest advantage of using a template engine like handlebars to send emails is the possibility of dynamically inserting data into the template so for example here on the welcome message template and on the H1 we could dynamically change the user here to the actual name of the user we are sending the email so we can insert a handlebars expression here with a variable and to add an handlebars expression we need to add double cury braces like this and inside the name of the variable so I'll add user name in C case but you can add all with lowercase or separate by underscore whatever you prefer just make sure to not add wide spaces between words great so now we need to set the username variable when sending the email so here on the index file inside the mail options object we need to set another property which is the context property and this will receive an object with all variables we added to the template in this case we only set the username variable so I'll put here John do for example great now let's test this so on the terminal node index okay message send back on Gmail uh here we have the old message without the username variable let's delete this one and open the new message and perfect as you can see here on the H1 it's now showing the John do which is the name we set on the username variable using the context property so this is the benefit of using a template engine we could set as many variables as we wanted and make the email message complete Dynamic according to our needs now here we set the tiles directly on the template but what if we have like tons of templates here and imagine setting these styles to each of these templates we will have duplicate code and if we have to change a style in one of the templates we'll probably have to change it in other templates as well leading to an exhausting task so it's definitely a good practice to have all these tiles in a different file so here inside the views folder I'll create a new new file called styles. handlebars and inside this file let's select the Styles here from inside the template including the style tag let's cut and paste inside the Styles file let me just format here a little perfect and let me just change something here so for example I'll remove this font size property from the paragraph just so we can test okay now we need to add the Styles file inside our temp template and handlebars allows us to reuse a template inside another these are called paros so the Styles handlebars file recreated is a partial and to insert inside the welcome message template the syntax is double curly braces as well and here after the open curly braces uh we need to add the greater than symbol and after the name of the paral in this case the Styles file great now on the index file inside the HBS options object we need to tell handlebars the directory where the paros file are stored so inside the view engine options we need to set the paros deer property in camo case and since we create the Styles file inside the views folder we can add here views directly great so let's test this by opening the terminal and run node index okay message sent back on Gmail here we have the old message as you can see the paragraph font size is with 20 pixels so let's delete this message and open the new one and perfect all styles looks correct the paragraph Without the font size property that we change and now we are using the styles from inside the Styles file and we can reuse this file inside other templates as well perfect now what if all emails we send we want to have a standard template like a base template and inside we want to add another template which is the actual message so for example we want to have a header section on the top with a logo for example and a footer section on the bottom with a greeting message saying something like regards and on another line the company name for example and between these sections we want to add our message template and handlebars allows us to do this by adding a raw block inside a template so let me add everything back here okay so let's create a base template and add the welcome message template inside so inside the views folder I'll create another file and this will be the base message. handlebars and inside this file I'll select everything we have on the welcome message template cut from here and paste on the base message file and let's remove the content here from inside the body because this will come from the Welcome message template so let's cut from here and paste inside the welcome message let me just format here a little okay so on the base message file uh let's say we want to have a div on top which will be a logo for example so company logo and let's say we want to div on the bottom saying regards and let's add a br tag to insert a new line and then the company name okay and let's add a class here on this bottom div of footer and here on the other div as well class of header for example so let's add some style to these classes so for the header class uh we'll will change the color of the text to a lighter gray so let me see here all right this one looks good now let's change the font size to something a little bigger like 20 pixels now let's copy this and change to footer and let's just remove the font size property and leave the same color from the header okay now back on the base message file uh we need to add the raw block that we receive the body message from another handlebar template for example the welcome message content uh between the header and the footer sections and we can add a raw block by inserting three curly braces like this and inside the body word so this raw block here will be replaced to the body inside the welcome message file now in the index file we need to add some extra configuration to the HBS options object informing the directory where our base layout temp templates will be stored so we need to set the layout de property just like we did for the partials here so the base message file is also inside the views folder so here we can add views directly now remember the default layout property here so by default handlebars expects a file called main but our default layout file is the base message so here instead of false we can add the base message file like this great so now we have a base template that expects another template inside let's test these changes so on the terminal let's run node index okay message sent back on Gmail so here we have the old message without the header and the footer we created on the base message layout or we can remove this message and let's open the new message and perfect as you can see here we have the company logo on top and the footer message here on the bottom and between we have the content from the Welcome message file so everything is working perfectly and we could actually create a function to make this more customized according to our needs and we use this function whenever we need and we'll add this code here inside this new function so here on the bottom let's create a new function called send email and for the parameters We'll add two which is the email address where you sending the email the subject the template we're going to send and the data we're going to send inside the template which is the context here so context and inside this function I'll select all the code here of steps two and three cut and paste inside the send email function so the front property uh we can leave as it is this and the two property we can grab from the parameter here so two and since the property have the same name as the value so we can leave just the two here like this and the same for the subject so let me remove here because now we're getting from the parameter and the template as well and for the context as well and the rest looks good so now we need to call this function so send email and the first parameter is the address we're going to send so for example io. mfra at gmail.com and the subject I'll add Dynamic email template with handlebars and for the template parameter we could send the welcome message template we already have but let's create another template just for testing so on the views folder new file and this will name another message do handlebars for example and inside this file let's just add a paragraph with a message saying for example your access code is and here we'll add an expression with the access code variable inside perfect now back on the index file here on the template parameter uh we'll add the new template we created to another message and for the context parameter we'll add an object with the access code property and we'll add 1 2 3 4 5 six okay now let's test these changes on the terminal so again node index great message sent back on Gmail so here we have the old message with the welcome message template file let's delete this one and open the new message and perfect we have the header here on the top the footer on the bottom and between the content from the other message template file we created with the access code variable perfect and now we can use this function anywhere inside our project let's say inside an express route or somewhere else and everything is customizable sending different templates with Dynamic data great so in this video we learn how to send email templates using the handlebars template Engine with Dynamic data and we also learn how to create partos and we use them inside a template file and we learn how to create a default layout for our email messages hope this video was useful to you and if it was please click on the like button and subscribe to the channel I'll leave the GitHub repo link for this example on the description below thank you so much for watching and hope to see you in the next video

Channel: manfra․io

Views: 482

Keywords: node, nodejs, nodemailer, handlebars, partials, email, send email with node, gmail, npm, javascript, coding, programming, github, vscode, dotenv, nodemailer express handlebars, styled email messages, dynamic, template, templates, send html email with node, html, css, manfra, manfra.io, node.js, template engine, html email messages, email message, send emails with node, send emails with nodejs, send emails with nodemailer, transporter

Id: JbmZ86Ho01s

Length: 21min 55sec (1315 seconds)

Published: Sat Mar 02 2024