#How to use Resend as email provider?

42 messages · Page 1 of 1 (latest)

tough plaza
tough plaza
#

any docs about setting up this will be great

candid junco
#

Hey @tough plaza, 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.

#

You can strip out most things related to Payload Cloud custom domains and swap some env vars.

#

How to use Resend as email provider?

tough plaza
#

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

candid junco
#

Awesome!

#

@tough plaza 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

tough plaza
#

@candid junco sure, here is my transport

#

I configured it like this in server

# 
        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_DOMAIN=
RESENT_FROM_NAME=
RESENT_FROM_EMAIL=```
robust violet
#

Hey @tough plaza 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

tough plaza
robust violet
#

Thanks @tough plaza. Do you use React Email as well?

tough plaza
#

No, but i was thinking of using it in future

robust violet
#

@tough plaza 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 #1129596553011658943 message

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: '[email protected]',
    from '[email protected]',
    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!

React Email
HTML - React Email

A React html component to wrap emails.

candid junco
zealous leaf
#

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.

zealous leaf
#

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
    )
}
smoky shell
candid junco
smoky shell
#

Resend

candid junco
#

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: '[email protected]',
    transport,
  },
  // ...
})
smoky shell
#

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

robust violet
# smoky shell That’s what I did 👍🏿 - just wasn’t sure if that was the best approach since it...

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

Omniux
Payload & React Email: Creating dynamic emails for everyone

React email makes handling complex layouts a breeze. Combined with the power of PayloadCMS, you can create good-looking and dynamic emails for your customers.

smoky shell
robust violet
woeful slate
#

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

tough plaza
#

@robust violet 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

robust violet
#

thanks @tough plaza, 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

magic grail
# candid junco Poaching some snippets from both pages: ```ts const transport = nodemailer.cr...

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 @candid junco , 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?

magic grail
#

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)