1
00:00:00,180 --> 00:00:06,100
In this lesson and we're gonna kick off this section on email sending by well sending an email from

2
00:00:06,100 --> 00:00:06,600
a..

3
00:00:06,630 --> 00:00:10,490
J ust the first thing we're gonna do is explore these service.

4
00:00:10,500 --> 00:00:11,700
We'll be using.

5
00:00:11,700 --> 00:00:16,950
And then from there we will actually write a little bit of code to send our very first e-mail from our

6
00:00:16,950 --> 00:00:18,630
node application.

7
00:00:18,630 --> 00:00:24,690
And then throughout the section we'll actually set up emails that get sent as users do things like create

8
00:00:24,690 --> 00:00:27,110
their account and delete their account.

9
00:00:27,210 --> 00:00:33,260
But for the moment let's just see what it takes in terms of code and modules to actually get this done.

10
00:00:33,270 --> 00:00:39,340
Now when it comes to picking a service for sending emails you have plenty of options available to you.

11
00:00:39,390 --> 00:00:43,590
And the one that we're gonna be using in this course is called Send grid.

12
00:00:43,590 --> 00:00:49,830
We can find it by heading over to send grid dot com inside of the browser and we're gonna have to create

13
00:00:49,830 --> 00:00:55,370
an account and set it up before we'll be able to send emails from node j s.

14
00:00:55,500 --> 00:01:00,930
Now one of the reasons I'm picking send grid is that there is a nice free tier so you can get started

15
00:01:00,930 --> 00:01:04,810
integrating email into your app before you ever need to pay.

16
00:01:04,830 --> 00:01:12,120
And it also doesn't require you to have a custom domain to setup other email services typically do even

17
00:01:12,120 --> 00:01:14,130
to just test things out.

18
00:01:14,130 --> 00:01:19,110
So with send grid we'll be able to start completely for free and there's no need to provide anything

19
00:01:19,110 --> 00:01:20,130
like a credit card.

20
00:01:20,640 --> 00:01:25,020
So if we head over to their pricing page real quick we can take a look at the plan that we'll be using

21
00:01:25,020 --> 00:01:26,010
for the class.

22
00:01:26,070 --> 00:01:27,570
It is the free plan.

23
00:01:27,630 --> 00:01:32,950
We get 40000 emails for the first 30 days as a sort of trial period.

24
00:01:33,030 --> 00:01:36,450
Then we can send 100 a day thereafter forever.

25
00:01:36,450 --> 00:01:43,110
Now that might be OK for a real application but it seems unlikely if you were creating a real application

26
00:01:43,110 --> 00:01:48,690
and you were charging your customers you would probably upgrade to this other plan for 15 bucks a month

27
00:01:48,990 --> 00:01:54,150
where you could send a hundred thousand emails a month and that should be more than enough as you're

28
00:01:54,150 --> 00:01:55,270
getting started.

29
00:01:55,320 --> 00:02:00,970
So once again the free plan is going to allow us to send emails from no J.S. forever.

30
00:02:01,050 --> 00:02:04,680
There's just a restriction after a certain point in time.

31
00:02:04,770 --> 00:02:09,780
Let's go ahead and actually create an account down below on the pricing page we've selected that free

32
00:02:09,780 --> 00:02:10,310
option.

33
00:02:10,320 --> 00:02:12,850
And down here we have a try for free.

34
00:02:12,990 --> 00:02:18,810
We're going to sign up for an account send grid is going to give us an API key and we'll be able to

35
00:02:18,810 --> 00:02:22,650
use that from no J.S. to actually send those emails.

36
00:02:22,680 --> 00:02:26,960
The setup process here can be a bit confusing at first solo work through it together.

37
00:02:26,970 --> 00:02:30,300
We'll pick a user name down below a password

38
00:02:33,660 --> 00:02:36,090
and we'll do the same thing down below for confirming

39
00:02:39,150 --> 00:02:41,520
and then finally an email address.

40
00:02:41,520 --> 00:02:45,480
Now from there we just confirm we're not a robot and agreed to those terms of service.

