React Email

[00:00:00]
>> Brian Holt: So, we sent an email with this very lovely HTML here. No one wants to author email like this, but you could, right? You could use some other tool that authors this for you and then put this in here, or we're going to use a library that is at least partially maintained by Resend, if not totally. React Email, so it's literally react.email.

[00:00:27]
Yeah, next generation of writing emails. This is not specific to Resend, you can use this, I think all over the place. I think it works with like SES and like the Azure email service and SendGrid, I think you can use it with anyone. Yeah, Resend, SendGrid, AWS, Postmark, Postmark was the other one that was on my mind as well.

[00:00:51]
So it is, it's quite nice. You can use Tailwind. I don't think I did I actually use Tailwind in here? No, I skipped using Tailwind. You definitely could have. Yeah, I just do style tags. But I'll be honest with you, I just copied another template from somebody else. So, in fact, let's just go copy and paste it because writing this email is not interesting to anyone, it's more interesting that we can do it.

[00:01:30]
Cool. So we're going to go to Resend next, and I'm just going to copy this from up here. Nope, sorry, not this one. This one. This one here on email reactor template. OK, and then we're going to go into here, we're going to make a templates directory. And this one is just going to be, what did I call it, celebration email, I think is what I called it.

[00:02:21]
Yeah, celebration template. Celebration template. TSX. Pasted here. Oh yeah, this is going to get mad at you, but, and the reason why is you have to just put lang equals and on here like that. So as you can see, this is very reactive, right? And the nice thing is that you just kind of author this as you would a normal kind of email.

[00:02:45]
Here you can see I'm kind of doing it more in the older style here, we could have taken more advantage of Tailwind, because React Email is good at translating Tailwind into proper email styling. But like I said, I just took a standard template off the internet and kind of adapted it into this. Put some words of affirmation in here, call it good.

[00:03:29]
OK. Any questions about this? All right. So now we have this template that's in React. We didn't really pass too many props in, I guess we did. We now need to go use it. And we do have to modify our celebration email quite a bit because like it's expecting name, page view, article title, article URL because we want people to be able to like click into their email.

[00:04:07]
So, let's go ahead and port photo templates, OK. At the top here, we're going to say import celebration template from. This is going to come from email like this. And we are going to put up here because when it comes locally, we want to direct to our local base URL, but if it's coming from Vercel, we want it to come from the production environment.

[00:04:44]
So here's a fun little trick for that. Const baseURL is assigned process.env. Vercel URL. When we deploy to Vercel, this will always be populated with the correct email address or the correct base URL. Even if it's a preview environment. And we're going to say if it is, then we're going to put Vercel URLs.

[00:05:18]
I guess you oh yeah, that's what it is. You do need to put HTTPS in here because it doesn't include that. Like that, or it's going to be from localhost, right? HTTP or colon localhost 3000. Or whatever you have as your localhost here. OK, from your response here, we need to grab a couple more things out of our database, we need to grab the title, which is articles.title, and we need to grab the name, which is going to be user.syncName.

[00:06:13]
OK, from here you're going to grab name and title there. And then we're going to come down to our where we're sending our email. And delete this whole line here, and I think you, yeah, you put React in here instead. And then you just give it the component. Celebration template. Isn't that what I called it?

[00:06:57]
Did I not export it in the other one? I must not have. No, that's fine. OK. It's just not happy about it. Article title is going to be assigned title. Oh, you know what it is. You have to rename this to be a TSX file. Yeah, TypeScript and Vite and all those get really picky about if you need to add that X on the end, or else it doesn't think it's a React file.

[00:07:48]
Article URL is assigned. We're going to put baseURL slash wiki slash article ID. Name is assigned name or friend is what I put in here, you can call whatever a term of endearment that you want. So, you need two question marks there, like that. This is called a nullish coalescer, something of that nature, so it's name if it can be, otherwise it's this, if this is, you know, falsey-ish.

[00:08:28]
PageViews is assigned pageViews. And then you got to close it. So again, make sure the celebration.em gets renamed from .ts to .tsx. Sorry, you need an underscore here in baseURL. And I think this should be enough. And now we've gone from just sending like with a HTML string to actually using our template here, which this is going to be way more maintainable than some random string, right?

[00:08:58]
OK, let's go back to our app really quick and make sure that we are working here. So I'm going to go back to Wiki Masters. I'm going to sign out and sign into somewhere that I can actually deliver an email. Yes, that's fine. OK, I'm going to find an article by Brian Holt. You got to pump up those numbers, you gotta go viral, make yourself go viral, you gotta believe in yourself, it's really the sum of this course, that you can go viral by yourself.

[00:09:45]
This has been marketing moments with Brian. There we go. Nice work, Brian Holt. Your article, Lorem Ipsum, just hit 10 views. That's a milestone. Keep writing, you're helping other people learn. You're receiving this email because you authored content, and then you can click the view article button. Like, that's pretty, this is a fairly professional looking email, right?

[00:10:11]
It's pretty simple to author. Pretty cool, right? Who knew that writing email didn't suck? Congrats, Resend on making an email product that doesn't suck. Yeah, React Email is pretty cool, and you can see here they have like way more stuff than we really got into. You can see here like this, like writing it with Tailwind really does feel just like writing normal Tailwind, which is cool.

[00:00:00]
Yeah, and I'm barely scratching the surface here. There's a lot more to React Email, there's a lot more to Resend that I'm showing you here. We're just kind of scratching the surface here just to kind of show you what's possible.