Colby, you might not believe it, but I gotta say, out of all the TH-camrs teaching React, you're hands down the clearest and most concise! Keep doing your thing-I can definitely see you going far!
Hey everyone, Resend founder here. It was really nice to watch this video - you crushed it Colby! Let me know if any of you have questions about Resend or React Email. Happy to answer them here :)
Hi there Colby, I wanted to ask if you would recommend Amazon Ses vs Resend. What do you recommend? Also, i need to implement a forgot password / recover password page where i take in the user email and send a "reset password" email to that email, if it exists. I wanted to ask how would you go about implementing it? Im using nextjs 13 (app router) with Supabase. Currently using supabase smtp but going to go custom since supabase smtp is not production ready. Thanks for your time and clearing my doubts in advance! :D
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
Hi, great video, but one question. I'm trying to send emails to different email accounts, but it only allows me to send emails to the account I signed up with for Resend. Is a change required to send emails from production to any email account?
In this video you just create api endpoint in nextJS, but little bit confused my app totally front-end based no any backend for now i use emailJs to send emails can we used resend on client side without creating api endpoint just create function on clients and called that function on submit it will be worked?
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 don't really have to install the entire react-email app on every project. What I did was simply create a standalone implementation that I could use to understand how to design the templates, and later in my actual project I just install all the dependencies for the templates (Section, Text, and so on) along with resend (or the render function, if I needed a different email provider).
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
Hey Colby, nice video, I've been trying react email and it's awesome, but for some reason I don't have autocomplete in the components props, do you have this issue too?
I am trying to send email using resend in node js, but getting unable to verify leaf signature error even though I configured ssl certificates using openssl and also tried switching to https but not getting any changes. Please help 😢
sounds like you're attempting to use the resend test email address, which is not an email address you can send to other addresses with. you need to validate your own domain and send with that
Hi sir How to fix the issue curtently i am using next13.4 and i have installed the dependencies but when i run yarn dev for email dev script it only create .react-email-tempo folder and it gives me error . how to fix it sir?
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
this example was just simply sending the email, i didnt touch on the actual "sign up" part which is a good point. Resend, if you're using them, have an Audience feature, but its built more for email lists, so it depends on what you're looking to sign people up for. if it's for authentication, perhaps an auth service would be more appropriate for the "sign up" but then you could still send the email with Resend depending on your flow. alternatively could store it in a database
@@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 })
Hi, i get the "404 This page could not be found." error, when i try to call it from browser with GET method. I do the same things like you. I can see the template but cannot overcome this error. Any idea?
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
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.
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
@@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/
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?
it was a perfect tutorial! I'm having problems to config resend, i was trying to learn but if i'm right, i only can send a e-mail if I config the domain and the DNS, so i cant practice without paying for a domain. But your tutorial is excelent!
@@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
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
@colbyfayock Great video! Out of curiosity - if Resend is a paid service after a certain threshold, how would you protect yourself from malicious attempts of ramping up your bills by bots or someone inputing random emails in the form? How difficult would it be to build your own, free alternative to Resend? A tutorial on this would be SUPER COOL
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
this tutorial might help: th-cam.com/video/8uChP5ivQ1Q/w-d-xo.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
@@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!
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?
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
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
why am i getting this error: ./node_modules/@react-email/render/dist/index.mjs Attempted import error: 'convert' is not exported from 'html-to-text' (imported as 'convert2').
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?
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Colby, you might not believe it, but I gotta say, out of all the TH-camrs teaching React, you're hands down the clearest and most concise! Keep doing your thing-I can definitely see you going far!
really appreciate that 🙏
Reminds me of fireship but better
@@xgtwb6473 huge compliment, thank you 🙏
Hey everyone, Resend founder here. It was really nice to watch this video - you crushed it Colby!
Let me know if any of you have questions about Resend or React Email. Happy to answer them here :)
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!
I’ve been fighting to pass data into it all day. Thanks so much I’d hug you in real life!
glad ot hear it helped!
Love the fast pace. Thank you sir! 🎉
no problem!
Love seeing you use typescript!
im trying! :D
Hi there Colby, I wanted to ask if you would recommend Amazon Ses vs Resend. What do you recommend? Also, i need to implement a forgot password / recover password page where i take in the user email and send a "reset password" email to that email, if it exists. I wanted to ask how would you go about implementing it? Im using nextjs 13 (app router) with Supabase. Currently using supabase smtp but going to go custom since supabase smtp is not production ready. Thanks for your time and clearing my doubts in advance! :D
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
Hi, great video, but one question. I'm trying to send emails to different email accounts, but it only allows me to send emails to the account I signed up with for Resend. Is a change required to send emails from production to any email account?
you need to use your own verified domain, not the @resend address, which is only for testing
In this video you just create api endpoint in nextJS, but little bit confused my app totally front-end based no any backend for now i use emailJs to send emails can we used resend on client side without creating api endpoint just create function on clients and called that function on submit it will be worked?
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 don't really have to install the entire react-email app on every project. What I did was simply create a standalone implementation that I could use to understand how to design the templates, and later in my actual project I just install all the dependencies for the templates (Section, Text, and so on) along with resend (or the render function, if I needed a different email provider).
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
Hey Colby, nice video, I've been trying react email and it's awesome, but for some reason I don't have autocomplete in the components props, do you have this issue too?
yeah im actually not seeing it either 🤔 might be worth an issue on their GitHub
I am trying to send email using resend in node js, but getting unable to verify leaf signature error even though I configured ssl certificates using openssl and also tried switching to https but not getting any changes. Please help 😢
not sure about that one :( id try reaching out to their support
I am able to send mail to only one account with which I logged in resend. Why is this happening??
sounds like you're attempting to use the resend test email address, which is not an email address you can send to other addresses with. you need to validate your own domain and send with that
Hi sir How to fix the issue curtently i am using next13.4 and i have installed the dependencies but when i run yarn dev for email dev script it only create .react-email-tempo folder and it gives me error . how to fix it sir?
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
Where are the email addresses of signups being stored? That wasn't mentioned.
this example was just simply sending the email, i didnt touch on the actual "sign up" part which is a good point. Resend, if you're using them, have an Audience feature, but its built more for email lists, so it depends on what you're looking to sign people up for. if it's for authentication, perhaps an auth service would be more appropriate for the "sign up" but then you could still send the email with Resend depending on your flow. alternatively could store it in a database
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Great tutorial, really appreciate it Colby!
no problem!
why can't I find the code you didn't bother writting for the video in your repo? the one with "isInputNamedElement".
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 })
Hi, i get the "404 This page could not be found." error, when i try to call it from browser with GET method. I do the same things like you. I can see the template but cannot overcome this error. Any idea?
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.
I made a project including resend and react email and I can send only email to myself?so is this error or their policy?
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/
Thanks for another great tutorial. How can I check anybody's reply of react email? as I don't have mail box.
You can use the reply to field to set an email address that the email provider would open when clicking reply
Question why are the changes not reflecting in the UI after updating the code ?
hey what timestamp are you referring to? im not quite sure what you mean
Hey Colby, thanks for the vid man!
Do you know how to attach a pdf or image file to the email?
looks like the `attachments` key when sending the email through Resend: resend.com/docs/api-reference/emails/send-email
ok but how do i deploy it do i send the node_modules in the react-email-starter im stuck
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?
it was a perfect tutorial! I'm having problems to config resend, i was trying to learn but if i'm right, i only can send a e-mail if I config the domain and the DNS, so i cant practice without paying for a domain. But your tutorial is excelent!
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
Has anyone implemented ReCaptcha with sending emails in NextJs 13
how long does it take for a domain to be verified ?
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
@colbyfayock Great video! Out of curiosity - if Resend is a paid service after a certain threshold, how would you protect yourself from malicious attempts of ramping up your bills by bots or someone inputing random emails in the form? How difficult would it be to build your own, free alternative to Resend? A tutorial on this would be SUPER COOL
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
Thanks for this Colby.
What is the name of your theme?
No problem! Night Owl marketplace.visualstudio.com/items?itemName=sdras.night-owl
how to attach dynamic pdf file like booking receipt?
you may need to generate the PDF then get it's contents to attach to the email. see attachments: resend.com/docs/api-reference/emails/send-email
thanks for the video exactly what i needed
but how can you access env variables inside reactnail components
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
dont we need email templates in table an rows instead of div??
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
I couldn't change the from and to address. It's not working when I change them.
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"
}
I made an awesome email thanks to you!
wonderful! glad to hear this helped :D
How can i use it with react-remix app?
never used remix, but here are two resources you can check out: resend.com/docs/send-with-remix github.com/resend/resend-remix-example
Hi, nice tutoril! thanks!
I made a form that need to send a fild and i don´t know how to do it. Can you share same info to do that :)
this tutorial might help: th-cam.com/video/8uChP5ivQ1Q/w-d-xo.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
bro is better than docs !
thanks 😁
Do I need a backend for this?
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!
Thank you very much!!!
you're welcome!
Vercel domain is not verifying😢
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
why mine error {
name: 'invalid_to_address',
source: 'server',
message: 'You can only send testing emails to your own email address (my 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
how to use dynamic data from api in this
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
why am i getting this error: ./node_modules/@react-email/render/dist/index.mjs
Attempted import error: 'convert' is not exported from 'html-to-text' (imported as 'convert2').
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
thank you !
you're welcome!
Cool, thx.
np!
Colby everything is perfect only for people who does not speak English well (like me) could you speak a little bit slower :)
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?