1 00:00:00,790 --> 00:00:02,400 ‫With the file upload part 2 00:00:02,400 --> 00:00:03,960 ‫of the section finished, 3 00:00:03,960 --> 00:00:07,300 ‫let's now turn our attention to sending emails. 4 00:00:07,300 --> 00:00:09,610 ‫And we actually already sent email before, 5 00:00:09,610 --> 00:00:13,170 ‫for the password reset, but in the next couple of lectures 6 00:00:13,170 --> 00:00:16,050 ‫we're gonna take that to a whole new level. 7 00:00:16,050 --> 00:00:18,760 ‫And what we're gonna do is to build email templates 8 00:00:18,760 --> 00:00:21,350 ‫with pug and sending real emails 9 00:00:21,350 --> 00:00:23,270 ‫using the SendGrid service. 10 00:00:23,270 --> 00:00:25,220 ‫And now in this first lecture, 11 00:00:25,220 --> 00:00:27,630 ‫we're gonna build a more robust email handler 12 00:00:27,630 --> 00:00:29,313 ‫than the one that we had before. 13 00:00:30,870 --> 00:00:34,030 ‫So, let's open up our utilities folder, 14 00:00:34,030 --> 00:00:38,510 ‫and then in here, remember, we already have an email file. 15 00:00:38,510 --> 00:00:40,100 ‫But right now what we have here 16 00:00:40,100 --> 00:00:43,660 ‫is just a very simple email sending handler, 17 00:00:43,660 --> 00:00:46,810 ‫which is not able to take in a lot of options. 18 00:00:46,810 --> 00:00:48,120 ‫And so now we're going to build 19 00:00:48,120 --> 00:00:50,190 ‫a much more robust solution here. 20 00:00:50,190 --> 00:00:51,450 ‫All right? 21 00:00:51,450 --> 00:00:53,833 ‫So what I'm gonna do is to create a class, 22 00:00:55,360 --> 00:00:57,503 ‫and that class is gonna be called email. 23 00:00:58,750 --> 00:01:01,690 ‫So module.exports, 24 00:01:01,690 --> 00:01:03,950 ‫and so also this class is what we're going 25 00:01:03,950 --> 00:01:07,103 ‫to be exporting from this file. 26 00:01:09,580 --> 00:01:13,340 ‫And then as always, a class needs a constructor function, 27 00:01:13,340 --> 00:01:16,170 ‫which is basically the function that is gonna be running 28 00:01:16,170 --> 00:01:19,300 ‫when a new object is created through this class. 29 00:01:19,300 --> 00:01:20,910 ‫Now let's actually take a look 30 00:01:20,910 --> 00:01:23,393 ‫at how we would use this class in practice. 31 00:01:24,960 --> 00:01:26,770 ‫And so the idea, basically, 32 00:01:26,770 --> 00:01:28,840 ‫whenever we want to send a new email, 33 00:01:28,840 --> 00:01:32,960 ‫is to import this email class and then use it like this. 34 00:01:32,960 --> 00:01:34,713 ‫So creating a new email, 35 00:01:35,970 --> 00:01:38,490 ‫and then into it, we want to paste a user, 36 00:01:38,490 --> 00:01:41,150 ‫and so that user will then contain the email address, 37 00:01:41,150 --> 00:01:44,563 ‫and also the name in case we want to personalize the email. 38 00:01:45,800 --> 00:01:47,580 ‫And also a URL. 39 00:01:47,580 --> 00:01:49,120 ‫And a good example for this one 40 00:01:49,120 --> 00:01:53,200 ‫is for example, the reset URL for resetting the password. 41 00:01:53,200 --> 00:01:54,033 ‫Okay? 42 00:01:54,033 --> 00:01:56,660 ‫So, a new email object, and then on there 43 00:01:56,660 --> 00:01:59,000 ‫we want to call the method that is actually going 44 00:01:59,000 --> 00:02:00,570 ‫to send the email. 45 00:02:00,570 --> 00:02:02,843 ‫So, let's say sendWelcome. 46 00:02:04,180 --> 00:02:07,410 ‫And so that one is gonna be sent 47 00:02:07,410 --> 00:02:10,910 ‫whenever a new user signs up for our application. 48 00:02:10,910 --> 00:02:11,743 ‫All right? 49 00:02:11,743 --> 00:02:14,630 ‫We will then also have send password reset. 50 00:02:14,630 --> 00:02:16,480 ‫And the way we will set all this up 51 00:02:16,480 --> 00:02:18,950 ‫will make it really easy to then keep adding 52 00:02:18,950 --> 00:02:21,490 ‫new and new methods similar to this one 53 00:02:21,490 --> 00:02:24,450 ‫to send different emails for different scenarios. 54 00:02:24,450 --> 00:02:25,370 ‫All right? 55 00:02:25,370 --> 00:02:28,400 ‫Anyway, since we paste the user and the URL 56 00:02:28,400 --> 00:02:31,670 ‫into a new email, well, our constructor then needs 57 00:02:31,670 --> 00:02:33,633 ‫to take these in as arguments. 58 00:02:34,720 --> 00:02:36,560 ‫So user and URL. 59 00:02:36,560 --> 00:02:40,340 ‫And so what happens in this constructor is that this.to 60 00:02:43,020 --> 00:02:47,130 ‫will be equal to the user.email 61 00:02:49,926 --> 00:02:53,210 ‫Then we also want to define the first name of the user, 62 00:02:53,210 --> 00:02:56,433 ‫again in order to basically personalize the email. 63 00:02:59,903 --> 00:03:03,170 ‫And so that's user.name and let's split it 64 00:03:03,170 --> 00:03:08,170 ‫and take only the first element in the resulting array. 65 00:03:09,530 --> 00:03:11,210 ‫So we did this one before, 66 00:03:11,210 --> 00:03:16,210 ‫but then also this.url is equal to the incoming URL. 67 00:03:17,010 --> 00:03:22,010 ‫Finally, let's also set this.from right here. 68 00:03:22,500 --> 00:03:24,450 ‫so basically at the object level. 69 00:03:24,450 --> 00:03:26,970 ‫And so each object created from this class 70 00:03:26,970 --> 00:03:28,830 ‫will then get this property. 71 00:03:28,830 --> 00:03:32,720 ‫And so this one will be similar to what we have here. 72 00:03:32,720 --> 00:03:35,020 ‫So it's basically this from, 73 00:03:35,020 --> 00:03:36,760 ‫so let's just copy it 74 00:03:36,760 --> 00:03:40,230 ‫but it's nice to have it in a one central place like this. 75 00:03:40,230 --> 00:03:42,200 ‫Now one thing that I really want to do, 76 00:03:42,200 --> 00:03:45,090 ‫is to basically define this email address here 77 00:03:45,090 --> 00:03:46,770 ‫as a configuration variable, 78 00:03:46,770 --> 00:03:48,740 ‫and so an environment variable 79 00:03:48,740 --> 00:03:50,440 ‫that we can very easily change 80 00:03:50,440 --> 00:03:54,073 ‫by manipulating the config.env file. 81 00:03:55,774 --> 00:03:56,607 ‫All right? 82 00:03:57,940 --> 00:04:00,100 ‫So let's call this one EMAIL_FROM. 83 00:04:02,490 --> 00:04:06,530 ‫And then we only want the email address itself. 84 00:04:06,530 --> 00:04:07,363 ‫All right? 85 00:04:08,560 --> 00:04:10,840 ‫So another case where it's very helpful 86 00:04:10,840 --> 00:04:12,353 ‫to use environment variables. 87 00:04:13,260 --> 00:04:15,360 ‫And now let's make this a template string. 88 00:04:18,400 --> 00:04:20,840 ‫And of course plug that in here. 89 00:04:20,840 --> 00:04:23,153 ‫So that's process.env.EMAIL_FROM. 90 00:04:28,540 --> 00:04:30,930 ‫Next up, let's create a method here 91 00:04:30,930 --> 00:04:33,230 ‫in order to create the transport. 92 00:04:33,230 --> 00:04:35,563 ‫So similar to what we have here. 93 00:04:37,640 --> 00:04:39,347 ‫So createTransport. 94 00:04:43,450 --> 00:04:46,280 ‫And now here we actually want to have different transports 95 00:04:46,280 --> 00:04:48,890 ‫whether we are in production or not. 96 00:04:48,890 --> 00:04:50,170 ‫So when we're in production, 97 00:04:50,170 --> 00:04:52,470 ‫we actually want to send real emails, 98 00:04:52,470 --> 00:04:55,540 ‫and we will do that a bit later using SendGrid, 99 00:04:55,540 --> 00:04:57,890 ‫but if we are not in production 100 00:04:57,890 --> 00:05:00,730 ‫then we still want to use our Mailtrap application 101 00:05:00,730 --> 00:05:03,270 ‫just like we did it before when we send emails. 102 00:05:03,270 --> 00:05:07,020 ‫So instead of the email going to a real email address, 103 00:05:07,020 --> 00:05:10,730 ‫it will get caught into our Mailtrap inbox so that 104 00:05:10,730 --> 00:05:12,260 ‫we can actually take a look at it 105 00:05:12,260 --> 00:05:13,843 ‫in our development process. 106 00:05:14,950 --> 00:05:18,343 ‫So that transporter will be exactly the same as this one, 107 00:05:19,870 --> 00:05:24,220 ‫so let's just copy it but first let's say 108 00:05:24,220 --> 00:05:25,277 ‫if(process.env.NODE_ENV). 109 00:05:30,360 --> 00:05:32,360 ‫So, remember, that's how we checked 110 00:05:32,360 --> 00:05:34,110 ‫whether we're in production or not. 111 00:05:36,390 --> 00:05:38,230 ‫And so if that is in production, 112 00:05:38,230 --> 00:05:39,620 ‫and so if we're in production, 113 00:05:39,620 --> 00:05:43,830 ‫then we want to create a transporter for SendGrid. 114 00:05:43,830 --> 00:05:45,890 ‫So let's just put that here, 115 00:05:45,890 --> 00:05:47,613 ‫and again we will do that later. 116 00:05:49,170 --> 00:05:51,410 ‫For now let's just return something from here. 117 00:05:51,410 --> 00:05:53,133 ‫Doesn't matter, lets say one. 118 00:05:54,680 --> 00:05:55,513 ‫All right? 119 00:05:56,750 --> 00:05:58,840 ‫And then basically otherwise 120 00:05:58,840 --> 00:06:02,493 ‫we want to return this nodemailer.createTransport. 121 00:06:05,166 --> 00:06:05,999 ‫Okay? 122 00:06:05,999 --> 00:06:06,840 ‫So this Transport here 123 00:06:06,840 --> 00:06:11,293 ‫will basically return a new nodemailer transport like this. 124 00:06:12,280 --> 00:06:14,660 ‫Or, on the other hand when we're in production, 125 00:06:14,660 --> 00:06:17,333 ‫then the one that's going to be here. 126 00:06:18,500 --> 00:06:19,333 ‫Okay? 127 00:06:19,333 --> 00:06:21,020 ‫So let's actually delete it from here. 128 00:06:23,930 --> 00:06:26,773 ‫Also, we want to delete this one. 129 00:06:32,970 --> 00:06:35,480 ‫And now let's create the send method. 130 00:06:35,480 --> 00:06:37,520 ‫And so this is gonna be the method 131 00:06:37,520 --> 00:06:39,610 ‫that will do the actual sending. 132 00:06:39,610 --> 00:06:40,443 ‫Okay? 133 00:06:40,443 --> 00:06:43,650 ‫And this one will receive a template and a subject. 134 00:06:43,650 --> 00:06:45,150 ‫And you will understand a bit better 135 00:06:45,150 --> 00:06:48,003 ‫why that is once this entire class is complete. 136 00:06:49,270 --> 00:06:50,103 ‫Okay? 137 00:06:51,550 --> 00:06:53,513 ‫So template and subject. 138 00:06:56,050 --> 00:06:58,553 ‫So let's put a comment here of what this will do. 139 00:07:01,170 --> 00:07:03,600 ‫And now before we actually write out this function, 140 00:07:03,600 --> 00:07:05,690 ‫let me show you how we're gonna use it, 141 00:07:05,690 --> 00:07:08,753 ‫and so why we need the template and the subject here. 142 00:07:10,890 --> 00:07:12,893 ‫So, remember how we said up here 143 00:07:12,893 --> 00:07:16,890 ‫that we're gonna have one method called sendWelcome, 144 00:07:16,890 --> 00:07:21,890 ‫and also like a method for sending a reset password email. 145 00:07:21,900 --> 00:07:26,353 ‫And so, let's now actually add that here, so sendWelcome. 146 00:07:28,460 --> 00:07:31,430 ‫And this one doesn't receive any argument 147 00:07:31,430 --> 00:07:34,410 ‫and all it really does is to call send 148 00:07:35,470 --> 00:07:37,030 ‫with the template and the subject 149 00:07:37,030 --> 00:07:38,690 ‫that we want for this email. 150 00:07:38,690 --> 00:07:39,523 ‫Okay? 151 00:07:39,523 --> 00:07:41,800 ‫And so again, this makes it really easy 152 00:07:41,800 --> 00:07:43,370 ‫to then create different emails 153 00:07:43,370 --> 00:07:45,480 ‫for all kinds of different situations. 154 00:07:45,480 --> 00:07:46,550 ‫Okay? 155 00:07:46,550 --> 00:07:49,297 ‫So we have this one route send function here 156 00:07:49,297 --> 00:07:51,790 ‫and then all of these more specific ones, 157 00:07:51,790 --> 00:07:55,100 ‫which will then in turn call the router send function 158 00:07:55,100 --> 00:07:57,150 ‫which is doing the actual work. 159 00:07:57,150 --> 00:07:58,500 ‫Okay? 160 00:07:58,500 --> 00:08:01,950 ‫And actually here it is this.send 161 00:08:01,950 --> 00:08:03,970 ‫because of course these methods here, 162 00:08:03,970 --> 00:08:06,600 ‫they are going to be defined on the current object. 163 00:08:06,600 --> 00:08:07,643 ‫And so that's this. 164 00:08:09,530 --> 00:08:12,113 ‫Then here we paste in the template name. 165 00:08:14,280 --> 00:08:16,630 ‫And so this template name that I put here, 166 00:08:16,630 --> 00:08:19,020 ‫will in the future be a pug template 167 00:08:19,020 --> 00:08:20,280 ‫that we're gonna create. 168 00:08:20,280 --> 00:08:22,320 ‫So, actually in the next lecture, 169 00:08:22,320 --> 00:08:24,600 ‫we're gonna be creating this pug template 170 00:08:24,600 --> 00:08:26,523 ‫in order to send this welcome email. 171 00:08:27,710 --> 00:08:28,543 ‫Okay? 172 00:08:28,543 --> 00:08:29,763 ‫And then just the subject line. 173 00:08:31,250 --> 00:08:35,320 ‫Let's say 'Welcome to the Natours Family!' 174 00:08:37,550 --> 00:08:40,920 ‫And so, just like this, we do not need to worry 175 00:08:40,920 --> 00:08:43,210 ‫about any of the implementation details 176 00:08:43,210 --> 00:08:45,260 ‫when we're actually sending the email. 177 00:08:45,260 --> 00:08:47,290 ‫So for example in the point of our code 178 00:08:47,290 --> 00:08:49,510 ‫where we want to send the welcome email 179 00:08:49,510 --> 00:08:51,900 ‫we do not have to worry about template names 180 00:08:51,900 --> 00:08:54,130 ‫or about the subject lines. 181 00:08:54,130 --> 00:08:57,130 ‫All we're gonna do is to say send welcome email 182 00:08:57,130 --> 00:08:58,260 ‫and that's it. 183 00:08:58,260 --> 00:09:00,380 ‫And then our class will take care 184 00:09:00,380 --> 00:09:03,563 ‫of dealing with the implementation. 185 00:09:04,880 --> 00:09:05,780 ‫All right? 186 00:09:05,780 --> 00:09:09,023 ‫Anyway, let's now actually then build this send function. 187 00:09:10,180 --> 00:09:14,560 ‫And so, what we're gonna do in this function, 188 00:09:14,560 --> 00:09:19,560 ‫is to first render the HTML for the email 189 00:09:20,820 --> 00:09:22,663 ‫based on a pug template. 190 00:09:25,650 --> 00:09:27,550 ‫So basically the one that we're pasting 191 00:09:27,550 --> 00:09:29,823 ‫into here with template. 192 00:09:31,750 --> 00:09:34,533 ‫Then, define the email options, 193 00:09:36,570 --> 00:09:40,883 ‫and so that's once more gonna be very similar to this one, 194 00:09:41,750 --> 00:09:43,530 ‫and in fact let me go ahead 195 00:09:43,530 --> 00:09:46,453 ‫and cut it from here and paste it here. 196 00:09:48,130 --> 00:09:49,000 ‫Okay? 197 00:09:49,000 --> 00:09:51,600 ‫Of course it's not going to be exactly the same, 198 00:09:51,600 --> 00:09:53,573 ‫but we will leave that for a bit later. 199 00:09:54,500 --> 00:09:55,333 ‫All right? 200 00:09:55,333 --> 00:09:56,323 ‫And then finally, 201 00:09:58,690 --> 00:10:01,423 ‫Create a transport and send email. 202 00:10:06,930 --> 00:10:07,880 ‫Okay? 203 00:10:07,880 --> 00:10:10,530 ‫And so that's, I'll leave that one for later as well. 204 00:10:13,120 --> 00:10:15,440 ‫So, starting with point number one. 205 00:10:15,440 --> 00:10:18,670 ‫And usually up until this point, we only ever use pug 206 00:10:18,670 --> 00:10:20,160 ‫to create a template, 207 00:10:20,160 --> 00:10:22,370 ‫and then we pass the name of the template 208 00:10:22,370 --> 00:10:24,780 ‫into the render function on the response. 209 00:10:24,780 --> 00:10:25,870 ‫Right. 210 00:10:25,870 --> 00:10:27,820 ‫So we always just used it like this 211 00:10:29,890 --> 00:10:31,723 ‫res.render, 212 00:10:31,723 --> 00:10:33,630 ‫and then here the name of the template. 213 00:10:33,630 --> 00:10:34,810 ‫Right? 214 00:10:34,810 --> 00:10:37,370 ‫And what this render function does behind the scenes 215 00:10:37,370 --> 00:10:41,200 ‫is to basically create the HTML based on the pug template 216 00:10:41,200 --> 00:10:43,450 ‫and then send it to the client. 217 00:10:43,450 --> 00:10:46,840 ‫Now in this case we do not really want to render, 218 00:10:46,840 --> 00:10:50,400 ‫all we want to do is to basically create the HTML 219 00:10:50,400 --> 00:10:53,960 ‫out of the template so that we can then send that HTML 220 00:10:53,960 --> 00:10:55,110 ‫as the email. 221 00:10:55,110 --> 00:10:58,520 ‫So basically defining it here as an HTML option 222 00:10:58,520 --> 00:11:00,070 ‫into these mail options. 223 00:11:00,070 --> 00:11:00,960 ‫Okay? 224 00:11:00,960 --> 00:11:04,900 ‫So, remember how we can specify text and HTML. 225 00:11:04,900 --> 00:11:08,790 ‫And mainly we are interested in sending an HTML email. 226 00:11:08,790 --> 00:11:11,340 ‫And so that's why we're gonna have a pug template 227 00:11:11,340 --> 00:11:13,843 ‫from which we will generate this HTML. 228 00:11:15,130 --> 00:11:16,120 ‫Okay? 229 00:11:16,120 --> 00:11:18,720 ‫So it's not gonna be working like this, 230 00:11:18,720 --> 00:11:20,770 ‫but instead we actually need to require 231 00:11:20,770 --> 00:11:22,173 ‫the pug package here. 232 00:11:24,560 --> 00:11:25,443 ‫So, 233 00:11:27,200 --> 00:11:28,780 ‫pug like this, 234 00:11:28,780 --> 00:11:31,120 ‫and then we need to use 235 00:11:31,120 --> 00:11:32,600 ‫pug.renderFile. 236 00:11:36,890 --> 00:11:37,723 ‫Okay? 237 00:11:37,723 --> 00:11:39,490 ‫And so this will take in the file 238 00:11:39,490 --> 00:11:42,450 ‫and then render the pug code into real HTML. 239 00:11:42,450 --> 00:11:43,283 ‫Okay? 240 00:11:43,283 --> 00:11:48,120 ‫And so that we can then save into a variable HTML. 241 00:11:48,120 --> 00:11:48,953 ‫All right? 242 00:11:49,870 --> 00:11:52,330 ‫So, where is that file? 243 00:11:52,330 --> 00:11:55,173 ‫Well, it is at dirname, 244 00:11:56,460 --> 00:11:58,500 ‫so D-I-R name, 245 00:11:58,500 --> 00:12:00,120 ‫which remember is the location 246 00:12:00,120 --> 00:12:01,960 ‫of the currently running script, 247 00:12:01,960 --> 00:12:05,133 ‫and so that is, right now, at this utilities folder. 248 00:12:06,570 --> 00:12:07,403 ‫Okay? 249 00:12:07,403 --> 00:12:10,223 ‫And so from there we need to move one step up, 250 00:12:12,010 --> 00:12:16,000 ‫then go into views, and from there go into an emails folder 251 00:12:16,860 --> 00:12:18,950 ‫that we're gonna also create in a second. 252 00:12:18,950 --> 00:12:19,783 ‫And then in there 253 00:12:19,783 --> 00:12:22,103 ‫is where we're gonna have the template file. 254 00:12:23,450 --> 00:12:24,283 ‫So 255 00:12:25,340 --> 00:12:28,650 ‫template}.pug. 256 00:12:28,650 --> 00:12:32,340 ‫So for the welcome email, this template 257 00:12:32,340 --> 00:12:34,180 ‫is gonna be called welcome. 258 00:12:34,180 --> 00:12:38,920 ‫And so let's now actually create that here in the views, 259 00:12:38,920 --> 00:12:40,293 ‫create a new folder, 260 00:12:42,910 --> 00:12:45,623 ‫email, and then in there new file, 261 00:12:47,730 --> 00:12:48,677 ‫welcome.pug. 262 00:12:49,784 --> 00:12:50,660 ‫Okay? 263 00:12:50,660 --> 00:12:52,860 ‫And we're not going to really be creating 264 00:12:52,860 --> 00:12:56,130 ‫this template in this video but I just wanted to show you 265 00:12:56,130 --> 00:12:58,320 ‫how all of this is gonna work. 266 00:12:58,320 --> 00:12:59,153 ‫Okay? 267 00:12:59,153 --> 00:13:01,750 ‫So this welcome will be paste here into template 268 00:13:01,750 --> 00:13:06,060 ‫and then it will grab that file from the views folder. 269 00:13:06,060 --> 00:13:06,893 ‫Right? 270 00:13:06,893 --> 00:13:08,710 ‫So, that is the first step. 271 00:13:08,710 --> 00:13:11,043 ‫Next up, let's define the email options. 272 00:13:11,980 --> 00:13:16,980 ‫So, from is now this.from. 273 00:13:17,110 --> 00:13:17,943 ‫Remember? 274 00:13:19,060 --> 00:13:20,183 ‫So right here. 275 00:13:21,820 --> 00:13:23,710 ‫Next up, we have 276 00:13:26,130 --> 00:13:30,200 ‫this.to, and we also have the subject 277 00:13:30,200 --> 00:13:34,230 ‫which is equal to the subject that's coming in right here, 278 00:13:34,230 --> 00:13:37,700 ‫and so, yah, actually we don't even need to define this one 279 00:13:39,550 --> 00:13:41,383 ‫and we have our HTML. 280 00:13:42,590 --> 00:13:45,670 ‫So like this, or of course, 281 00:13:45,670 --> 00:13:49,213 ‫that is not even necessary because it's the same name. 282 00:13:51,760 --> 00:13:55,427 ‫Now, next up, we also want to include a text version of 283 00:13:55,427 --> 00:13:57,960 ‫our email into the email. 284 00:13:57,960 --> 00:13:58,793 ‫Okay? 285 00:13:58,793 --> 00:14:01,750 ‫And that's actually really important because it's better 286 00:14:01,750 --> 00:14:05,560 ‫for email delivery rates and also for spam folders. 287 00:14:05,560 --> 00:14:06,670 ‫All right? 288 00:14:06,670 --> 00:14:11,130 ‫And also some people just prefer plain simple text emails 289 00:14:11,130 --> 00:14:14,970 ‫instead of having the more formatted HTML emails. 290 00:14:14,970 --> 00:14:15,900 ‫All right? 291 00:14:15,900 --> 00:14:18,830 ‫And so basically, we need a way of converting 292 00:14:18,830 --> 00:14:21,560 ‫all the HTML to simple text. 293 00:14:21,560 --> 00:14:25,760 ‫So stripping out all of the HTML leaving only the content. 294 00:14:25,760 --> 00:14:27,980 ‫And for doing that, we are going to install 295 00:14:27,980 --> 00:14:29,193 ‫yet another package, 296 00:14:31,640 --> 00:14:36,640 ‫and so this one is called html-to-text. 297 00:14:40,640 --> 00:14:41,810 ‫All right? 298 00:14:41,810 --> 00:14:43,133 ‫Let's include that here, 299 00:14:46,161 --> 00:14:46,994 ‫ToText. 300 00:14:50,520 --> 00:14:54,103 ‫require('html-to-text'), like this. 301 00:14:56,150 --> 00:14:57,560 ‫Okay? 302 00:14:57,560 --> 00:15:00,973 ‫Now let's use that to convert our HTML. 303 00:15:03,260 --> 00:15:07,080 ‫So we use htmlToText.fromString 304 00:15:09,877 --> 00:15:12,340 ‫and then that string is stored in HTML. 305 00:15:13,300 --> 00:15:14,133 ‫Right? 306 00:15:15,620 --> 00:15:18,230 ‫So, these are our mail options, 307 00:15:18,230 --> 00:15:21,160 ‫And actually I forgot something very, very important, 308 00:15:21,160 --> 00:15:24,130 ‫here in this first step, so in this render file, 309 00:15:24,130 --> 00:15:27,200 ‫because just like with response.render, 310 00:15:27,200 --> 00:15:30,010 ‫we can also paste data into render file. 311 00:15:30,010 --> 00:15:32,160 ‫And of course, that is very important 312 00:15:32,160 --> 00:15:35,390 ‫if we want to actually do or email personalization 313 00:15:35,390 --> 00:15:38,283 ‫with the name and also paste in the URL. 314 00:15:39,580 --> 00:15:42,590 ‫And so let's do it just like we did normally 315 00:15:42,590 --> 00:15:44,053 ‫in the render function. 316 00:15:46,290 --> 00:15:51,290 ‫So that's firstName, send it to this.firstName, 317 00:15:53,733 --> 00:15:58,733 ‫and the URL is this.url, 318 00:15:58,910 --> 00:16:01,300 ‫and also let's paste in the subject 319 00:16:02,260 --> 00:16:04,623 ‫and you will see a bit later why we need that. 320 00:16:06,690 --> 00:16:08,300 ‫Okay? 321 00:16:08,300 --> 00:16:11,210 ‫So, now let's finally create a transport 322 00:16:11,210 --> 00:16:13,680 ‫using our create transport function, 323 00:16:13,680 --> 00:16:15,940 ‫and then send the email. 324 00:16:15,940 --> 00:16:20,867 ‫So, fair enough, that's this.createTransport. 325 00:16:23,670 --> 00:16:28,670 ‫So, remember that this is just this method here, this one, 326 00:16:29,200 --> 00:16:30,960 ‫and it has the exact same name 327 00:16:30,960 --> 00:16:33,980 ‫as this function here coming from nodemailer. 328 00:16:33,980 --> 00:16:35,450 ‫So that's a bit confusing, 329 00:16:35,450 --> 00:16:38,583 ‫so let's call it newTransport here. 330 00:16:40,380 --> 00:16:43,847 ‫Okay, and so here that's also newTransport, 331 00:16:45,370 --> 00:16:47,520 ‫so that it's a bit less confusing. 332 00:16:47,520 --> 00:16:48,500 ‫All right? 333 00:16:48,500 --> 00:16:50,783 ‫Now let's remember how we did it here before. 334 00:16:51,620 --> 00:16:53,330 ‫So we had our transporter, 335 00:16:53,330 --> 00:16:55,700 ‫which we created separately in this case, 336 00:16:55,700 --> 00:17:00,360 ‫and then onto that we chained sendMail with the options. 337 00:17:00,360 --> 00:17:04,373 ‫So let's just grab that here, delete all the remaining code. 338 00:17:07,220 --> 00:17:09,320 ‫So basically put that here as a reference. 339 00:17:10,280 --> 00:17:11,130 ‫Okay? 340 00:17:11,130 --> 00:17:13,123 ‫So this transporter is now this. 341 00:17:16,470 --> 00:17:17,700 ‫All right? 342 00:17:17,700 --> 00:17:21,170 ‫And so then on to that, we chain send email 343 00:17:21,170 --> 00:17:23,993 ‫and then with the mail options that we defined up here. 344 00:17:25,010 --> 00:17:27,040 ‫Then, we need to await all of this, 345 00:17:27,040 --> 00:17:30,220 ‫because, of course, it's an asynchronous function. 346 00:17:30,220 --> 00:17:33,043 ‫And so let's now mark this one here as async. 347 00:17:34,880 --> 00:17:35,730 ‫Okay? 348 00:17:35,730 --> 00:17:40,083 ‫And so now, we also need to await the function here. 349 00:17:41,490 --> 00:17:42,323 ‫All right? 350 00:17:42,323 --> 00:17:46,120 ‫Because this.send is now indeed an async function. 351 00:17:46,120 --> 00:17:49,800 ‫And so here we await that so that this function only returns 352 00:17:49,800 --> 00:17:52,000 ‫as soon as the email has actually been sent. 353 00:17:53,120 --> 00:17:56,533 ‫And so, of course, mark this one as async as well. 354 00:17:58,130 --> 00:17:59,380 ‫Awesome. 355 00:17:59,380 --> 00:18:02,920 ‫That's actually it for this class. 356 00:18:02,920 --> 00:18:05,523 ‫So we no longer need this example. 357 00:18:06,450 --> 00:18:07,283 ‫Okay? 358 00:18:07,283 --> 00:18:09,740 ‫And so in the next video, we will then actually go ahead 359 00:18:09,740 --> 00:18:13,570 ‫and use this new class in order to send a welcome email. 360 00:18:13,570 --> 00:18:16,570 ‫So, just very quickly recap what we did here. 361 00:18:16,570 --> 00:18:18,600 ‫So we created a new email class 362 00:18:18,600 --> 00:18:20,730 ‫from which we can create email objects 363 00:18:20,730 --> 00:18:23,610 ‫that we can then use to send actual emails. 364 00:18:23,610 --> 00:18:28,010 ‫And to create a new email object, we will paste in the user 365 00:18:28,010 --> 00:18:31,330 ‫and also a URL that we want to be in that email. 366 00:18:31,330 --> 00:18:35,160 ‫So then here we assign all that stuff to the current object, 367 00:18:35,160 --> 00:18:37,940 ‫and also some other settings that we want to have available, 368 00:18:37,940 --> 00:18:41,890 ‫such as the first name and the sender email. 369 00:18:41,890 --> 00:18:44,000 ‫So basically to abstract this information 370 00:18:44,000 --> 00:18:45,990 ‫away from the send function, 371 00:18:45,990 --> 00:18:48,550 ‫and to have it all in one central place. 372 00:18:48,550 --> 00:18:51,360 ‫Then we have here a new transport function 373 00:18:51,360 --> 00:18:54,290 ‫which makes it really easy to create different transports 374 00:18:54,290 --> 00:18:55,940 ‫for different environments. 375 00:18:55,940 --> 00:18:58,500 ‫And so once more, abstracting that logic 376 00:18:58,500 --> 00:19:00,770 ‫away from the actual send function 377 00:19:00,770 --> 00:19:04,093 ‫which should only be concerned about sending the email. 378 00:19:05,120 --> 00:19:05,953 ‫Okay? 379 00:19:05,953 --> 00:19:09,500 ‫So then here is that send function which takes in a template 380 00:19:09,500 --> 00:19:14,240 ‫and a subject, and based on that it creates the HTML 381 00:19:14,240 --> 00:19:17,370 ‫from a pug template which will then be set 382 00:19:17,370 --> 00:19:19,830 ‫into the email options, which will, 383 00:19:19,830 --> 00:19:23,150 ‫at the end of the function, then finally be sent 384 00:19:23,150 --> 00:19:24,470 ‫in this line of code. 385 00:19:24,470 --> 00:19:25,390 ‫Okay? 386 00:19:25,390 --> 00:19:27,880 ‫But it's not going to be this send function 387 00:19:27,880 --> 00:19:29,950 ‫that we will use in our code. 388 00:19:29,950 --> 00:19:31,840 ‫So instead, we're going to be creating 389 00:19:31,840 --> 00:19:34,183 ‫one different function for each type of email 390 00:19:34,183 --> 00:19:35,417 ‫that we want to send. 391 00:19:35,417 --> 00:19:39,380 ‫And the first one that I created here is the sendWelcome. 392 00:19:39,380 --> 00:19:40,213 ‫All right? 393 00:19:40,213 --> 00:19:43,440 ‫And so for sendWelcome, we basically then preset 394 00:19:43,440 --> 00:19:45,420 ‫the template name as welcome, 395 00:19:45,420 --> 00:19:48,480 ‫and the subject as this string. 396 00:19:48,480 --> 00:19:49,313 ‫Okay? 397 00:19:49,313 --> 00:19:52,723 ‫So, I hope that made sense, and I see you in a second.