41
00:02:45,480 --> 00:02:52,330
There's no need to have a custom domain or provide a credit card or anything like that right here we

42
00:02:52,330 --> 00:02:56,680
have to provide just a little more information which I'll take a quick moment to go through

43
00:03:00,280 --> 00:03:01,180
and for the Web site.

44
00:03:01,180 --> 00:03:07,540
You can just say something like no cite yet down below you can just say you're the owner of your non-existent

45
00:03:07,540 --> 00:03:08,440
company.

46
00:03:08,440 --> 00:03:11,200
And then we just need to pick how many e-mails we plan to send.

47
00:03:11,200 --> 00:03:14,170
We'll just do zero to one hundred thousand.

48
00:03:14,170 --> 00:03:15,460
Next up how many employees.

49
00:03:15,460 --> 00:03:16,950
Well obviously just us.

50
00:03:16,960 --> 00:03:22,450
And then we can get started now from here it's offering up some suggestions as to how we can get started

51
00:03:22,450 --> 00:03:23,920
with these service down below.

52
00:03:23,920 --> 00:03:27,120
There are a few different ways we can send our first e-mail.

53
00:03:27,160 --> 00:03:29,470
We can send it using their API.

54
00:03:29,470 --> 00:03:35,310
We can integrate with popular applications like WordPress or we can build and send marketing campaigns

55
00:03:35,320 --> 00:03:39,980
if we were creating an email list for our service maybe before it launches.

56
00:03:40,090 --> 00:03:45,520
In this case to send one off emails from no Jay S. We want to use their web API.

57
00:03:45,550 --> 00:03:47,910
So right here I'll click Start.

58
00:03:47,950 --> 00:03:51,530
Now we have a web API and an S MTBE relay.

59
00:03:51,580 --> 00:03:57,970
We'll be using their Web API because that's going to allow us to take advantage of these send grid NPM

60
00:03:57,970 --> 00:04:00,920
module which we can use to send emails.

61
00:04:01,000 --> 00:04:06,730
So down below I'm going to pick choose and from here it's going to walk us through a little wizard allowing

62
00:04:06,730 --> 00:04:08,090
us to get set up.

63
00:04:08,110 --> 00:04:14,080
We're going to integrate with node j as the first option available and then to make sure things are

64
00:04:14,080 --> 00:04:15,300
actually working.

65
00:04:15,370 --> 00:04:22,270
It's going to walk us through a what five step process to getting these send a grid service integrated

66
00:04:22,330 --> 00:04:26,740
into the node app and we're actually going to work through this in Visual Studio code.

67
00:04:26,740 --> 00:04:30,910
Well let's go ahead and work through this together the first step is to make sure we have node.

68
00:04:30,910 --> 00:04:32,160
That's an easy one.

69
00:04:32,170 --> 00:04:35,050
The next one is to create an API key.

70
00:04:35,080 --> 00:04:40,450
So this is something we're going to provide in node j s when we send the e-mail mail and that will allow

71
00:04:40,450 --> 00:04:46,820
send grid to associate the email we're sending with our account and we have to provide an API key.

72
00:04:46,840 --> 00:04:53,330
You can't use send grid anonymously so down below we can pick a name for our first API key.

73
00:04:53,350 --> 00:04:59,230
I'll go ahead and use something like task app or task manager app or anything that makes sense for you

74
00:04:59,800 --> 00:05:03,400
right here we'll go ahead and create that key and down below.

75
00:05:03,400 --> 00:05:05,920
It's going to show the key to us.

76
00:05:05,920 --> 00:05:11,680
We want to take a moment to copy that to the clipboard as we're going to need it from inside of node

77
00:05:11,740 --> 00:05:15,980
j s now to get started over in Visual Studio code.

78
00:05:16,000 --> 00:05:19,400
We're going to create a new directory in the source folder.

79
00:05:19,480 --> 00:05:22,050
And we're also going to create a new file.

80
00:05:22,240 --> 00:05:27,310
So for the moment we can actually collapse all of the other directories in the source folder and we

