All language subtitles for 010 Email Templates with Pug_ Welcome Emails_Downloadly.ir_en

So in this video, we're gonna use

the power of Pug to create a really nice email template

and then send a welcome email based on that template.

And that template is welcome.pug here.

Okay, now just as before, I already have a template

here in dev-data templates.

So email template and so it's all of this code here

with the CSS also in lined.

So a ton of CSS.

So let's copy all of that here into welcome.pug.

Okay, and here up in the bottom, you'll see this note

where I say that it actually adapted this email template

from this one.

So let's very quickly open that.

All right.

And so our email is going to look a bit like this one.

Now, of course, I adapted the design a bit to our brand.

So for this button here,

I used our green color, for example.

But kind of what I used is this HTML template.

Then I actually converted that HTML using this tool.

So HTML to Pug.

So again, let's take a quick look at that.

And so basically what this allows you to do

is to paste some HTML in here

then click Convert and it will output the Pug code for you.

So that can be very handy when you try to convert

some existing pages that you already have an HTML to Pug.

Anyway, when we're building an HTML email,

we always need to inline all the styles.

And so that's why you have this ton of CSS

right here inside this file.

But, of course, this makes this file a bit noisy

and so let's grab all of that and export it.

All right, so, yeah.

So that's it.

So cut it,

and here create a new file,

and then, just as before, with files that I'm gonna include,

I use the underscore then style.pug.

So paste that here.

And now we need to also adjust all this insetting here

and so again, Command + Shift + P

or probably on Windows, Ctrl + Shift + P.

And then just write pug for beautify pug.

And so that makes our code nice.

Close that one up here,

and now include_style.

Okay, and now you see all of these codes down here,

which looks really confusing and that's actually the reason

why I copied this template from that GitHub repo

that I showed you before.

So there's a lot of tables going on

and that's because many email clients

actually only understand tables for formatting.

So we have all these stuff here that's not really meaningful

with table rows inside of tables inside of tables.

Am I right?

But what matters here is this content area here.

And so this is the part of the template

where we're gonna put all our content.

Now, the thing is that we, of course,

will have many different templates.

In the case of this project,

we will actually only create two ourselves

but there might be many emails for many situations

and so, of course, we will need a way of reusing

all of these code that is outside of this content.

So, basically, all of these here should be reusable,

and actually, that's exactly what we did before

with our base template here.

All right.

So we put everything that is reusable for all the templates

inside of this base, then we have our block there

and all the other templates,

then simply extend this block.

And so that is exactly what we will do now.

So let's actually go ahead and cut all of these from here,

create a new template called baseEmail,

and then put that here.

And now, for the content itself, of course,

we remove that from the base.

So cut that one from here,

and here let's create then a block

called content, again.

All right.

And so now here, in our welcome template,

we then put that content

inside that content block.

Okay.

And now just to finish, we then need to say

that it extends, so that this template here

extends the baseEmail.

Let's format this again with this command

and that's beautiful.

Great.

Now, here in our base template,

we actually have now the subject as the title.

And so that is the reason why I passed that

into the template.

So that is right here, remember?

So into the template, we passed the subject,

the URL and the firstName.

And so let's now go ahead and use this in our template.

And so the subject we already used here in the base

but that's actually it for this file

so we're not going to touch it again.

And so now here is our real template.

So we have here the name and so let's actually replace that

with the first name variable.

So firstName here, then we have all these nice texts here.

So, welcome to the family, all that stuff.

And then down here we have that green button

that I talked about when I showed you the template on GitHub

and so on that button, we say upload user photo.

And so here we need to specify that URL that we passed in.

All right, so it's called URL, right.

And so, now we put that on this button here

and that's actually it.

All of the rest here is just static content

that we do not need to change at all, all right?

So this welcome template here will now get used

whenever we call sendWelcome.

And so let's now actually go ahead and do that.

So from where do we want to send the welcome email?

Well, that is in the authController

and to, I believe there's a sign up function

or register or something like that,

and it's right here.

So this sign up.

And so into this, we need to import the email

and then use it.

