How to send Emails through REACT JS + Node JS [EASY!!!]

hello everybody my name is scooter welcome to coding 101 in today's video I'm going to teach you how to send an email using react.js and node.js this email sending aspect of functionality comes a lot in development I am actually willing to bet that there's not a single website you can construct where you're not going to be required to send automatic emails not a single one I actually happened into this functionality just recently when I was developing a website so in the contact page of the website that I was developing I had to create a contact form that allowed the user to send in requests or use that platform to contact a consultant and inquire regarding a service that the company provides so maybe you might need this functionality when you want to update the customer regarding their shipping or payment status especially when you are creating an e-commerce website so you're going to need to send like those type of automatic emails and there is no way and The Rock Says No way and you can be sitting around a computer to send these actual emails you need to automate this process so that's what we're going to be doing in today's tutorial but before we continue further on I would like to encourage you to subscribe to this channel I have plenty of videos like this that really help your development process so be sure to subscribe to my channel if you enjoyed this video give me a like and if you have any type of comment if you have any type of criticism I accept whatever so just make sure that you leave them in the comments section and I'll be sure to respond to as many comments as I can so in this tutorial I'm actually going to show you how to move mail information from the front-end aspect of your project to the back end aspect of your project using axis now if you're not familiar with axios I would advise you to check out my course on axios I created a crash course on axios and it's just going to help you understand what axios is all about and how to implement axios in different types of scenarios so make sure that you check out that course and what we're also going to be using in today's tutorial is node mailer so if you're not familiar with how to send emails using node mailer because node mailer is an npm package that just makes it as easy as possible to send emails so be sure to also check out my project on how to send emails using node mailer or using JavaScript in node.js but don't worry if you don't want to do that don't worry we'll brush through these details very shortly so now let's just try to understand the Baseline of our project so what I simply did is that I just created a simple react template using wheat if you're not familiar with Veet once again I have videos concerning this so make sure you check those out as well so I just created a simple react template using Veet and let's go to our project structure so that we can see what we have currently we have two folders in our two main folders I should say we have the client folder and then we have the server folder okay this is not supposed to be there we'll just get rid of it we have the client and we have the server over here so these are our two predominant folders that we have inside of our client this is where we're going to store our front-end information and in our server this is where we're going to create our server all right so let's get into it so what we're going to do is that we're going to start with our app development our backend development sorry we're going to start with our back-end development so as you can see I've already created a file called app.js This is where we're going to put our server information inside so I'm just going to paste it in and then I'm just going to explain it to you all right so this is our server information we're going to get rid of that because we don't need that per se so if you're not familiar with Peck and what we're simply doing over here is that we are importing those modules that we're going to use uh Express we start off by importing express.js if you're not familiar with express.js Express is actually a back-end web application framework that is used to build apis but in this case it's used to build restful apis with node.js so it's just used to build apis so apis there's a way to communicate to our friend of our front end so that's what we're going to be using it for in this project so we're just importing Express and node mailer and this is where we create our server and this our server is going to be running on pod 5000 and in this function that we have over here this is the function that we're going to use it actually send out emails and a couple of configuration details that are needed over here first uh before you actually deal with node mailer you need to actually create a Gmail account we're going to be using Gmail in order to send out emails you need an actual Gmail account and from that account you're going to extract an application password not the password that you actually use to log in into your Gmail but an application password that permits us to actually use Gmail to send these automatic emails so it's a password that is actually separate from the password that you use to log into your Google account so you just extract that password and then after that use um the email over here if you don't know how to extract the password be sure to check out my previous video I show you how to do it and then after this we have our mail configs whereby of course we use that email that we're going to use to send these mails all these emails and then we have the recipients email over here and then here we have the subject and then we have the text that is going to be going to the recipient so in here you can actually you have the option to use HTML as well and the HTML will be will be displayed on the recipient site and we use the transporter to actually send that email so yeah so that's about it so this entire thing is a promise and we take that promise and we put it inside of our API over here as you can see we declare a get API and we use that promise that email sending promise in order to send out emails yeah and then after that it's going to respond with a message or it's going to respond with an error okay so that's about it for our backend if you have any problems with this make sure you uh leave those comments in the comments section so what we're actually going to do now is that we're actually going to run we're actually going to run our server I'm going to say node mod we're going to use node Bond okay so I think maybe we forgot to install our modules so I'm just going to say server clean this up let's press node mailer like that install Express load mailer like that and then after we've installed our packages make sure you start your server using nodemon you can also install nodemon okay so you can see that project is running at Port our server is actually running at 0.5000 that is okay so now we're done with the backend aspect and now we're going to be dealing with the front end aspect of our project so in our project the other thing that I actually forgot to mention is that we're going to be using Tailwind to build our front end so to in order to configure Tailwind just go to the Tailwind website we have a place whereby you can learn how to actually configure Tailwind for a react project how to install Tailwind CSS with a create react app project so you can do that they also have information for vit as well so just make sure you go to tailwindcss.com to actually do that I also have a video or whereby I explain how to configure Tailwind reacts project as well okay so we need to start our front-end project oh it's I think it's already up cool awesome so now we need to create our contact form I'm going to come over here to SRC and I'm going to create a folder and I'm going to call it components it's actually going to be one component inside of here and I'm just going to say contact form dot Js and then we're just going to use the es7 shortcode in order to create that Boiler code that's okay and inside of here this is where we're going to create our form actually our contact form Act form right so the first thing I'm going to start with is that uh I think protea must have gotten rid of my brackets I'm going to need my brackets back and then inside of here I'm just going to create a section and in this section I'm going to give it a couple of classes class name and then I'm going to give it a white background to do let me just say Doc mode should be a bit of grayish grayish 900 we'll do that's fine then I'm going to create a div class inside of here um this is oh class names are horizontal heading py8 for larger strings I want py16 MX Auto next w screen empty all right that should be good and now we're going to create the title and we're going to use an H2 tag so our h2 tag over here give it a bit of plus name and I'm just going to give it a margin bottle of Four a text font of for excel and I'm going to say tracing tighter now we're going to give it an extra bold font weight font extra volts there we go now I'm going to place make sure the text is in the center text Center see make sure that the text also has a bit of a grayish it's a grayish dark gray 900. and then duck mode all right and then so that's it and we're just going to create a small paragraph in there I'm just gonna paste that in to be oh we forgot to put like the the head the header so it's going to be contact us like that and now we're going to create a form and instead of a form of course we now have an action item I wonder if we're going to need the section okay Plus space Y8 you can check out flow byte for more of these types of templates these Tailwinds templates they make it really easy they're not sponsoring this video I hope they do now we're going to create a label inside here inside the label we're going to create a label the label is going to be for email and then class name give it a couple of Tailwinds properties make sure that it's a flex item and I want it to be towards the center why should it be towards the center yes it should be towards the center self Center the display to be block margin bottom 2 text size small font weight font medium text should be of a grayish 900 color just like our heading and on dark mode it should be White should it be white maybe we can reduce the grayish to be okay so let's just say text Gray 300 instead and let's do okay so that is our label and inside of our label the first thing that we're going to need is the email so your email so let's see how this looks before we continue so I'm just gonna go to app.jsx and get rid of everything inside even this P tag as well let me get rid of that you can get rid of that state as well as this so essentially we're not going to do anything here I'm not gonna need the plus name as well all right and inside of here we just say contact form and then there you go done report it at the top see how it looks I'm just realizing that over here our contact form is in a JavaScript format but this is jsx so maybe we might want to rename it and just say jsx it's fine that's fine let's go to our website now and see if everything oh there we go so this is our header and then this is everything that is inside okay cool this is fine so now let's go back to our code and design our input tag save this should be fine okay so now we're going to create our input tag in here input tag that is associated with that label I'm just going to say input oh my goodness that inside of there I'm just going to give it a couple of so the type should be email and the ID should probably be email as well do we need the ID I don't think so class name and put in our CSS over here okay so we want to give our input tag a bit of Shadow effect so I'm just going to say shadow small and I'm going to give it a background of light gray 50 though I'm going to give it a water make sure it has a border and the Border should be Gray and gray 900 I think I should do everything inside should have a small small text font size and we want it to be rounded I'm going to give it grounded Lodge so that's the Border radius if you're not familiar with this and I should have a focus ring you're gonna see how this looks once we're done Maybe 500. and focus water primary 500 I think that should do yeah like that should be the full width give it a couple of padding of 2.5 on the duck mode it should be so this is actually a lot of classes so I'm just going to paste them in because I had already done them before I'm going to share with you the source code at the bottom of the description box so I'm just gonna instead copy this and copy and paste this so I've just copied and pasted them so this is fine now make sure this is class name instead of plus we're in react do not JavaScript so let's check out how everything looks perfect and we can look good so you can see if we focus that's what we were doing to make sure that when we focus there's something that changes so you can see that the border that when we focus it sort of like change it it has a more darker sort of like color so that is fine so we're just going to do the same of the rest of our inputs and labels because we have about three of them so I've just pasted that in because we don't want to focus too much from Tailwind it could take a bit of time so this is our contact form let's see how it looks now perfect it looks good so you can see that we this is where we put our username this is where we put our subject and this is whereby we put our message and we also should have our submit button I think all right so we didn't create our submit button so we'll just create our submit button now and also I think I'm also going to copy and paste the submit button so we don't waste too much time let me just get into the X seals of this project as I'm dying for that funny enough though there's this so let's find that it doesn't show up on our UI that's weird Okay so while looking for a submit button I've actually realized one of the areas that we've made html4 so when you're in react it's supposed to say not just four it should be html4 so I'm just gonna try and change that before not html4 I'm just going to change that html4 instead okay so one other thing that I actually I was supposed to mention at the beginning of the project is that we have we have a Tailwind configurations um so yeah this is the part where you configure your Tailwind so you might just want to check out these configurations uh or just copy and paste them like like I said I will leave the source code in the comments section so that you can just like copy and paste these config or you can copy and paste these configurations into your project if you just want to build it up from scratch so that is the primary reason why our submit button was not showing up it's because we did not copy and paste configurations that we have done earlier but as you can see there's our submit button Now we move on to the important aspect of this is actually connecting our front end with our backend so what I would like to do though so what I would like to do is that I would like to come over here to our app.js and I'm going to create a new API that's going to take in a couple of parameters I'm going to create a post API and I'm going to call it send email send email like that it's going to create that API address there you go and this is going to take in uh a couple of parameters and I'm going to create I'm going to make it to take in a couple of parameters in here so the first thing that it's going to take oh we can just say params do you want to do that um we wanted to structure that params and let's just structure the parameters and in here we're just going to have maybe receiver or recipient a recipient email recipient email that's what we're going to call it and then we're going to have maybe the subject and we're going to have Maybe the message as well so that's what we need to receive and now instead of having our own hard-coded subject we can just come here and we can just email here on and just go to recipient email and on the text you can put in message all right yes and then over here we can just say um okay you can say send email and say request that body like that and then we just carry on with that lens and the catches as always it should be fine Now we move on to so we've successfully created our API over here there's a post API that's going to be receiving a request.body now because we are passing in our email as a body is something known as course so Coors is um a certain a certain module that allows us to transport information like solid information from the front end to the back end aspect of this so we need to implement course we need to show uh back end uh or maybe like sort of like set that up so that we can allow information to be passed from the back end from the front end to the back end because if we were to run this it would not allow us to actually pass this information around so we need to set that up using Express so in order to handle that dreaded coarse air we're going to do exactly like we've done over here I'm going to copy and paste these files that we have over here we're going to allow Json information to pass through URL encoded we're going to do just this so this piece of code is going to allow you to send information from the front screen to the back end which would otherwise be blocked if this was not in place so I think that is it I think this is fine as it is so we've created our post so now we need to check it or see if it works using our axial so I'm just going to add the top over here um so I think what we need to do as well is that we need to actually install axios into our project so I'm actually just going to say npm install axios okay and then after xcos are successfully installed we go at the very top and just we oh we can just say axios okay maybe we need to we do need to import it so maybe a refresh our project a bit import axios from axials it now we need to create a function that is named do we need to create a function I think we might have to okay so but before we do that I think we might have to have a couple of states in here that captures all that information that we've described so we need first the email so now pause this video and create these three states that we're going to need so those are the three states that we need to capture so now we need to go to on change over here we just need to say every time this changes then update set email over here I want to see target.valley all right this is fine copy this and do the same thing with the others on the subject as well so instead of set email here it's going to say set subject and do the same for the message as well I'm just going to say set message all right now we can create a function so we create a function I'm going to call it send mail like that first we need to check that those states are not empty recipient email subject email and message make sure everything is in there and then if everything's in there then you get that excels request remember our path is HTTP localhost our Port is running on 5000. oh sorry we're supposed to say Excel stock post it would have been blender and then in here we feed it the body which is the recipient email the subject and a message okay and we make our document function if this is this works incredibly well we can just say console.blog instead of console.log why don't we just say alerts let's just say alert message sent successfully and then on our catch we can just simply say to make it maybe under marked as well and just say oopsie Daisy I don't know if that's how you spell that all right so there's our function and if everything is empty we can just say return alert fill in all the fields to continue all right so that's a function so now we need this to be called every time the user presses the submit button so you can just say on click every time this is clicked I want you to run that send mail function I think that's about it so now we can just like put a test into our thing to see if everything is watched the way that we wanted it to work well before we do that let's just make sure that once this is done we just return present okay that is cool it's nice I'm also noticing that we have not completed our endpoint remember our end point is send email right so let's check so let's just enter an email over here I'm just going to say example one at gmail.com and the subject over here testing email and then email testing message and then if we would like to press send you can see we're getting an error message so let's go to the console to check out our error message uh it's the cross origin error message and I think I know why this is so we need to actually use course so you need to npm install course okay such and then you need to say app.use course in here I didn't think it was going to give me any errors but it did so there we go so this should do now we go back to our email refresh this and example one at gmail.com testing my email hello email all right and then I'm gonna just press send and there it says sending email message sent successfully Okay so we've managed to successfully send in our email so that the error over there was just like it was a coarse error that we were experiencing so I think it is fine now we shouldn't be able to experience that anymore so yeah I think that is pretty much it for today's tutorial uh we were just pretty much creating um this was sending email uh through uh front end to our back end yeah so that's basically it for today's tutorial if you've enjoyed this video please make sure that you have liked if you haven't subscribed subscribe to my channel you have any comments that this is a very tricky project for you I do offer one-on-one tutorials um and so maybe we can just get started with this project and I can show you how it's done and we can convene from there so make sure you just uh yeah just uh go through one of my videos I think I have I left my contacts there and just check them out and you can just like yeah we can convene from there other than that thank you so much for watching I will see you next time on coding101

Channel: Koding 101

Views: 17,617

Keywords:

Id: bvgPd14klGg

Length: 28min 59sec (1739 seconds)

Published: Mon Nov 28 2022