81
00:05:27,310 --> 00:05:29,480
can close all of the open EDS.

82
00:05:29,500 --> 00:05:32,230
We're going to start with just a single file.

83
00:05:32,320 --> 00:05:39,300
So right here in source we'll create a new folder I'm going to call this e mails and inside of the e

84
00:05:39,310 --> 00:05:46,870
mails folder we'll create a single file which I'll call account dot J S so this will be the file that

85
00:05:46,870 --> 00:05:51,700
contains all of the code for sending e-mails related to use your accounts.

86
00:05:51,700 --> 00:05:55,010
So for things like signing up or deleting your account.

87
00:05:55,150 --> 00:05:58,370
Now for the moment we're not going to worry about actually doing that.

88
00:05:58,420 --> 00:06:02,280
We're just going to add a little code that sends a test e-mail.

89
00:06:02,290 --> 00:06:06,480
Let's get started by just creating a variable to store that API key.

90
00:06:06,490 --> 00:06:09,520
So right here a constant I can call it send.

91
00:06:09,550 --> 00:06:15,070
Grid API key and we'll just set it equal to a string and write inside.

92
00:06:15,070 --> 00:06:19,900
We'll paste the API key that was generated for us now from here.

93
00:06:19,900 --> 00:06:25,900
We want to go ahead and actually install the NPM module for seven grid as we can use its methods to

94
00:06:25,900 --> 00:06:27,250
send emails.

95
00:06:27,400 --> 00:06:32,420
Now over inside of the instructions in the browser they're essentially doing the exact same thing.

96
00:06:32,440 --> 00:06:35,800
They're walking you through the necessary steps to get all of this done.

97
00:06:35,920 --> 00:06:38,680
Though we'll do this as part of the video.

98
00:06:38,710 --> 00:06:44,950
Now the only major difference is step number three they're creating what's known as an environment variable

99
00:06:45,130 --> 00:06:46,930
to store the API key.

100
00:06:46,960 --> 00:06:50,400
Don't worry we're going to get to this in about three videos.

101
00:06:50,470 --> 00:06:55,600
We'll learn how to get this out of our code so it never winds up on something like get hub.

102
00:06:55,600 --> 00:06:58,870
But for now it's perfectly fine to leave it where it is.

103
00:06:58,870 --> 00:07:00,400
We'll address that shortly.

104
00:07:00,940 --> 00:07:07,390
So over inside a visual studio code we want to take a quick moment to install these seven grid NPM module

105
00:07:07,630 --> 00:07:10,700
so we can actually use it to send emails.

106
00:07:10,780 --> 00:07:17,440
So down below what we're going to do is use clear to clear the output and we'll be using NPM AI with

107
00:07:17,440 --> 00:07:26,080
the following the module name is at send grid forward slash mail and the latest version that is apt

108
00:07:26,110 --> 00:07:26,650
right here.

109
00:07:26,650 --> 00:07:29,110
Six point three point one.

110
00:07:29,140 --> 00:07:31,290
So let's take a quick moment to install that.

111
00:07:31,300 --> 00:07:35,920
And up above online one of account dot J S we'll be requiring it.

112
00:07:36,040 --> 00:07:42,920
So const s g mail which is the common variable name you'll see in the send grid documentation.

113
00:07:43,060 --> 00:07:51,430
Its value comes from using require with that module send a grid forward slash mail and on s g mail which

114
00:07:51,430 --> 00:07:53,190
is an object itself.

115
00:07:53,230 --> 00:07:56,330
We have methods for actually sending emails.

116
00:07:56,440 --> 00:08:01,870
Now before we can send an email we have to let these send grid mods you will know we want to work with

117
00:08:01,870 --> 00:08:07,720
this API key and that's what's going to make sure that things work as expected we can do that using

118
00:08:07,750 --> 00:08:17,980
s g mail dot set API key and we pass to this our API key which I have stored in my variable up above

119
00:08:18,220 --> 00:08:21,120
that's sent grid API key.

120
00:08:21,160 --> 00:08:22,270
Perfect.

