How to use Resend as email provider?

default discord avatar
generator101
2 months ago
10

Has anyone used resend as email provider? I was reading this

https://payloadcms.com/docs/email/overview#use-an-email-service

but has anyone used resend with payload?



any docs about setting up this will be great

  • discord user avatar
    denolfe
    Payload Team
    2 months ago

    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-L150

    You 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?

  • default discord avatar
    generator101
    2 months ago

    @denolfe thank you, I got it working using the code you provided, thank you again

  • discord user avatar
    denolfe
    Payload Team
    2 months ago

    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

  • default discord avatar
    generator101
    2 months ago

    @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=
  • default discord avatar
    markatomniux
    2 months ago

    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

  • default discord avatar
    generator101
    2 months ago
  • default discord avatar
    markatomniux
    2 months ago

    Thanks @generator101. Do you use React Email as well?

  • default discord avatar
    generator101
    2 months ago

    No, but i was thinking of using it in future

  • default discord avatar
    markatomniux
    last month

    @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/1132327692218417162

    and 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/html

    Hope this helps anyone in the future!

  • discord user avatar
    denolfe
    Payload Team
    last month

    That's great! Incorporating React Email was on our list of things to get going 👍

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.