Create & Send Custom Emails with React Email & Resend 

really appreciate that 🙏

Reminds me of fireship but better

@@xgtwb6473 huge compliment, thank you 🙏

thanks Cam! 🙌

no problem!

glad ot hear it helped!

thanks Zeno!! 🙌

When is it likely to receive a stable release?

@zeno_rocha thanks for creating an amazing product. Resend is great! Muita força e sucesso!

hi zeno, just wanted to ask why would anyone choose resend over amazon ses? Genuinely asking. thanks!

im trying! :D

no problem!

yeah im actually not seeing it either 🤔 might be worth an issue on their GitHub

wonderful! glad to hear this helped :D

i dont think you can do that with Resend, reason being, you would want some kind of security measure around calling that endpoint in order to make sure someone isn't abusing it if you're submitting a form clientside directly to the API, someone can see that API request in the network logs along with the API key that you're sending and spam it while creating an endpoint that wraps the Resend request doesnt outright prevent that if you're submitting it clientside, you're at least not sharing the keys alongside of it, and in Next.js, you're also avoiding cross origin requests, thoguh you'd still likely want more security and spam prevent measures around that experience

you need to use your own verified domain, not the @resend address, which is only for testing

not sure about that one :( id try reaching out to their support

You can use the reply to field to set an email address that the email provider would open when clicking reply

hey glad to hear it helped! you may need to use dotenv when using it locally, i haven't tested this yet, but thats a common solution

my understanding is it would work like any other deployed dependency from within the serverless function - the build and deploy step is managed by the provider, say for instance you're deploying on vercel, as long as the react-email dependency is pulled in along with Resend, it would bundle that up and handle the processing of the email are you experiencing something different?

hey what timestamp are you referring to? im not quite sure what you mean

looks like the `attachments` key when sending the email through Resend: resend.com/docs/api-reference/emails/send-email

hey not sure about that, i would recommend seeing if there's an existing issue on the React Email repository and if not ,creating one github.com/resendlabs/react-email

i was trying with a free domain (like vercel)

@@nazinhalira thanks! yeah i wouldnt expect you to be able to configure DNS for vercel subdomains unfortunately. you could probably find really cheap domains for 1 year and cancel before, but that would still require a payment

Hey, Amazon SES vs Resend is really a matter of paying for the wrapper that Resend adds to what I believe is SES that they use themselves. from past experience SES is a pain where Resend is really easy to use. if your budget supports it, it definitely would make your developer experience better. have to consider the tradeoffs between the work of building an SES solution and all the thigns that go along with it manually as far as a forgot/recover password page, i'm not familiar with how supabase works, but typically you would build a page in your app where when submitting their email address, you use an API to trigger the password recovery process not straightforward answers but hope it helps

yes thanks!@@colbyfayock

No problem! Night Owl marketplace.visualstudio.com/items?itemName=sdras.night-owl

you're welcome!

thanks :) starting off with building your own, i believe Resend uses AWS SES under the hood: aws.amazon.com/ses/ - it's certainly within reason to be able to do that, ive worked at companies that have used SES for transactional emails, but it can be a pain. im sure you could even export rendered React Email templates and ship with that if you want. if you're comfortable in AWS environments definitely doable!! i would imagine there are videos out there, but honestly i can't see myself making a tutorial on that at the moment (i still have AWS PTSD, i'm enjoy the front end, but used to get pulled into AWS a lot haha) as far as ramping up bills, i think that's a separate challenge and one you'd face with any solution. its a tough one, there are a bunch of solutions including Google's ReCAPTCHA www.google.com/recaptcha/about/ - only some people dont like using Google, but there's a lot of other alternatives these days you can google around for

it usually happens very quickly, but that depends on your domain provider. Resend will be able to read your domain's DNS entries basically right away, but your provider needs to propagate them which i believe could take up to 48 hrs iirc. Mine just took a few moments

never used remix, but here are two resources you can check out: resend.com/docs/send-with-remix github.com/resend/resend-remix-example

hey that sounds like you might be trying to use the Resend email for the `from` address, which you're not able to use. thats simply for testing purposes. you need to configure your own domain to send emails to other people resend.com/docs/dashboard/domains/introduction

@@colbyfayock so can I submit it as a project if I don't have any domain?

@@colbyfayock please reply

​@@wellbell23 can you elaborate about what you mean about submitting as a project? i dont believe Resend provides free domains in any way, so typically you'll need a real domain to set this up. a good place to get domains is Porkbun where you can find some inexpensive options: porkbun.com/