121
00:08:22,360 --> 00:08:28,330
Now that we have the API key set up when we send an email send grid will know it's associated with our

122
00:08:28,330 --> 00:08:34,750
account and down below we do that using s g mail dot send.

123
00:08:34,780 --> 00:08:39,690
This allows us to send an individual email and we pass to it an object.

124
00:08:39,700 --> 00:08:47,230
And on this object we specify everything about the email who it's to who it's from the subject of the

125
00:08:47,250 --> 00:08:50,680
email and the actual text content right here.

126
00:08:50,680 --> 00:08:53,040
Let's go ahead and specify that information.

127
00:08:53,080 --> 00:08:55,390
So too I'll send it to myself.

128
00:08:55,450 --> 00:08:57,360
Andrew at Meade dot I.

129
00:08:57,430 --> 00:08:59,980
Oh and I'll send it from that same account

130
00:09:03,310 --> 00:09:11,450
next up we have the subject line for the email and I'll go ahead and say This is my first creation and

131
00:09:11,450 --> 00:09:14,530
then below that we have the text for the email.

132
00:09:14,600 --> 00:09:22,040
So the text is going to be something along the lines of let's just say I hope this one actually gets

133
00:09:22,310 --> 00:09:23,150
to you.

134
00:09:23,150 --> 00:09:24,170
Perfect.

135
00:09:24,170 --> 00:09:31,130
Now in addition we can provide an h t AML property to set up a styled H T and L email if we wanted to

136
00:09:31,250 --> 00:09:35,580
but we're not going to worry about that we'll just stick with basic text for the moment.

137
00:09:35,600 --> 00:09:43,230
Now we can save account not J S and to actually send this email off all we need to do is run this script.

138
00:09:43,250 --> 00:09:48,170
This is Andrew from the future with an important update since this lesson was originally added to the

139
00:09:48,170 --> 00:09:53,000
class send grid has updated requiring an additional level of verification.

140
00:09:53,000 --> 00:09:54,670
Now this might seem like overkill.

141
00:09:54,710 --> 00:09:59,750
We've already done quite a bit of verification and it seems like overkill for a service that simply

142
00:09:59,750 --> 00:10:06,830
sending emails well sending emails is very much a reputation based game which is why so much verification

143
00:10:06,830 --> 00:10:07,920
is required.

144
00:10:07,940 --> 00:10:14,000
You might think if I send an email to some email address that receiver should get the email but that's

145
00:10:14,000 --> 00:10:15,430
simply not the case.

146
00:10:15,440 --> 00:10:21,320
The reputation of the sender plays an important role in whether or not the email service will treat

147
00:10:21,320 --> 00:10:22,650
that as spam.

148
00:10:22,670 --> 00:10:28,610
So long story short if a bunch of people send spam from their send grid accounts that makes seven grid

149
00:10:28,640 --> 00:10:35,390
look bad legitimate send grid users who are sending legitimate emails won't have their emails sent successfully

150
00:10:35,630 --> 00:10:39,970
gmail will see that send grid is spam and it'll start blocking everything.

151
00:10:40,070 --> 00:10:42,750
So that's why so much of verification is needed now.

152
00:10:42,770 --> 00:10:44,800
We're not using send grid for spam.

153
00:10:44,900 --> 00:10:50,370
We're using it to send a transactional emails to users who interacted with our applications.

154
00:10:50,450 --> 00:10:51,630
So we're good to go.

155
00:10:51,650 --> 00:10:57,050
We just need to go through this additional verification you can do that by scrolling down in the sidebar

156
00:10:57,080 --> 00:10:58,760
and opening up settings.

157
00:10:58,760 --> 00:11:02,730
From there you can open up something called sender authentication.

158
00:11:02,750 --> 00:11:05,650
Now if you click on that you'll see what I see here.

159
00:11:05,690 --> 00:11:08,090
Now I'm seeing two different ways to get started.

160
00:11:08,180 --> 00:11:09,360
You should see three.

