Send Emails with React Node and Nodemailer

so please and please like the video subscribe it will only take uh a second but it really really helps this channel to grow and to develop hello everyone today I'm going to be showing you how to send emails with non MAA and react so it's going to be very quick tutorial so let's get to it now over here is uh test um what you can do is that you can send an email to this email and you can just subject and you can just put a message and you can send the email now in our console once that runs it's going to show up in our console as success so if we go to our Gmail account we'll be able to see that email now how do we create something like this very simple uh we're going to have two folders here we have the clients and we have the server on the client you can just run mpm install like I've done here uh over here MPX create react app in the client directory and in the server directory we're going to do that together so we're just going to clear this going to say CD go back and going to CD into the server and in here we're going to say mpm in it so our package name server just say yes to everything okay so that is done now to get some of the packages we're going to be using we're going to be using the mpm install we're going to using node mailer we're also going to be using Express we're going to be using cuse and we're going to be using node more so we're going to allow that to install and while that is installing we're going to come to our server directory we're going to create a new file and call it app.js all right so this app.js needs to be in our St directory so make sure your app.js is in your server directory so you can see everything here is installed so we're ready to go so in our app directory we want to say constant Express equals to require Express they want say constant node mailer equals to require node mailer then we're going to say conent ca equals to require C and going say constant app equals to express and bracket okay then we're going to say the constant Port now this is the port we're going to be running our server so we're going to be using Port 5,000 over here so here we're just going to say app. use C let see app.use EXP press Json limit 25 MB then we're going to see app.use Express do Ur included then we're going to say limit uh 25 MB as well okay so we're not going to say app.use request where next say res do set header okay and here we're going to say Access Control allow origin okay here we to put AIC now going to say next all right so so far so good just hide this so we now going to say function send email uh we're going to see return new promise going to resolve and reject then we're going to see variable transer water now um a lot of you will be thinking do I have to memorize all this code no you do not have to it's available on the Node mailer website all you have to do is just go there and look through it so let's continue so variable transporter we going to say node mailer do create transport and we're going to be seeing Service uh you can use Google you can use mail. you can also use Yahoo is all dependent on you so here I'm going to use Google okay now after service Google we're not going to say all now over here we're going to say user now here you're going to put your email example at gmail. so I'm just going to use this as like example but over here you should put your email address that you plan to use now you also need a password now this password is not your regular password it's not your email password this password can be gotten from your app password setting if you're using your Gmail account okay over here is not Google sorry it's Gmail so if you're using Gmail all you have to do is to go to your Gmail account go to your security and search for app password now I'm not going to do that here because I don't to compromise my settings okay let me just cut that all right so in your um Google settings you just want to come to security and I want you to just search for app password so over here in app password you just click on it and you create a new app password it will show you the password which you will be placing here okay it is not your Gmail password it is an app password that you get from Gmail so even when you want to use another service like mail.ru you just go over to your settings and search for app passwords these are to these are passwords that are given to to party applications to be able to send emails on your behalf okay so it's very very simple to get um that password all right so let's continue to what we were doing now in our password we've settled that already so this is our transporter over here so we're just going to leave that as it is now we're also going to come to constant mailor config this is configuring the mail that we're sending to our users okay so we're saying from uh example example gmail.com okay and we saying to email okay okay now now um we're going to be getting in our send email we we're going to be getting our email the email we are sending to we're going to be getting a subject and we're going to be getting a message so over here we can now say to the email that we sending to and the subject should be the subject that we have and then the text should be the message now if you are confused by what I did here is this is just simply doing this it's the same thing okay so we're saying the subject uh property should be filled by this subject that were passing through this function okay so it's very very simple right so now let's continue we've gotten our M configuration we've gotten the users email the user email we're using and the app password okay and the service we're using is Gmail Okay so we've set all of that up now we need to um create a function that will send the email so we're going to say transporter transporter do send mail okay maore config configs then we're going to say function error and info then here we're going to say if error okay we going say console.log error then return reject message an error or Cod okay is this a spelled right no we need another R exactly so after that we're going to say return resolve message email sent successfully okay so that's that for that now we need to configure our Port because uh on our client end we're going to like um um fetch that API this is going to be like an API call so we're going to be fetching that from our client side so we need to configure how we are going to like access this function so what we're going to see we're going to see app.get slash now this slash is is simply saying for us to access this function uh you can just type in on your browser say Local Host dot uh no sorry it's wrong you see Local Host 5,000 slash now the reason is 5,000 is because that's the port we are using here you can always configure this to be any port you want it depends on you then slash is what we're using here you can also say send email then for you to access uh this function that we're going to work on you have to send you have to use it like the send email okay okay I know I know that makes sense if it doesn't make sense let me know in the comments I will explain forur that for you personally okay so here we just need slash so over here we going say request okay see this is the function now we're going to say send email right um request do query and we're going to say dot then response res send response do message okay we're going to see dot catch error R do status 500 do send error do message okay uh over here this was supposed to be in okay yeah all right then we also need to say app. listing see Port Ono dolog and here we're going to see n Mail is listing in at HTTP SL Local Host and then the port number Okay so we've configured our our back end here but I'm going to change this port to 4,000 because I already have something running on 5,000 I don't want it to get like conflicted now let's run this server to run the server all you have to do is use node Monon and say app.js okay and you click on it now you can see and node Miller is listening at um the port 4,000 like we asked it to now we're going to go to our client site to configure our uh this thing what the user is like seeing so let's go to the client side go to app.js I want you to delete most of these things you don't you're not really going to need it and your test um logo this and this okay so you go to your index I want you to wipe this then I want you to go to this code and just you can just leave that there uh all right so we're wiping this wiping this okay exactly now how do we connect this front end to this back end it's very very simple okay now all we need to do is create another terminal here and we're going to CD into clients this time around going to clear now we have to import install sorry exos I think this is spelling yes we have to install this cuz this what we're going to use do all our fetching okay so here in our div we're going to say input type equals to text and we're going to say please holder recipient email okay all right then we're going to see we're just going to close this because we've not created so here we're going to delete this to delete this it doesn't exist then over here we going to say constant email set email equals to use State okay then we're going to do this two times uh we're going to get subject we're going to change here to subject here we're going to change this to message and here also going to change this to message okay perfect now let's run this so that we can be seeing this on this screen we don't want to be seeing this one so we're going to clear this and say mpm R there okay not that's not npm okay not npm there sorry see keep using U nextg codes instead um mpm start okay so we need to run it another port cuz I'm using that Port already we need to go to the index andp this okay so we can see our recipient email here uh in our index um we just want to come over here and say div so everything is in the middle for us margin 0 or2 we going to say with 100% then we're going to say text align Center okay then in our input we're going to say margin 10 PX okay perfect now let's go back to our app directory now in our directory we need to create the other things so here we're going to say onch change is going to equal to a function event and say set email to e. Target do value okay then we say PR we say input type text this holder uh subject on change let see e e the set subject e do Target do value okay perfect then here we're going to see another brick line and we're going to say text area please holder um message say unchange equals to e e do Target do value no no no it's not correct supposed to be set message e. target. value okay okay exactly so now another break line and then Buton and on click we need to send email send me okay I'm going to say send me all right perfect now say send me is not defined uh we're going to fix that right away so we're going to say here constant send mail equals thisal this so here we're going to say axio imported ax so we're going to say import axus let here put axio from axio hope this is actually installed let's check our package Jon okay it's here here here all right so we have axos here so we're going to say do get HTTP Local Host 5,000 so this is not 5,000 this is 4,000 remember remember okay so here we're going to see pams and the params we're going to send we're going to need the email like remember when we're creating the app.js here we need our email we need our subject and we need our message and the reason this getting passed to this function is from here in our send email when anyone queres this our request. query is being put into this bracket here which is now sent over here which now extracts the email subject and message so you we need to pass in the email the subject and the message okay so that's why we passing that there so after this happens then we're going to put a promises a promise so then if it's successful we're going to say console.log uh success okay very simple then if is not successful we're going to say catch the error I'm going to say console.log failure okay so isn't this perfect all right so let's send our email to4 gmail.com and subject we just going to say n Cod and we're going to say it works this I'm going to send me okay so we can see here it shows success wonderful now if we go over to the Gmail that we sent it to all right so we can see it here showing it works and niner coder so isn't that amazing so that's how you can send emails to users now if you want to send multiple IM uh emails to different people let's say more than one email address you can easily do that how can you do that after you type in the email right you just come to the back here and put comma then you type in the next email you can see another email you can put comma put space put another email sample gmail.com and you can continue like that so on and so forth just as just make sure you put comma and then the next email okay that's how you can send email to multiple um email addresses okay now let's say you want to send like a HTML let's say for instance the message you don't want it to be you want it to be in a HTML format okay so let's say you want to edit the message that the person is sending you can easily just come over to this text right here right and change this text to HTML once you change this HTML this message just cancel it then you can put this back tick then you can just say you can use your HTML tags as you would normally use okay uh ER here okay so over here we can now say this should be the message right then we can come down and see in another P tag say best regards okay so over here when we come back we can now send this email and you can see it says success okay so let's go and check out that email okay guys so you can see here that works you can see the message that is here and you can see the best regards that we put here so that's how you can send HTML like uh HTML WR helps to users as well okay so that's how we can use U node mailer to send emails to multiple people so please and please like the video subscribe it will only take uh a second but it really really helps this channel to grow and to develop so thank you very much

Channel: 9jaCoder

Views: 4,133

Keywords: react, node, javascript, nodemailer

Id: -0n1GmENxME

Length: 24min 48sec (1488 seconds)

Published: Wed Nov 01 2023