hey have you checked out my code? github.com/colbyfayock/my-react-email its also worth noting i believe they launched a big update, its quite possible something changed as i havent updated to that yet

@@colbyfayock Yes i checked. The versions are higher now and i think structure was also changed. I am searching for solutions.

1st thing you need to check is if you're running both your dev and email via the npm run on terminal. - after opening your project, manually enter the "/api/email" (or the place where you set your route) to run the GET method to get result. IF you're not getting the email, even though you're getting the correct status msg, make sure you're inserting the email you're using via the resend website where you got your API from.

can you share the code? here's what mine looked like: github.com/colbyfayock/my-react-email/blob/main/src/app/api/email/route.ts#L13

@@colbyfayock ah..i just cloned ur code and added my api key. it failed.

{ "statusCode": 422, "name": "missing_required_field", "message": "Missing `from` field" }

you're welcome!

oh nice good to know. from what i can tell the react-email package though provides the dev mode, so i guess does that mean you're not using their built in previewer? might be a naive concern, but i would expect there's more to that preview page than just a simple dump of components, since email html/css is more strict. unsure though

this tutorial might help: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8uChP5ivQ1Q.html doesn't cover it exactly, but through the process of adding / selecting a file, you would want to upload it somewhere instead of on submit, so then once the file is submitted, you can send the URL

hey can you elaborate on what you mean?

i got it i just want to ask how to make this email template responsive in inline css like media queries or something @@colbyfayock

hey what timestamp are you referring to in the video?

​@@colbyfayock Hey, thanks for the reply. At 12:39 you just pasted it in but didn't thoroughly disect it. What I'm trying to do is have a single click send out two notifications. ONE for my email saying "hey, on your website, {firstName} from {email} sent a meeting request", and another sent to the user that inserted those fields that says: "hey {firstName}. We've notified the team and they'll reach out to you shortly. how could I make that possible? - it seems the way you did this unfortunately forces the use of only ONE domain to be delivered.

@@mateusloubach ultimately you would need to invoke resend twice - one with each set of data you're looking for, which you would do in the API endpoint. if you need both of those pieces to be dynamic, you need to set up additional properties to be configured and passed through to the endpoint, otherwise you can statically define the 2nd set in the API endpoint pseudo code body: JSON.stringify({ userEmail, businessEmail }) ... await resend({ email: userEmail }) await resend({ email: businessEmail })

you'll need a server-like environment but that can be a serverless function, so just depends on what you mean by backend

@@colbyfayock To echo this previous comment, I am currently trying to implement this functionality within a VITE react app and receive a CORS error when attempting to send the email. I wanted to avoid building backend as its a very small application but the Resend docs on CORS state that emails should be sent from the server side only. Is this then only achievable within NEXT due to its use of SSR?

@@matthewhammond4918 Next.js isn't the only option and you can choose a solution that doesn't include moving to a framework that supports API endpoints. You can manually create API routes that are framework agnostic in both Vercel and Netlify for instance. You can also create your API route using a cloud provider like AWS using their API Gateway and Lambda, or even a server environment if preferred. there's also api frameworks like Hono and Express, where which can be deployed to a variety of locations (see the sidebar here hono.dev/getting-started/basic) this would probably make for a good video!

np!

you would pass it in to the component as shown around 10:00

I mean I have an API to view posts in the email I have statically generated the data in a variable how to fetch data from an API in the email component or do I need to fetch that data somewhere else?

@@ArysOakheart-qz2wb you can't fetch data from within an email, emails are statically delivered, so you would need to fetch any information before the email is generated, passing it as a prop to the email component

can you please provide some example @@colbyfayock

can you please provide some example i have a task of testing emails from dynamic data through api@@colbyfayock

you're welcome!

thanks 😁

hey are you referring to a [name].vercel.app domain? i wouldnt expect you do be able to send emails from a vercel subdomain like that. if you're referring to a primary domain that you added through vercel, that _should_ work, though it may take up to 48 hours i believe (doesnt usually take that long). what error are you seeing?

We don't allow public domain,please use your domain instead

@@Anurag_Badwahe whats the domain you're trying to verify?

feedonymous-vercel-app/ I replaced . With - ,because if i provide a link yt will.delete it

Really need help

yeah i get excited and have a habit of speaking quickly. thanks for the feedback! in the meantime maybe slowing it down with the player controls could help?

not sure... i would recommend looking around on the React Email github and if not finding anything make an Issue github.com/resendlabs/react-email

are you trying to use the resend email address? it's likely the case that they're only allowing you to test that email address sending to your own email so people dont abuse it. otherwise you need to set up your own email domain in your resend account