And, actually, already we have sendEmail,

but now remember that is called Email,

so with a capital E like this.

Now we used that variable before somewhere down here,

so let's go there.

All right, and so this code here at this point

is no longer working but we will fix that in the next video.

So for now, let's just comment it out

so that it doesn't do any damage.

But anyway, let's now use this email class right here.

So new Email, and then remember first up is the user

and actually VS code knows that and shows that here

and so user is the newUser that we have up here

and then the URL that we're gonna create here in a second.

So const url equals, let's put it to zero, for now.

Okay, and then sendWelcome.

And now all we need to do is to actually await

this sendWelcome function.

All right, so we do that, that we only move on here

to the next step after the email has actually been sent.

And we can do that, of course,

because sendWelcome is an async function, remember that.

And so when we actually use it,

we then wait until it finishes.

All right, and so this is all we need to do

in order to send emails now,

but we still need to specify our URL here.

Now, what URL do we actually want here?

Well, remember that here on the button,

it says Upload_user_photo, right?

And so basically, we want to point

to that user account page.

So, basically, right here.

So for now, let's copy it, but we will then change it.

And we could leave it like this

but then it would only work in development

and not production, 'cause, of course,

this here does not exist when we're in production.

And so instead of basically hard coding it like this,

we will get this data from the request.

So basically, we will get what protocol we're using,

if we're using HTTP or HTTPS, and then also this host.

Okay, and both of that we can get from the request.

So let's replace all of these here

and make this a template string

and then we can say request.protocol

then colon, slash, slash,

and then request.get.

So we need to use this getter function

and what we want to get is the host.

And so when we're in development,

then, of course, this here will be the local host

on port 3000.

Okay so let's just console it

just to make sure.

Okay, and now, let's actually then test it.

And all we need to do for that is to just create a new user.

So let's do that here in Postman.

So Sign Up,

and now in our Body, let's create a new name,

let's say Test User.

And here, all of these doesn't really matter,

so let's just say test@natours.io

and with the same standard password.

And so now when we create this new user,

then we should get a new email into our Mailtrap,

so that we can take a look at it.

So let's try that and we got some nice error down here.

So let's take a look at that.

And it says that it couldn't find this file.

So there's some error in our email handler here.

And so let's try to find where that is.

Ah, it's down here.

And so the problem is that the folder here

is called email and here I called it emails.

So let's just say email,

I prefer that one.

And so now it should work.

Oh, and now we get the next error,

because this email here already exists.

And that's because in the previous step,

we actually did create the error, the only problem

was then with sending the email.

So let's do that again here, test two.

And one more error.

This time coming directly from Pug.

So, only named blocks and mixins can appear at the top level

of an extending template.

And so something is wrong here,

and indeed it is.

So that's actually exactly the error

that it told us we had and that is we can only have extends

and block but here we have this paragraph

also at the top level.

So that's not allowed.

So let's put it where it belongs, which is right here.

Give that a save, try it one more time,

and of course now we get this error.

So let's say test three.

Okay, now we're good to go.

So we successfully created the new user,

he has logged in.

And now let's take a look at Mailtrap

to see if we actually got our email.

So Mailtrap.

Let me log in here real quick.

And here is our Natours inbox,

and indeed, here is this new email from a minute ago

saying welcome to the Natours family.

Great.

And it actually looks really nice, right?

So that's all the texts that we had in our template.

We can also see the complete HTML here.

Also here we have the text.

And so remember that we created this one here

from the HTML to text package

and so we can confirm that it works just fine as well.

And, uh, yeah.

Let's just try to click here on this button,

and indeed it takes us to our account page.

Now, right now we're actually logged in as Aarav

because we already were logged in as that user

but that's not really the point

because this email here kind of supposes

that you are signing up from the website, right?

Now, that doesn't work at this point,

so we don't have any sign up form on our website

but the really important part here

is that our email here now works just fine,

the button here also works.

And so that big email handler

that we created in the last lecture is doing its job

just as well as the email template

that we created in this video.

So, I'm really happy with this result.

Next up, let's do something similar

for the password reset emails.