updated | difficulty | content_type | pcx_content_type | title | tags | |
---|---|---|---|---|---|---|
2024-04-26 |
Beginner |
📝 Tutorial |
tutorial |
Send Emails With Resend |
|
{{}}
In this tutorial, you will learn how to send transactional emails from Workers using Resend. At the end of this tutorial, you’ll be able to:
- Create a Worker to send emails.
- Sign up and add a Cloudflare domain to Resend.
- Send emails from your Worker using Resend.
- Store API keys securely with secrets.
To continue with this tutorial, you’ll need:
- A Cloudflare account, if you don’t already have one.
- A registered domain.
- Installed npm.
- A Resend account.
Start by using C3 to create a Worker project in the command line, then, answer the prompts:
$ npm create cloudflare@latest
Alternatively, you can use CLI arguments to speed things up:
$ npm create cloudflare@latest email-with-resend -- --type=hello-world --ts=false --git=true --deploy=false
This creates a simple hello-world Worker having the following content:
---
filename: src/index.js
---
export default {
async fetch(request, env, ctx) {
return new Response('Hello World!');
},
};
If you don’t already have a Resend account, you can sign up for a free account here. After signing up, go to Domains
using the side menu, and click the button to add a new domain. On the modal, enter the domain you want to add and then select a region.
Next, you’re presented with a list of DNS records to add to your Cloudflare domain. On your Cloudflare dashboard, select the domain you entered earlier and navigate to DNS
> Records
. Copy/paste the DNS records (DKIM, SPF, and DMARC records) from Resend to your Cloudflare domain.
{{
}}If you need more help adding DNS records in Cloudflare, refer to Manage DNS records.
{{
}}When that’s done, head back to Resend and click on the Verify DNS Records
button. If all records are properly configured, your domain status should be updated to Verified
.
Lastly, navigate to API Keys
with the side menu, to create an API key. Give your key a descriptive name and the appropriate permissions. Click the button to add your key and then copy your API key to a safe location.
The final step is putting it all together in a Worker. Open up a terminal in the directory of the Worker you created earlier. Then, install the Resend SDK:
$ npm i resend
In your Worker, import and use the Resend library like so:
---
filename: src/index.js
---
import { Resend } from 'resend';
export default {
async fetch(request, env, ctx) {
const resend = new Resend('your_resend_api_key');
const { data, error } = await resend.emails.send({
from: 'hello@example.com',
to: 'someone@example.com',
subject: 'Hello World',
html: '<p>Hello from Workers</p>',
});
return Response.json({ data, error });
},
};
To test your code locally, run the following command and navigate to http://localhost:8787/ in a browser:
$ npm start
Deploy your Worker with npm run deploy
.
Sensitive information such as API keys and token should always be stored in secrets. All secrets are encrypted to add an extra layer of protection. That said, it’s a good idea to move your API key to a secret and access it from the environment of your Worker.
To add secrets for local development, create a .dev.vars
file which works exactly like a .env
file:
---
filename: .dev.vars
---
RESEND_API_KEY=your_resend_api_key
Also ensure the secret is added to your deployed worker by running:
---
header: Add secret to deployed Worker
---
$ npx wrangler secret put RESEND_API_KEY
The added secret can be accessed on via the env
parameter passed to your Worker’s fetch event handler:
---
filename: src/index.js
---
import { Resend } from 'resend';
export default {
async fetch(request, env, ctx) {
const resend = new Resend(env.RESEND_API_KEY);
const { data, error } = await resend.emails.send({
from: 'hello@example.com',
to: 'someone@example.com',
subject: 'Hello World',
html: '<p>Hello from Workers</p>',
});
return Response.json({ data, error });
},
};
And finally, deploy this update with npm run deploy
.