Send Custom HTML Template EMAIL using Node JS

so imagine you're a company and it's Christmas season you want to send this beautifully crafted email to your clients informing them of Christmas specials and Christmas promotions node mailer allows us to send these custom emails using a special HTML configuration now I can see that many of you enjoyed my previous videos on sending emails through code well let me just tell you you're gonna love this video because in today's video I'm going to teach you how to send those elegant automatic emails that you always find populated in your inbox hello everybody Welcome to coding 101 my name is kutlo my objective is to make you a better developer one video at a time now if that sounds like something you're interested in be sure to subscribe to my channel and if you've learned something new today and like this video and leave a comment in the comment section by the way I would like to send a special shout out to be free.io who created this beautiful email template no they haven't sponsored this video but if you're feeling HTML lazy be free has these amazing HTML email templates I just searched and I said Christmas and I got these uh templates that you see over here so if you're feeling lazy you can just come over here and just create your own special HTML templates they have some over here that are for free like the one that I'm using so be sure to check them out so in my previous video I showed you how to work with node mailer I showed you how to send an email using node mailer I showed you how to configure node mailer and sent a simple text email so in today's video we're taking it up a notch instead of using text we're going to be using direct HTML so let me not waste too much of your time and let's get into our code so I think you're already familiar with this this is us only configuring node mailer and we're going to use node mailer to actually send our emails so you need to put your email over here and you need your application password in my previous videos I showed you how to retrieve your application password note that were you still using Gmail to send our automatic emails if there's anybody interested in other like maybe yahoo or and other email sending Services then you can just like send an email then probably next time we'll use one of those okay so we just created a simple function which is a promise that is sending our emails and we took that promise and we created a route and we're using that promise inside of our route to determine whether or not we were able to successfully send an email so I'm going to make this route more here I'm just going to say send email instead of just leaving it like that all right so so the thing that we're going to be much concerned with is over here you can see that in this part in our email we're using text in order to send an email so this is where we're going to actually be changing uh we're going to get rid of this and instead of having text over there we're going to use HTML and I'm going to put like in some like um template literals over there and I'm going to extract my HTML so this is the HTML that I got from b3.io so I'm just going to take that uh email I mean sorry that's HTML source code and I'm just going to plug it in here like that now if you want to be much more cleaner with this you can just like take this entire HTML and just like put it on a separate file and then just like uh export it and import it from that file so that it's not messy like this so you just simply put in this HTML configuration field and then after that you put it you put like your HTML source code next to it so one other important thing one very key thing is that you need to make sure that your HTML is self-sustainable and what I mean by that I mean that whatever files that are going to be working alongside with your HTML whatever external files make sure that they are not referenced locally let's say for example you have an image that you're using in your HTML make sure that you're not referencing that image locally because as you can see we're only giving nodes mailer our HTML file we're not giving it our image files we're not giving it our style sheets or our JavaScript files we're only giving it our HTML file so make sure that you're not referencing anything in a local manner you're referencing maybe an image that is already existing in the internet so if maybe you have an image tag like um let's say IMG and let's go and then we say SRC and then you try to do something like this and you say image dot PNG this image is not going to be rendered because this is a local reference what we need is something like um www.image.com dot PNG or something so it needs to be referenced in this manner it does not need to be referenced locally otherwise that image is not going to be rendered so the same thing applies to your stylesheet files to also your JavaScript files and many other items like that so make sure that every things are not rendered locally but they're rendered uh I don't know how I can say it externally on the internet so that's the one thing that you need to be careful of and so once you're done doing that once you're done putting your HTML in there the thing that we need to do now is to actually just like test our API whether it works accordingly okay so if we go down and let's see our API design API so we just need to test it and what we're going to test it using insomnia so insomnia is a free cross-platform desktop application that really takes the pain out of interacting with and designing HTTP based apis so insomnia combines an easy to use interface with Advanced functionalities like authentication helpers code generators code generation and environment variables so it's just an easy way to test out your applications so if you can look at you can look over here I've been using it for quite a while and in many of my applications so if you are not very a fan of Postman you can always use insomnia so let's not waste too much time let's put in our our string over there our path and then remember it's send what is that send email like that and then we press send what we expect to see is a what do we expect to see let's go back to our we expect to see a message called email sent successfully okay let's go back to our insomnia it's still running for some reason I guess maybe it's my computer it's pretty slow I'm gonna pause the video all right and there we have it took a bit of time but there we have our response our email has been sent in successfully and all we need to do now is to go to our email and check if our email has been indeed been sent successfully and there you have it about a minute ago as you can see uh email has been sent and you can see the Elegance that you're seeing over here uh very beautiful a very custom email that you would send to maybe your users so that they can maybe copy out a coupon or something you can also add buttons here and make them responsive the same way that HTML works so you can also further customize this email and maybe say Merry Christmas and enter somebody's name here that's precisely the reason why I chose to use template literals okay so we're going to send a specialized message with somebody's name okay so I'm just gonna say const is equals to name I want to call that wreck Dr query like this this should be fine I'm gonna give this name to our send email and then in here of course at the very top and our function needs to show that we are taking in somebody's email so and then now we go to HTML and we say happy Christmas Yeah we actually search for where they say Merry Christmas so I'm guessing this is it right here Merry Christmas and we need to put a person's name over here I'm just gonna put uh because this is template literals put somebody's name all right so this should be fine and it's a little bit complicated that is why you need to own your HTML and you need to understand your HTML so that you can better edit it or it's always better to just take the HTML and edit it on a separate text editor okay so and then what we need to do now is we need to go to insomnia and actually invoke that query so this is going to be name and then our name is going to be coding 1.1 and now we send this pause the video wait for it to load it's done loading this time it took about five seconds so now we need to go to our email and you can see that it says new message and we just need to show that message and there you have it Merry Christmas coding 101. of course we can always expand this so you can see that we've customized we've actually put in our name over here or the name of my channel so Merry Christmas coding101 so it's as simple as that you can also do it yourself nothing too complicated so yeah that is sending a very custom email using node mailer and HTML so yeah that is about it thank you very much for watching today's video I really appreciate it make sure that you have subscribed if you haven't subscribed because I'm dropping lit content from here onwards and you do not want to miss if um you have any comments you can leave them in the comment section I reply to every comments I mean as many comments as I can so yeah thank you so much for watching I will see you next time on coding 101

Channel: Koding 101

Views: 19,929

Keywords:

Id: abw96dX-3bs

Length: 10min 47sec (647 seconds)

Published: Tue Dec 20 2022