(FINALLY!) Email for Developers
Vložit
- čas přidán 27. 07. 2024
- Join the early access for my course! learnastro.dev
- NEW Resend Features: • Best New Features of R...
Modern email needs modern tooling for developers. Welcome, Resend! It's a breath of fresh air made better by it's companion tool, React email. I'll show you how to get Resend working in an Astro SSR project with dynamic json endpoints.
🔗 Key Links 🔗
- Github: github.com/coding-in-public/a...
- Resend: resend.com/
- Astro Dynamic endpoints: docs.astro.build/en/core-conc...
- React Email: react.email/
---------------------------------------
📹 Related Videos 📹
- NEW Resend Features: • Best New Features of R...
- React Email first look: • React Email First Look
- How to send emails using Next.js App Router and Server Actions: • How to send emails usi...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:30 Project Setup
2:07 Getting Started with Resend
8:02 Dynamic call from frontend
13:41 Getting Started with React Email
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - Jak na to + styl
Love the super speedy delivery actually - I can learn the big picture in one pass, plus note what I don't grok and go back and dig in. Appreciate your vids!
Thanks for the feedback! Yes, that was my intention. Just trying to quickly show possible use cases since email implementation is always so personal. Glad you liked the faster-than-normal delivery.
Chris, you’re still going strong, that’s awesome to see.
Very well deserved.
Thanks, my friend!
You are absolutely KILLING IT with this CZcams channel - learning so much from you 🙏🙏🙏
Simon! That means so much coming from you. Thanks, man! Now I just finally need to get around to doing some Keystatic content! 😉
Thank for the video!
Everything happens so quickly in this video. At first I even thought that my playback speed was x1.5. Previous videos were not as fast and therefore more understandable from the first viewing.
Yeah-it was definitely a faster delivery-especially after the first 5 steps. Sorry it felt a little fast, but I was mostly just wanting to show possible use cases since it's so personal to the user. Thanks for the feedback!
Wow Chris Awesome explanation. Resend does solve a lot of issue.
Glad you enjoyed it! Resend is 🔥!
Amazing. Finally something good in emails. Thanks Chris, for covering this.
BTW, what's that icon pack and theme you're using? Will you please share the extebsion names?
Bearded Icons :)
Oh boy, of all my years developing web and game software, all I ever thought about was "Damn I wish upon a star that this development work could be made easier and faster when it comes to emailing. If only my time spent emailing people could be improved, I wouldn't need to be sitting at the computer for hours every day." Yeah, the email client that I use was always at the top of my list of desires as a modern programmer!
Lol? Google Outreach, and think about why an email client would be worth over 4 billion dollars.
Ha, sounds like you have a lot more dev experience than me :)
That sounds like sarcasm. Is it? Because honestly I wholeheartedly agree with this comment if it’s sincere.
It's obviously sarcasm
@@CodinginPublic Yeah sounds like he does
This awesome
One unrelated question (a bit). How would you approach an astro project that requires animatios with gsap or framer motion? Would that just ship the HTML static and then ship the necessary js even if its on the layout component? Like doesnt that mess up with the Astro idea? I really want to use astro but Im a bit afraid that this is working against me, thanks!!
Love your videos btw!!!
Yeah, that would work! Just set it up like you would in a static HTML site. That's what I'd do :)
Awesome Video, Astro looks interesting as a Next.ts Dev, BTW how did you got the object shown in vscode when it's logged in console 👀
Glad you enjoyed it! Yeah, Astro has a lot of interesting use cases. It’s better at some things than NextJS IMO, but obviously Next has its own strengths. I did a quick 20 crash course a while back that still holds up here:
czcams.com/video/zrPVTf761OI/video.html
Console log is an extension called Turbo console log.
Resend works in dev mode but when I put it in production (Vercel) contact form gives me 405 error. Also I am not using React, Preact....just pure Astro.
Any advice?
Email is hard. You make this look easy. I'll still stick with MJML though - "slightly less" setup :)
lol I’ve used MJML once but found it clunky. It’s been a bit though and I’m better with react now, so it may have been my fault :)
@@CodinginPublic Clunky is kind. But there's 100% less setup time which is a plus for me.
Its looks great, i really wait when C# will be added
if you need a tool like this then take some more programming lessons. The "problem" this tool is trying to solve is non-existent. It's ridiculously easy to send emails in most languages, even with templating engines. instead of static html.
chill man .i am seeking a service the functionality that i needed , it rather than building your own solution. and i know that in most of langs you can code sending email)
They move fast, so hopefully soon!
I am never using Google's API again after this....there tokens expiring and recurring payments were expensive for small projects. This is useful piece of content!!!
Glad you enjoyed it!
I am a front-end freelancer who recently built a couple simple SPA's with astro but am having a hard time understanding the backend parts of this tutorial. Any ideas on where I should begin?
this looks dope!
I’ve really enjoyed it!
Hi Chris. Thanks for your interesring video. Which 3rd parties in your terminal setup ? ❤
I use fig.io in VSCode and Warp as my standalone terminal :)
Didn't understand cos im new to front-end
But sill awesome
Hey, no worries! I moved much faster here than I normally do on my channel, but glad you still enjoyed it! Thanks for saying something!
As one that had to deal with email automation for several years. There only are two crucial issues why E-Mail Templates are a pain.
1. Outlook rendering HTML with the Word HTML renderer and the implied chaos of older Outlook versions
2. Clients never updating their clients forcing us to support the stone age rather than standards.
Curse you, outlook!
How did you theme your terminal? Any link? And thanks a lot for helping the community.
My prompt is using starship I think? I don’t know if I have a tutorial on it, but it’s fairly easy to setup from their site.
My astro project shows `Named export 'html' not found. The requested module 'js-beautify' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'js-beautify';
const { html } = pkg;` this error after I followed @7:37 . i don't know how to fix it...
I'm facing the same problem. No idea how to fix it 😕 I've also upgraded Astro but it didn't help.
we started with react-email but at the time (start of last year) it didn't work that well: the , and other components didn't work. Also we were supposed to use only inside s but there was no documentation on it, etc. We end up ditching it and work around with `react-dom`, some dangerously-set-html, liquid.js parseSync and some custom rules and works perfectly. I don't know how react-email had 8k stars on GH at the time... I doubt even 5% of those stars actually tried the library
I wonder if it is sending multiple requests to server API for each email or one requests to server API to send all emails at once from backend.
Right now, the way I'm showing it, it's a single request for each email. So for bigger use cases you'd probably want to do a lot of this logic on the server and send something smaller over the network. So just a quick example, not the be-all end-all.
what do you use for terminal settings, theme and autocomplete?
fig.io in the VScode terminal. I'm using a custom starship prompt. And I use Warp as my standalone terminal. Hope that helps!
Please Chris which Vs Code theme are you using?
Material Palenight High Contrast: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
Thank you Chris!
How would you handle the api so that only requests from your website can be authorized? It would be a problem having user just hit that POST Route and sending from your email whatever they want.
Yeah you'd want it behind auth, of which there are many options, the simplest being a login and cookies (handled on the server of course)
Like Iain said :). I did mention in the video that you'd want to set this up behind auth, but didn't want to set all that up to just stay focused on Resend in this video.
Would it work with ssg? I just need resend for a contact form.
Sure! You could have your page rendered in SSG. But to protect your api key, you’d want to hit a server endpoint that’s protected. Astro’s hybrid rendering would be great here. The whole site will be SSG but you could mark the api POST route as prerender=false to make it alone SSR.
Can you tell me one thing, isn't storing apikey on.env on the browser side is risky? i mean .env will rendered as string , if someone looked at source, right ? What is preferred way of making it opsec safe ?
Everything that should be private shouldn't be, in any way, in the client code.
You might need to make a server that makes the api calls for you
It's not in the browser. Astro is server first, and those API endpoints he's making are all server side, and only return JSON in the response
As Iain mentioned (and I may not have been clear enough) the API endpoint is server -only. And Vite protects you from exposing keys by forcing you to name client-side keys as PUBLIC_{KEYNAME}. Hope that helps!
@@CodinginPublic One more thing thats vite specific ... so I tried with vite app and named .env keys as VITE_APP_{}. I see that as rendered string and their docs says if you write it like this it will not leak anything.
@@CodinginPublic Btw maybe you know if there's any reason to go from SendGrid to Resend? Pricing is exactly the same and I do not have any problems with SendGrid
sending emails from the frontend is a bad idea, if the user closes the browser before the email is being sent then the email wont be sent. If the user has adblocker or something, it might cause js issues and the email wont be sent. It's just a bad idea to do any business logic from the frontend. Also I don't understand the point of Resend, we already have Sendmail and Maillgun etc.
True, nothing to add here.
where is he sending emails from the frontend?
Email will be sent but won't see response. Yes, it's not a good idea, to send from frontend. This video isn't sending from frontend though. He's using an API route.
No one is sending email from the frontend, relax buddy
Hey, I may not have been clear enough in the video, but like I mentioned, you'd want to set up an authenticated route if you want to send emails like this. You'd likely also want to add an API key or some kind of internal check server-side for the actual call to send the emails. Just didn't want to set all that up in this example to show off Resend. Thanks for the comment.
what font are you using in vscode
Cascadia Code (free font by Microsoft)
Their approach is wrong, because it locks you. Just the last week we were in outage with our mail provider and we were using their apis (like resend, nothing new btw) and the fact that we were using the API blocks us to switch email provider. Now, I will use mjml + smtp protocol. In that way we can switch to any mail provider.
Great, could you show how to deploy what you just created? It's simply an "npm run build" and upload it to the hosting and that's it? I'm a little lost with that
You'd want to hide this behind authentication before publishing, so that's why I didn't show :)
@@CodinginPublic I'm stuck in that, i wanted to deploy it to Netlify or Vercel, but when i run npm run build, it returns 2 folders inside "/dist", /client & /server, but there's no index file (.html), so when i deploy it, i get a 404 not found, could you explain me how to make a deploy correctly please?
Any improvements from nodemailer?
It would be worth looking at their docs, but they do a lot of stuff for DKIM and other email requirements to ensure your emails actually land in people’s inboxes. It's not perfect, but they take care of all of that for you.
Is this just for React?
React email is. But resend is for any rendered HTML.
Chris, Can you copy the Rubik's Cube and make a video of it.
I wish! That's probably more complicated than I could neatly explain. Guessing ThreeJS?
Thank you so much for telling me. I will try this framework to make this project.@@CodinginPublic
I still don't understand why so many people are opposed to just sending an email over SMTP. It's not that hard.
I didn't really outline this in the video, but Resend takes care of a bunch of other items as well like DKIM, the new Google and Yahoo email policies, etc. So your emails are much more likely to land in people’s inboxes without a bunch of work on your part. You can also use SMTP with Resend. But if you have another solution, no worries. Cheers!
Bro, the cube awesome, 😎, Threejs ?
Idk. It’s pretty cool though!
@@CodinginPublic love your work ❤️, astro js awesome videos thanks 🙏
React Email is "ok" now? I've started using it (it had like 8k stars on GH already) and it wasn't that good: Fonts didn't work, the Column component was to be used inside a Column (and there was/is no documentation about it). Everything was so badly polished that I end up re-writing most of the rendered / components.
It wasn't that good honestly.
I should have mentioned that it's still in beta. I agree that it could be better, but transparently I haven't used a lot of the other email systems :)
There's always been easier ways. They just cost.
Fair enough :)
Meh, sending email has never been an issue, this does not look any different from Postmark or sendgrid or any of the services out there. The pain point has always been being able to create an email template that works in all the email clients. If one is just going to use react email, then one could send an email from any service including just from node.
I didn’t really feature this in the video, but the resend takes care of DKIM and a bunch of other email domain requirements for sending emails that actually land in people’s inboxes. The new broadcast feature also adds appropriate headers that Google and yahoo now require (new requirements in the last couple of months). Again, you can roll your own, but I’m happy to use resend so I don’t have to. I agree that templating is the worst tho! Ha
Is it free?
There’s a generous free tier!
if you need a tool like this then take some more programming lessons. The "problem" this tool is trying to solve is non-existent. It's ridiculously easy to send emails in most languages, even with templating engines. instead of static html.
also I see some blatant security issues here.
You may not be willing to, but I'd encourage you to look more into what Resend is offering. I focused on the sending of emails here, but the easy-of-use is actually in how they help you quickly configure your domain to avoid spam filters, DKIM, etc. And as to the security issues, like I mentioned in the video, you'd want to put this all behind auth, etc.
another overpriced saas that wont exist in 1-2 years.
We’ll see. Time will tell! I’m really enjoying it!