Has anyone used resend as email provider? I was reading this
https://payloadcms.com/docs/email/overview#use-an-email-servicebut has anyone used resend with payload?
any docs about setting up this will be great
Hey @generator101, we use Resend behind the scenes for Payload Cloud. I can point you to some code that should get you 90% of the way there.
Here is the code to configure the nodemailer transport config for Resend:
https://github.com/payloadcms/plugin-cloud/blob/main/src/email.ts#L64-L150You should be able to grab that code, make a few modifications, then pass into the
email
property on
init
.
https://payloadcms.com/docs/email/overview#configuration
You can strip out most things related to Payload Cloud custom domains and swap some env vars.
How to use Resend as email provider?
@denolfe thank you, I got it working using the code you provided, thank you again
Awesome!
@generator101 If you could share the code, that would be helpful for other people wanting to do the same! 👍
We'd likely add this to our docs as well
@denolfe sure, here is my transport
I configured it like this in server
const email = emailTransport({
config: {
fromName: process.env.RESENT_FROM_NAME,
fromAddress: process.env.RESENT_FROM_EMAIL,
},
apiKey: process.env.RESEND_API_KEY,
defaultDomain: process.env.RESEND_DOMAIN,
})
environmental variables can be set for these
RESEND_API_KEY=
RESEND_DOMAIN=
RESENT_FROM_NAME=
RESENT_FROM_EMAIL=
Hey @generator101 would you mind also including a copy of any code you used to create the email? I'm about to start implementing Resend in our environment and an example with Hooks would be great
@markatomniux I used this example:
https://github.com/payloadcms/payload/tree/master/examples/email, you can replace this file with the one I shared
https://github.com/payloadcms/payload/blob/master/examples/email/src/email/transport.tsThanks @generator101. Do you use React Email as well?
No, but i was thinking of using it in future
@generator101 I wanted to share this, I incorporated React Email alongside resend. If anyone following this thread wants to try, install react-email in your Payload project and create an
emails
folder in your src directory.
I have a file in here called transport, where I use the code from
https://discord.com/channels/967097582721572934/1129596553011658943/1132327692218417162and I have another folder called
templates
. Inside of templates, create a new React Email component like this;
import { Html } from '@react-email/html'
import { Text } from '@react-email/text'
import { render } from '@react-email/render'
type Props = {
name: string;
}
const Template: FC<Props> = ({ name }) => {
return (
<Html>
<Text>Hello, {name}</Text>
</Html>
)
}
export default function (data: Props) {
return render(<Template {...data} />);
}
When using Payload.sendEmail, pass the render function into the html prop like this;
import TestEmail from '../email/templates/TestEmail
...
payload.sendEmail({
to: 'test@email.com',
from 'contact@mywebsite.com',
subject: 'Test',
html: TestEmail({ name: 'John Doe' })
});
Remember to install all react email components as needed, follow the docs -
https://react.email/docs/components/htmlHope this helps anyone in the future!
That's great! Incorporating React Email was on our list of things to get going 👍
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.