161
00:11:09,440 --> 00:11:15,380
So I have authenticate your domain and brand your links right in between you should see a way to get

162
00:11:15,380 --> 00:11:19,150
started with something called single sender verification.

163
00:11:19,190 --> 00:11:24,680
So I'm not seeing that option just because my send grid account was created before that rule was put

164
00:11:24,680 --> 00:11:25,550
into place.

165
00:11:25,580 --> 00:11:30,020
You should be seeing that option right there and you'll want to click get started.

166
00:11:30,020 --> 00:11:32,520
Now if you're not seeing that option that's OK.

167
00:11:32,600 --> 00:11:34,590
You can pull up that page directly.

168
00:11:34,640 --> 00:11:40,610
So right here in a second tab I've manually pulled up that page you can find it an app that send grid

169
00:11:40,610 --> 00:11:47,240
dot com forward slash settings forward slash sender underscore off forward slash senders.

170
00:11:47,240 --> 00:11:51,170
Now from here all you need to do is create a new sender down below.

171
00:11:51,170 --> 00:11:56,720
So right here we can click Create new sender and it's just asking for some information information that

172
00:11:56,720 --> 00:12:00,100
we already provided when we first created our account.

173
00:12:00,110 --> 00:12:02,430
So down below it's some basic information.

174
00:12:02,480 --> 00:12:08,630
But what I'd like to point out is the from email address and the reply to email address.

175
00:12:08,630 --> 00:12:15,350
So when our code we call the mail method provided by Sen. Grant we pass to it an object and we've provided

176
00:12:15,350 --> 00:12:16,670
those four properties.

177
00:12:16,670 --> 00:12:23,810
We have two from text and subject the from value that you are using is where the email is getting sent

178
00:12:23,810 --> 00:12:24,470
from.

179
00:12:24,470 --> 00:12:30,510
You need to use that same value for the from email address and for reply to down below.

180
00:12:30,770 --> 00:12:37,160
So make sure that these two fields match up with the Frome property you've set up in your source code.

181
00:12:37,160 --> 00:12:42,080
So you'll go through the process of filling out this form down below you'll click Create.

182
00:12:42,080 --> 00:12:45,000
And this is going to send an email to that account.

183
00:12:45,050 --> 00:12:51,140
You'll just need to click the link inside of there to finish the single sender verification process.

184
00:12:51,170 --> 00:12:56,720
Once you have that done it should be showing up right here and then you'll be ready to continue on with

185
00:12:56,720 --> 00:12:57,890
the regular lesson.

186
00:12:58,220 --> 00:13:04,280
So sorry about these changes the send grid service and other email providers they're always adding additional

187
00:13:04,280 --> 00:13:09,740
layers of verification to stay on top of spam and keep their reputation pristine.

188
00:13:09,770 --> 00:13:15,210
But once you work through that process you should be able to continue on with the regular video.

189
00:13:15,230 --> 00:13:22,520
So let's go ahead and jump right back in so down below in the terminal what I'm going to do is use node

190
00:13:23,090 --> 00:13:31,730
then source forward slash emails forward slash account dot J asked to send the e mail off right here

191
00:13:32,000 --> 00:13:33,010
I run the script.

192
00:13:33,110 --> 00:13:39,590
The script seems to work successfully and now we can go ahead and see if it actually worked via two

193
00:13:39,590 --> 00:13:40,100
ways.

194
00:13:40,100 --> 00:13:46,730
One we can use these send grid interface and two we can go ahead and actually open up our email accounts

195
00:13:47,210 --> 00:13:52,790
so down below as you work through this little tutorial it eventually gets to the point where it asks

196
00:13:52,820 --> 00:13:58,280
if you've sent a test email and it's going to verify that it actually went through that you were able

197
00:13:58,280 --> 00:14:01,190
to correctly send the email with your account.

198
00:14:01,190 --> 00:14:05,480
Go ahead and try to go through the verification process right here.

199
00:14:05,480 --> 00:14:10,430
I am going to make sure that it actually did work and we can see that it did work.

