Nodemailer - Send Emails From Your Node.js App

[Music] hey what's going on guys so a couple weeks ago I created a video on creating a responsive contact form using we used a little bit of grid CSS and it was just the front end it was just the UI and I had a bunch of requests asking to actually hook up a back end so that the form would actually work so we went with firebase that seemed to be the consensus we said that we created another video where we took the form and made it so that we could submit and the fields would go to a database in Google's firebase so what I want to do now is I want to take that same form and I want to create a simple nodejs and Express application and implement node mailer which is a mailing module for nodejs and we're gonna use that we're gonna make it so that we can you know fill the forms and send it and it'll go to a specific email address that you specify in the application all right so that's what we're gonna be doing this video guys hopefully you enjoy it and let's get started so if you guys really enjoy my content you feel like you really get something out of it consider becoming a patron to push me to keep bringing you high-quality educational videos showing your support with even $1.00 means the world we have different perks and tiers including a $2 tier that'll give you every udemy course that I release absolutely free to learn more check out patreon.com/scishow node mailer once we install it we need to call this create transport function pass in a configuration object with our email SMTP information now as far as SMTP you can use Gmail if you want but you may have some issues in fact if we go to usage and then using Gmail it'll tell you that it's by no means a preferable solution unless you're using oauth2 authentication Gmail has a concept of less secure apps and that's what your application will be considered if you just straight up use the Gmail SMTP without this Roth authentication but just a test and stuff it's it's absolutely fine but you don't want to do it with with a production application now what I'm gonna be doing is just using my shared hosting account well what's not actually shared but it's a it's a it is a shared hosting account on my VPS but if you signed up for a shared hosting account you you should have in that SMTP server that you can use with your emails all right so I use in motion hosting for my services I'm actually going to be doing a web hosting series on YouTube showing you how to upload your website how to create the account how to create email accounts all that stuff and we're gonna be using in motion for that as well but you'll see that down here I have an email called test at traversée mediacom so I'm going to use that as my email account to send from and there's a support page right here just showing us what to use as far as parameters for the port so SMTP port is 587 the server name is going to be mail dot whatever your domain is so mine will be traversing Mediacom and so on but what I'm gonna do is you I'm gonna have to put in my email address and password so I'm gonna delete that test account after this video just you know so you guys aren't sending from from my email address but yeah that's what we'll be doing so let's go ahead and let's set up our note application so I have an empty folder here called node contact form now the only thing you do need installed on your computer obviously is no js' if you don't have that go to node.js dot org and download and install it okay so I'm gonna open up my terminal I'm using the integrated terminal with vs code I also have git bash integrated with that terminal if you want to do that you can simply go to your preferences settings and you can add in this setting right here terminal integrated shell windows and just point to your wherever your git bash is located and you can download and install git bash from git - SCM comm all right so let's go ahead and just run NPM NIT to initialize our package dot JSON file it's gonna ask us some questions so node contact form is fine for the application name version that's good description will just say sample app using node mailer entry point I like to use app dot J s and go through that author feel free to put your own name license I'm just gonna say MIT is this okay yes it is alright so now what we want to do is we need to install some dependencies for our applications so we're going to be using Express since we're using a form that's going to be submitted as a post request we need to install body parser so that we can get the information from the form we also need a template engine so we're gonna use express handlebars and then of course we need node mailers so let's say npm install - - Save Express body - parser Express - handlebars and node mailer all right so we'll get those things installed and those should get saved to our package dot JSON file there they are and now we'll do is create our App J's file all right so we got a pas I'm also going to install the well I already have installed I'm going to show you how to install something called node Mon which will continuously watch your applications so you don't have to keep restarting the server every time you make a change so you probably want to install that globally and you can do that with NPM install - g4 global and then node Mon alright so just go ahead and run that alright so in our app j/s file first thing we need to do is just bring in all of our stuff all of our dependencies so let's create a variable called Express and we're gonna set that to require Express ok we also want to bring in our body parser so we're gonna say body we're gonna use camel case here well why did that happen hmm node mod gave me a permission error but that's fine I already have it installed anyways alright so anyway body parser we want to use camel case here and then we're gonna say require and the actual module is body - parser our body - parser alright and then we want to bring in our template engine which is Express handlebars so we're gonna call this exp HBS and set it to require and it's gonna be Express - handlebars alright and then finally we want to bring a node mailer so that'll be require node mailer so we're just bringing in the dependencies that we installed next thing we're gonna do is initialize our app variable so let's say Const app and we're just gonna set it to Express just like that alright then we're gonna create a route so we can say app get and this is gonna be just 4/4 though for the index page we're just gonna have this one route and let's put in an arrow function here or you could just put in a standard function callback function and this is gonna have a request and response parameter and for now we're just gonna say res dot send which will just send something to the browser and we'll just say hello alright now to listen on a port we're going to say app dot listen okay port number will say 3000 and can also take a call back I'm just gonna put in an arrow function here and let's just say console dot log and we'll just say server started all right so now we should be able to run it let's go ahead and save and let's say node app dot J s and we get server started so if we go over here we go to localhost port 3000 we get hello because that's what this route is doing it's just sending out hello all right so let's see what do we want to do next we have a bunch of middleware to set up middlewares is basically just like kind of like configuration settings so let's the body parser has its own middleware let's set up the app engine first I'm sorry the view engine so for that we're gonna go right above our route it's a view engine setup okay we're using handlebars so we need to do app engine and it's gonna be handlebars okay and then we're also going to pass in exp hvs and some parentheses and then we need one more line we're going to do app dot set okay so we want to say we want to set the view engine and we want to set it to handlebars all right so now let's add the body parser middleware so for that you know what I'm gonna do is just go to the body parser documentation so we'll just search for body parser and github page right here and we just want to lines which are these right here so I'm gonna copy that let's paste that in we don't need the comments so we just need these two lines right here all right I like to use semicolons let's see what else we need I think that's it actually for middleware oh we need to set up our public folder so with with with nodejs and express if you want a public folder which is actually where we're gonna put our our CSS file we need to set that up so let's create a folder called public okay so any assets you have any images or CSS files any client-side JavaScript things like that will go in public all right will actually have a folder in here called CSS and that's where our form CSS will go but we need to let Express know that that's the folder we want to use so we'll say public or mostly static it's actually called a static folder so for that we need to say app dot use and we're gonna say slash public okay and then we need to say express dot static all right now when you actually need to bring in one more module which is a core module that's why we didn't have to install it and that's the path module and that's just to deal with file paths so I'm gonna say require path alright and then let's go back into the express dot static method and we're just gonna pass in path join and we're gonna say two parameters here one's gonna be double underscore dur name which just basically represents the current directory and then public okay so we're just defining our static folder as this public folder so it knows where where to look and what to treat as as the static folder alright so let's go ahead and save that now I'm gonna stop this server with ctrl C and I'm gonna restart it with node Mon since we have that installed and that will constantly watch it you can see it's watching it and anytime we update it it will you know it'll update so if we go over here and reload we're still gonna just see hello so now what we want to do is we want to create our view for our form so let's go into our directory over here into the root and create a folder called views and inside views we're gonna have one view and I'm gonna call it contact dot handlebars okay it's gonna have a handlebars extension by default and this is where we put our form now just to test it out first let's just say contact and save and then we'll go back to our app J s and for our home route instead of just res dot send hello we're gonna say res dot render and we want to render the contact form or the contact view and save reload and we get contact all right so now we need our form now the link is in the description for the zip file which will include the index page let me just see if I have it somewhere on my let's see I think it's in my downloads it's here it is so you'll have a link to a zip file and this is what will be in it responsive form with the index.html and the style dot CSS so let's go ahead and bring those let's see how do I want to do this I'm just gonna bring out the responsive form folder hello with hell let go what is happening I have six monitors so it might got lost somewhere where the hell is it well there it is alright so let's open that up and let's open up our project folder as well which is in let's see projects node contact form so those files that he just downloaded we're gonna put the style.css into public and then CSS okay just bring that over and then the index.html I'm just gonna open that let's see I'll open it with sublime and we're just gonna grab everything in it okay so we're gonna just grab everything and we're gonna put that into let's go back to visual studio code and we're gonna put that into contact dot handlebars all right so we'll paste all that in just like that and let's save all right so we'll go over here and reload and we're gonna get the all the markup but there's no CSS because we need to fix the link okay because right now it's just pointing to style dot CSS what we want to do is we want to point to public CSS style dot CSS so let's go ahead and do that public slash CSS slash and we'll save and reload and there we go so now we have our form okay and it is a responsive form so I'm gonna make it very small now there is a couple things we need to do just make this smaller there's a couple things we need to do for this form to actually work with nodejs so one thing we need to do is go to the form tag and we need to add in an action and a method okay so the method is gonna be post it's going to be a post request and then the action is going to be a route that we're going to create which is going to be slash send okay I think that's what I used actually we don't need to slash it'll just be send and then down here we just have just a write a button with no attributes we're just we're gonna add the type of submit so this is actually a submit button alright and I think that's really all we need to do well one other thing we're gonna add in a variable for like a message that says email sent or whatever so we'll put that right under the h3 and handlebars we use the double curly braces and we'll just say MSG alright so let's go ahead and save that and reload and everything should still work fine by the way that animation that you see is coming from animate CSS we just brought it in with a CDN and we added this animated class and this bouncing left that's what that is in case you didn't watch the the initial video and like I said you can use your own form you don't have to use this one that we created but you know whatever so let's now go into our app j/s and let's create a post route for the submission okay so we'll say app post and it's gonna be to send we'll put an arrow function here and this needs a requesting or response and then just to test it out let's say conch yeah console dot log and let's actually let's get the form field so we'll say request dot body alright we're able to do that because we set up our body parser so let's save and let's just make this bigger our terminal here because the console log is gonna show down here because it's on the server it's not on the client so let's go ahead and try it out we'll put it in and say John company you'll say 1 2 3 design email address just put my email address phone number we'll just put all-fours message we'll say hello and let's send and there it is so it's logging all those all those fields so alright good so now that we know that that works we need to implement node mailer now before we do that I just want to create a string an output string that is actually going to be in the body of the email and that should include all of these fields because we need to know what the user put in here so let's create a variable called output and we're gonna set that I'm actually going to use an es6 template string so I'm going to use backticks here take note that these are back ticks not single quotes alright and then what we'll do is just create our HTML so let's put a paragraph and we're gonna say you have a new contact request and we'll put a ul now let's put a h3 and we'll say contact details ok and let's see under the h3 I'm gonna put a ul I use Emmet here I'm not sure oh yeah I know yeah I can all right so let's see Li let's say name now in in the template string if you guys don't know if you want to include a variable it needs to be in money sign and then curly braces so we want to get the name now remember we can get the info with request dot body and we just want the name so we'll say dot name alright and then we're gonna go ahead and just put this in a couple more times this is going to be the company so let's change that say company then we'll have the what else email then we'll have the phone number okay make sure that all of these match the name attribute in the form so name company email phone and message all right now the message I'm actually gonna put down here I'm going to put another h3 and just say message and then we'll put our variable say request body dot message and actually let's put that in a paragraph all right so that's our output now for node mailer we can just go let's see let me just open up the dole mail or site and this is basically all we need now we don't need this create test account thing right here we don't need to wrap our stuff in that we just want everything that's inside of there so this from here to here and we're gonna copy alright and then let's go ahead and put that stuff in right under the output okay so we'll just do that alright and then let's see we have let transporter equals node mailer dot create transport and this is where we put our credentials for our server so like I said I'm using my traversing media account so my host is gonna be mail dot traversing Mediacom the port is 587 secure I'm not using SSL so that's gonna stay false and then for the user that's gonna be the entitle email address so it's gonna be what am I using test at Travis C media.com and that should actually be in quotes all right and then for the password should also be in quotes is one two three ABC and I'm deleting this account right after so don't bother trying and down here we have our mail options so the from who do we want this from so let's go ahead and put in I'll just put in my name actually let's put in let's say node say node mail or contact and then for the address the email address should be whatever you have here so we'll go ahead and put that in and then to is who you want the email sent to and you can have more than one so you can have a list of receivers I'm gonna put in one of my gmail accounts so let's say I'm gonna put tech guy info at gmail.com and then for the subject let's just say node contact request and then plain text I'm not gonna worry about that the HTML is gonna be the output string that we created up here okay so we're gonna just replace this with the output variable like that all right and if you want to create one for plain text you can do that as well but I'm not gonna go through that so let's see send mail it's this is this is fine let's get rid of the comments here we don't need that this is basically if there was an error if something goes wrong it's going to show us in the console if there's not then it's just gonna say message sent but then we have to figure out what we want to do once the form is submitted so we can redirect or whatever what we're going to do is we're going to re-render the contact form with a message okay remember we have this message right here this msg so we can pass something in that'll display there so let's say res dot render dot naught dot parentheses and we want to render contact and then we just want to pass in an object with MSG value and we'll just say email has been sent just like that and that should do it let's save okay make sure oh this should be mail not main so mail dot traversing media and again a few I mean if you're using Gmail I believe it's mail.google.com or something like that you'll have to look it up you just need some kind of SMTP server alright so let's go ahead and save this and then we'll try it out I'm just gonna reload this let's see let's put something in here let's say John Doe company one two three design email address we'll just say test to test comm phone number we'll just do all fours and we'll say hello from node app and submit okay looks like let's see down here oh one thing I forgot something I forgot something let me just reload this if you are not on the actual if you're trying it from your localhost like we are right now it's we're not actually you know on this domain name we have to add one more parameter in here so let's say yeah so we have to put a comma right here and we're gonna say TLS set that to an object and we need to say reject unauthorized or reject unauthorized and we want to set that to false okay because it's rejecting us because we're actually doing it from our local host we're not doing it from the actual domain so we need to set that and that should fix this error down here so let's save let's go back over here and let's try it again hello from node app submit cross our fingers and email has been sent so let's look down here and we get message sent and it gives us the ID all right our the message and the message ID so now for the moment of truth I'm just gonna go to my gmail account here let me just open it I'm gonna open it up over here first and there it is bring it over node mail a contact okay subject is node contact request and you'll see if I hover over this look at the email address it's coming from test at at traversée Mediacom if we click on it you have a new contact request John Doe for the name the company the email the phone and hello from node app so we are now sending an email from our contact form through our nodejs app and it didn't even go into the spam even though it's from our local host and all that stuff it didn't even go into spam so that's it guys hopefully you enjoyed this and you found this helpful but that's it yep so thanks for watching if you liked it please leave a like please subscribe if you're not and I will see you in the next video hey guys I've just created a new discord server that's open to the public the goal is to have a place where people can go to help each other out for programming issues as well as just a place to discuss new ideas and get feedback I also check in daily there's a channel to request videos on YouTube and much more so if you want to check it out just go to discord GG slash traversée media

Channel: Traversy Media

Views: 270,823

Rating: 4.9369197 out of 5

Keywords: nodemailer, node.js nodemailer, nodemailer tutorial, node.js contact form

Id: nF9g1825mwk

Length: 29min 54sec (1794 seconds)

Published: Fri Sep 08 2017