How to use Resend as email provider?

default discord avatar
generator10111 months ago
24

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
    11 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
    generator10111 months ago

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

  • discord user avatar
    denolfe
    11 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
    generator10111 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
    markatomniux11 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
    generator10111 months ago
  • default discord avatar
    markatomniux11 months ago

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

  • default discord avatar
    generator10111 months ago

    No, but i was thinking of using it in future

  • default discord avatar
    markatomniux10 months ago

    @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
    10 months ago

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

  • default discord avatar
    fatso88558 months ago

    Re-opening this conversation. I followed how all the above was built but I get an error when building my project:



    my build commands from

    package.json

    :


    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
     "build:server": "tsc",


    the error I get:


    src/email/transport.ts(104,62): error TS2339: Property 'error' does not exist on type 'CreateEmailResponse'.


    Any help would be appreciated.



    I fixed the

    tsc

    compiler error.



    For anyone else who comes across this:



    replace the

    if

    block on line 103 with this:



    if ('error' in sendResponse as any) {
        return callback(
            new Error('Error sending email', { cause: (sendResponse as any).error}),
            null
        )
    }
  • default discord avatar
    aaronksaunders8 months ago

    is there any place where there is a complete example on how to implement this? I seem like a series of snippets from seperate comments and I am not sure which ones are needed for a complete solution?

  • discord user avatar
    denolfe
    8 months ago

    Are you attempting to use Resend specifically or another provider?

  • default discord avatar
    aaronksaunders8 months ago

    Resend

  • discord user avatar
    denolfe
    8 months ago

    Resend recently released this example for nodemailer:

    https://github.com/resendlabs/resend-nodemailer-smtp-example


    You'd then pass the transport into the init function as the docs say here:

    https://payloadcms.com/docs/email/overview#use-a-custom-nodemailer-transport


    Poaching some snippets from both pages:



      const transport = nodemailer.createTransport({
        host: 'smtp.resend.com',
        secure: true,
        port: 465,
        auth: {
          user: 'resend',
          pass: 're_123456789',
        },
      });


    payload.init({
      email: {
        fromName: 'Admin',
        fromAddress: 'admin@example.com',
        transport,
      },
      // ...
    })
  • default discord avatar
    aaronksaunders8 months ago

    That’s what I did 👍🏿 - just wasn’t sure if that was the best approach since it seemed too simple and there was such a long thread

  • default discord avatar
    markatomniux8 months ago

    I have an article that you can use to get started too. Be aware though, it uses Payload V1, so there may be some slight differences;



    https://www.omniux.io/blog/payload-react-email-create-dynamic-emails
  • default discord avatar
    aaronksaunders8 months ago

    Thanks, The transport configuration is all that is really needed for the basics, will take a look if I decide I need something more complex

  • default discord avatar
    markatomniux8 months ago

    No worries, the article include transport setup with resend too 😊

  • default discord avatar
    manny_494618 months ago

    Thank y'all for this, really helped me set up Resend on Payload

  • default discord avatar
    generator1015 months ago

    @Mark | Omniux do you have one for version 2? I am upgrading my payload from 1 to 2 and although I am sending emails, I get errors



    ERROR (payload): Failed to send mail to [EMAIL], subject: Reset your password


    err: {


    "type": "Error",


    "message": "Error sending email",


    "stack":


    Error: Error sending email



    oh looks like resend also updated their package

    https://resend.com/docs/send-with-nodejs

    , I updated it to

    const { error } = await resend.emails.send

    in case some one comes to this error

  • default discord avatar
    markatomniux5 months ago

    thanks @generator101, i'm going to be reviewing this example in a few weeks as I will be implementing a slightly more advanced version with Payload 2

  • default discord avatar
    macca985 months ago

    Hello everyone! I don't know if it's the right thread but I'll try anyway, I'm using Resend alongside with nodemailer and payload to send emails. I configured the transport as described by @denolfe , then I've put inside a

    beforeOperation

    hook the

    payload.sendEmail({})

    line (it's just for testing), but the Email is not being sent. I tried if Resend standalone it's working through their library and it is, I also tried to use nodemailer standalone and it's working, but from Payload it doesn't send any email (I'm testing it in development environment), does some of you have any suggestions?



    Update, it works:


    I've put the

    from

    key into the

    payload.sendEmail({})

    message and now it works, but from the documentation here (

    https://payloadcms.com/docs/email/overview#sending-mail

    ) it says it's not needed, since is setup into the

    email

    field inside

    payload.init

    , any thoughts on this?



    Update 2: using

    payload.sendEmail({})

    as described in update1 works, but it doesn't fire the verify email on collection creation (I've put

    verify

    on true in the collection)

  • discord user avatar
    denolfe
    5 months ago

    @Macca I'd say go ahead and create an issue on GitHub, and we can update the docs if necessary

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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