Creating the Backend - Part 1 (Sending Emails)

what's up my name is sanjiraj and welcome back to this brand new video in this video we're going to be learning how to send emails using sengrit and node.js we're also going to be using graphql together with apollo server on the backend in order to create the server once you have created that we'll be hosting that onto hiroku and we are also going to be creating a front end to it which is going to be a very basic contact form we'll also be using react and tailpin css in order to create that contact form pretty easily and then we're going to be integrating our graphql server with this and they may not be able to send emails like a usual contact form so that is what we're going to be doing guys is going to be kind of a series video so make sure you get i hope you guys do like this series if you guys have any questions just make sure leave it down in the comments if you guys have any questions as well and also any video ideas just leave it down in the comments guys should be really helpful and leave a like on this video if you like this video also subscribe to my channel if you haven't thank you so much for thousands 500 subscribers guys for all of you guys who have subscribed and let's just get into this video and just start with creating the back end for this okay guys so right now let's go ahead and set up sendgrid install it do all the environmental setups and then let's get started with that so let me open up google chrome so right now i have signed in to sendgrid so basically what you have to do is sign in to cengate and that's pretty much it just sign up for sign up for the free trial and then you can start using the email service so once you sign in or sign up you will be greeted with this dashboard so let's go to the email api section and go to integration guide so we go to integration guys it's gonna load and then we'll be able to set up our our email stuff over here itself so let's create a web api not smtp we'll click on web so they have a bunch of languages that they do support we're going to be using node.js because that is what we're going to be using in order to create the server for us so right now they have given all the instructions to help us uh set up our api so that's what we're doing let's create our api key right now i'll just say test one two three i'll say create key and they will generate uh or what is it api key based on the text that i've given they'll hash it or something they'll give a api key so we should use that in order to access their email api service so they're given the api key let me copy this and we're going to be creating a dot env file where we'll be saving this and using this to send the um send the emails obviously so let's go ahead guys let me go ahead to visual studio code let's initialize an npm project let's say in few minutes have i opened up a folder okay let me open up a folder let's go to desktop and create a new folder saying email sending create it and we'll open that folder up so once it's opened let's open up the terminal let's say npm init dash y which is going to initialize in pm package for us let me expand this we go to package.json all of these stuff other which are very very basic stuff all the scripts are there which we will be changing let's also install nodemon as a dependency package so it's not up on production or the server that we are going to be hosting because we once we make changes to our file we want that to directly reflect on what we are doing with our api so let's install that so that's what nodemon is going to do every time you save your file it's going to kind of refresh the server and create a new server so we have installed nodemon that is done let's also install dot env because we are going to be creating dot env files so we need to use have this package you know to initialize configurate this in order to use it so let's create a new file called so dot env and as we copied the api key let me copy that again let's copy the key let's paste it and that should be equals to this api key let me go ahead and paste it right here uh yeah so right now the api key is all set up in the environment let's open up a new file called index.js where we will be initializing our server using graphql or polar server basically and then we're going to be creating a mutation in order to send emails you should you could easily do this using node.js but just in case you're using graphql for your project uh we might want to use this uh you use this way of doing it but then you are doing it using node.js is going to be very similar you just don't use a mutation you have a separate route for it so that's basically what makes it different from you know creating with notches we also in order to implement that we need to install apollo server so let's npm install apollo server so just gonna install that for us okay let's wait okay once that is done let's in import apollo server so let's say const equals to require apollo server up let's import the polar server okay once that is done let me do my mic okay let's create a server right now so con server will be equals to new polo server and apollo server basically needs two things which is going to be type definition and resolvers you could also pass down context which is going to be available for all of the resolvers that we do kind of like all the functions that we create in graphql so let's also create type definitions and resolvers let's say type def dot gs so in order to use type definitions we need to use a specific graphical tag called gql which is going to transfer uh tr basically translate our code into what graphql con can understand so let's import gql there's also separate library in order to import it but you can basically use a polar server for that itself gqueue l and let's say cons type devs will be equal to gql and that's gonna if uh you have to open up template returns and then like write all the queries and mutations let's export this let's also create resolvers once resolvers equals an empty object for now because we don't have any mutations to begin begin writing resolvers so right now everything is uh just initialized and exported so we can just import it and get all this stuff uh the server initialized basically let's also import resolvers and let's put that in here so if you guys are not much familiar with graphql i would recommend you guys watch my previous video which is to create a social media application using graphql node.js and apollo server it's going to be a very in-depth video we're going to be talking about all of this stuff but if you're you want to learn pretty much the basics so this is what you know most of the applications use but you guys can also check out the previous video that we made on the channel so let's put type definitions and resolver we should listen to the server on a port so let's say server.listen and that's gonna be on let's say let's initialize a uh variable called portprocess.env.port if that is not there then we initial uh listen to it on port 4000 let's pass in the variable dot then once the uh uh what is the server is connected it will return a url for us which you can use to console.log let's put an emoji or it says server is running on and let's pass in the url and in case it doesn't uh what is it if it doesn't uh run the server you can also console.log the error here when connecting to server and then we can pass that data in there and also as we install nodemon we can initialize the command for running nodemon for now so once we say npm start npm yeah npm start you wanna run the command nodemon index.js so that's gonna listen for you know changes in all the files so i created our server let's create a type definition for an email so type email should basically have a message which is going to be string and from whoever we got it from the the message who we got it from we're going to be a string and also we need the description which is basically the message we don't need a subject because that's something we're gonna you know hard code it's not something the user is able to you know send so we need the message and from whom it is being sent so if you go to a normal contact form those are the stuff that you might have to you know uh you might have to put in so let's say let's create a mutation which is to send the email we need input this is going to be email input which we will create and then we'll get a response so let's initialize both of them let's create both of them so email input will require the message which is going to be a string and the from which is going to be a string as well we also need response uh response type response is gonna have if it's a success boolean and message string no we'll just have success boolean message string and error um which is also going to be string so in case we have an area error from singlet we're going to throw that there and response is also non-nullable email input is also required type definitions is done let's go to resolvers let's open up this resolvers it's a mutation it's going to be an object let's open up send email and this is basically going to be asynchronous because we're going to be using the singlet api in order to run our send grid uh send to send our email so async which is which passes four parameters the root the arguments and the context we don't need the context but let's just have that and also we don't need the info so we are not going to be having that and right now we need to integrate with the send grade email api um so let's just clear this let's say npm start just just to see if the server is all working so query root type must be provided so we need a basic query here so let's say email if there's an email query to return email so we are not going to be having that and we are not going to be creating a query for that or a resolver for that but let's just have it there just to remove the error so server is running on localhost port 4000 okay so right now let's go to google chrome and install the same grid package which is going to be add send grid slash mail let me open up google chrome open up new terminal npm install okay it's already there npm install save single slash mail okay guys so right now let's go to a resolvers and import send grid mail let's just say grid mail equals require okay require add send grid mail okay so right now we have to set the api key which we put in our uh process uh in our env file so same grade mail dot set api key process dot env dot grid api i guess that is the name that we put singlet api key let me put that and we have to right now here initialize to whom we have to send it from what email we have to send it what is the subject what is the message if there's any html content that we have to send all the stuff so rather than having it in the function that we have to send let's just create an object for it object for all of the like the data that we have sent so let's just call it message which is an object and to to whom we have to send it which we are getting from the input variable from arguments let's just remove this we go to type definitions the input has the property message and from so from whom we are getting uh sorry um so from whom we are getting to and basically we don't need to send it to anyone we just need to send it to our name our own email or just to contact at any company name or their business email so right now let me just send it to my email so the from attribute basically the from need to needs to be the email that is associated with send grid so if your send grid is maybe associated with test email test gmail.com you want to send an email to test123 you have to use test gmail.com for the from for the from you know from word or from whom you have to send you have to put the test email which is because sendgrid has already initialized all the permissions and stuff for your particular email so you have to do that so that is on ratson666 gmail.com and we also have to initialize the subject so the subject is going to be email from contact form okay and the text is going to be input dot so the text we can customize it so let's customize it um let's say email from dot from and let's put message is going to be input dot message which is this text that we're going to be sending to the email and basically that's it you could also have html in it so we could have this text into html uh but you know basically this is very basic and this is this does the job for everyone so let's say s sengrid send gridmail dot dot send and we're gonna pass this message which is to have all the things that same grid requires this returns a promise so let's say dot then want to return sorry guys so we want we have to return it in a specific way which is to have success message and error properties so let's have this so dot then so if it passes success is true success is true message will be equals to successfully send sent email and error is null in that case error is null dot catch we might get an error in case if there is an area error let's pass it here success is false message is null and error will be equal to the error that we get from sin grid so basically right now we do have everything that we need in order to send a send an email through singlet let's go to our server okay everything's running right now let's go to graphql playground and check whether all of these stuff that we have done is working this so let's cut this zoom in let's create a mutation which is to send email and we're going to initialize a variable which is the input which is input because i mean this is not the one that we initialized on on on our code we can put any name for this let us say import it is going to be send email input i guess go to type definitions it's going to be email input open this up send email it accepts input as ad as you know property that it needs send email is gonna return success message and an error so why is there an error here expecting type email import okay it's not nullable okay that's what we need so let's create a query variable open up import and what we need is message is no wait so from should be let's just say raj gmail.com let's hit this cannot return null for non-nullable field mutation okay um okay so what graphql does is it doesn't you know handle promises like dot then and dot catch it needs async await so let's say email await and we can basically use try catch block here instead of this so you need that don't need this and at this point success is false message is null and the error is the error that we're getting from singlet let's go ahead to graphql let's run this unauthorized rothson666 at gmail.com let's go ahead and check if there's any problem let me um say console.log email okay we have not initialized dot env dot nv equals require dot env and let's config that maybe right now it might work okay so we have send the email so previously why didn't work is because we were using uh process dot env inside of resolver but we didn't initialize dot env in our index.js so it wasn't able to go to dot env and get the data so right now that is done let's go ahead to my gmail and check whether we have got this email so i have put it to sanjira dev so it should be to my email let me go ahead and check so if i go ahead right here i can see i have got the emails let me just refresh i've got the email email from raj gmail.com messages test message as you guys can see it's zero minutes ago you can also try sending another message which will make it appear here um okay might take some time i guess [Music] if i go here um yeah this is the second email dot dot basically means the same email is coming again so as you guys can see the email is being actually sent so right now we can go ahead and host this on hiroku they're going to be our next part of this video hope you guys will join us on that part as well if you guys had any questions for this particular section where we created uh the server make sure to leave it down in the comments down below and we'll try to answer them surely we'll answer them and make sure you guys leave a like on this video subscribe to this channel leave a comment if you guys have any and i'll see you in the next video i'll be setting up and hosting this on here

Channel: Shanjai Raj

Views: 146

Keywords: shanjai raj, tutorial, developer, web developer, how to send emails using nodejs, sendgrid nodejs, nodejs and graphql tutorial, how to send emails using sendgrid and nodejs, graphql and apollo tutorial

Id: iUfWrbGMbwo

Length: 23min 27sec (1407 seconds)

Published: Sun Jul 11 2021