200
00:14:10,430 --> 00:14:18,200
So the email that we sent from no J.S. was received by the send grid server and sent off to the g mail

201
00:14:18,200 --> 00:14:21,260
server which is where my email is hosted.

202
00:14:21,290 --> 00:14:24,050
Now I'll go ahead and take a quick moment to pull that up.

203
00:14:24,200 --> 00:14:29,080
So I'm going to open my email account right here.

204
00:14:29,100 --> 00:14:34,170
It should be loading up in just a second and I would expect a couple of emails inside of there.

205
00:14:34,170 --> 00:14:40,260
I have a couple greeting me to the send grid platform and then I have this email which I sent to myself

206
00:14:40,290 --> 00:14:41,040
right here.

207
00:14:41,110 --> 00:14:42,270
The subject line.

208
00:14:42,270 --> 00:14:44,040
This is my first creation.

209
00:14:44,160 --> 00:14:47,670
And if I crack it open I have the correct text as well.

210
00:14:47,670 --> 00:14:50,680
Now this email might not have made it to your inbox.

211
00:14:50,700 --> 00:14:56,100
It might have made its way to your spam folder and you'll also see this right here.

212
00:14:56,100 --> 00:15:01,130
A really big warning letting you know that this email might be spam.

213
00:15:01,140 --> 00:15:05,850
Now if you read the error message here it says this may be a spoofed message.

214
00:15:05,880 --> 00:15:11,730
This message claims to have been sent from your account but Andrew Meade mail couldn't verify the actual

215
00:15:11,730 --> 00:15:14,240
source and G mails right.

216
00:15:14,280 --> 00:15:16,800
I just typed two addresses over here.

217
00:15:16,800 --> 00:15:23,460
Now two should be able to be anyone but from should have to be an account that I actually own.

218
00:15:23,460 --> 00:15:30,300
Now I do own that account but Gmail does not know that I was the one to actually call the send method

219
00:15:30,330 --> 00:15:35,610
in node j s now to address this and to get send grid working reliably.

220
00:15:35,670 --> 00:15:41,820
All you have to do is verify your email they sent you a welcome email to confirm your email address

221
00:15:42,210 --> 00:15:47,370
and the next step would be to have a real domain you link with your account.

222
00:15:47,400 --> 00:15:50,680
So if I'm creating an application I would buy a domain.

223
00:15:50,700 --> 00:15:52,580
I actually do own Meade Dot.

224
00:15:52,630 --> 00:15:59,100
I oh I would link that with my send grid account and that would make sure that other services like Yahoo

225
00:15:59,100 --> 00:16:06,600
Mail outlook Gmail and others know that I actually have rights to send emails from addresses ending

226
00:16:06,600 --> 00:16:07,960
in at Meade Dot.

227
00:16:08,020 --> 00:16:10,980
Oh and we would no longer see those warnings.

228
00:16:11,040 --> 00:16:17,190
You can learn how to link your custom domain to send grid in the documentation though buying a domain

229
00:16:17,190 --> 00:16:19,530
is not a requirement for this course.

230
00:16:19,650 --> 00:16:25,170
We'll still be able to send all of the emails necessary but for the moment they will have that warning.

231
00:16:25,170 --> 00:16:30,840
Once you actually purchase a domain and link it once you're creating a real professional application

232
00:16:30,840 --> 00:16:37,250
you plan on publishing all that will go away and you'll have a nice reliable email solution.

233
00:16:37,260 --> 00:16:42,720
So now we have our first email sent and you should be seeing it whether it's in your inbox or your spam

234
00:16:42,750 --> 00:16:43,570
folder.

235
00:16:43,680 --> 00:16:48,270
And we were able to verify that everything with send grid worked as well.

236
00:16:48,270 --> 00:16:54,120
In the next lesson we're going to start to send emails and based off of the user's interaction with

237
00:16:54,120 --> 00:16:55,240
our application.

238
00:16:55,470 --> 00:16:56,760
I'm excited to get to that.

239
00:16:56,760 --> 00:16:59,640
So let's go ahead and jump right in to the next one.