Cloudflare Developers•4mo ago

emails from functions

Hi there, I'm trying to set up my static page's contact form to send me an email with the form data. So I'm trying to do the steps on this page albeit with Functions instead of Workers, but apparently the mimetext package requires Node and attempting to set the node compatibility gives me the same errors when I try to run Wrangler https://developers.cloudflare.com/email-routing/email-workers/send-email-workers/ Is this example in that link just not possible? Or not possible in Functions but maybe possible in a Worker? I'm trying to do this as simply as possible, and I don't need an Airtable. I just want to send myself an email with the form data. I noticed the old pages plugin using a middleware is now deprecated. I'm open to other options.

44 Replies

siaOP•4mo ago

I was going to use the Akismet API to filter out spam but first I need to get a basic email system working moving over from netlify it makes me very sad that this isn't as easy as it is there. i'm trying to figure this out for myself but also so i can write a blog post and help other devs

Hard@Work•4mo ago

Just to confirm, are you doing this with pages dev or pages deploy?

siaOP•4mo ago

npx wrangler pages dev _site --compatibility-flags='nodejs_compat' and also in my wrangler.toml file compatibility_flags = [ "nodejs_compat" ]

siaOP•4mo ago

I was able to get rid of those errors by switching to "mimetext/browser" instead https://github.com/muratgozel/MIMEText?tab=readme-ov-file#use (Should probably update that doc page?) But now, I'm having issues with the cloudflare:email import

Hard@Work•4mo ago

Yeah, that one is because it isn't supported locally You need to deploy it for it to work

siaOP•4mo ago

ah ok

Hard@Work•4mo ago

+ Make sure the binding is actually configured

siaOP•4mo ago

need to figure out a way to test it before deploying I have this in my wrangler.toml but I was a bit confused about it from the docs - i have email forwarding set up in my dns

send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

for the "hi@" email is there an easy way in functions to only run code if it's in dev vs prod? that way I can split the code and still run wrangler locally, only triggering the email in prod but also can i set that binding directly in the interface and delete wranger.toml? I keep my site as open source, but the toml is showing my env secrets (downloaded the wrangler.toml with the npx command so the rest is already set in my pages config)

siaOP•4mo ago

re secrets, i can just do this in GH https://github.com/cloudflare/wrangler-action/issues/17#issuecomment-672686839

GitHub

wrangler.toml Secrets · Issue #17 · cloudflare/wrangler-action

Cannot see a way of keeping the Account ID and Zone ID a secret within github. The Github Actions secrets don't work within the file. I'm sure it's possible but I'm missing it in th...

Hard@Work•4mo ago

The wrangler.toml should not have anything secret, and thus is safe to publish. For values that aren't meant to be shared(API Keys, Names, etc.), you should use https://developers.cloudflare.com/pages/functions/bindings/#secrets

Cloudflare Docs

Bindings · Cloudflare Pages docs

A binding enables your Pages Functions to interact with resources on the Cloudflare developer platform. Use bindings to integrate your Pages Functions …

siaOP•4mo ago

It has my webmentions API secret which is used in the build step for the website not in functions I can figure that part out separately, but what I still need to know is 1. If this looks right for my bindings - inside my wrangler.toml:

send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

2. Is there an easy way to code split in a function based on dev vs prod environment I don't really understand what the bindings do as I can't see the binding name reused anywhere in the code i've seen

Hard@Work•4mo ago

For understanding the shape of bindings/how to call them, I would recommend using @cloudflare/workers-types

npm

@cloudflare/workers-types

TypeScript typings for Cloudflare Workers. Latest version: 4.20240725.0, last published: 6 days ago. Start using @cloudflare/workers-types in your project by running npm i @cloudflare/workers-types. There are 136 other projects in the npm registry using @cloudflare/workers-types.

siaOP•4mo ago

sorry my issue is i don't know what the binding is for since i don't see it reused anywhere. not what typescript types to use. therefore i can't confirm that i wrote the binding correctly

Hello, I’m Allie!•4mo ago

This? https://developers.cloudflare.com/workers/wrangler/configuration#email-bindings

Cloudflare Docs

Configuration - Wrangler · Cloudflare Workers docs

Use a wrangler.toml configuration file to customize the development and deployment setup for your Worker project and other Developer Platform …

siaOP•4mo ago

Yes that is similar to the doc I already linked. I don't know where the binding is used though

Hello, I’m Allie!•4mo ago

Also, Secrets should™️ be present at build time In your wrangler.toml? I’m not sure I understand

siaOP•4mo ago

They aren't currently configured as secrets because I didn't have a toml file before. They were just environment variables in my config in the dashboard

Hello, I’m Allie!•4mo ago

Yeah, sorry, I just meant that if you deploy them as secrets, then the rest of your wrangler.toml should be safe to be public

siaOP•4mo ago

when i ran npx wrangler pages download config it put my env vars in there so i guess i need to refactor that as secrets

Hello, I’m Allie!•4mo ago

Yeah

siaOP•4mo ago

so where are the send_email bindings used? I gave it a name so i figured that name would be used somewhere

Hello, I’m Allie!•4mo ago

Oh, you mean like a code example from within Functions? It would be accessible like so:

interface Env {
  form_email: SendEmail
  // Other Types and Bindings
}

const onRequest: PagesFunction<Env> = async (ctx) => {
  ctx.env.form_email // Here
  // ...
};
export { onRequest };

interface Env {
  form_email: SendEmail
  // Other Types and Bindings
}

const onRequest: PagesFunction<Env> = async (ctx) => {
  ctx.env.form_email // Here
  // ...
};
export { onRequest };

siaOP•4mo ago

Sorry, where's the binding name used in that example? I'm not using typescript, just javascript

Hello, I’m Allie!•4mo ago

form_email Or whatever you set in the name field

siaOP•4mo ago

why can't i find a doc with this info? the name for binding doesn't show up anywhere in the example here https://developers.cloudflare.com/email-routing/email-workers/send-email-workers/

Cloudflare Docs

Send emails from Workers · Cloudflare Email Routing docs

You can send an email about your Worker’s activity from your Worker to an email address verified on Email Routing. This is useful for when you want to …

siaOP•4mo ago

Or is it SEB in this line?

await env.SEB.send(message);

await env.SEB.send(message);

Though at this point I'm not sure I want to do this at all. I'm not comfortable only being able to test in production. Like what's the point of local wrangler dev if the entire thing breaks if I add an email feature

Hello, I’m Allie!•4mo ago

Ooohhh... Yeah, that's the binding What would you expect it to do, if it was supported locally?

siaOP•4mo ago

lol finally

Hello, I’m Allie!•4mo ago

Sorry, I misunderstood what you were asking

siaOP•4mo ago

i'd expect it to do the same thing as in production. so i can test if my form function actually works. and then add in the spam filtering api

Hello, I’m Allie!•4mo ago

The biggest issue is, you can't send emails from your local machine Or at least, if you try to, you are very likely to end up in spam

siaOP•4mo ago

actually i could try to detect the env and just not send, but the problem is the dependencies fail locally import { EmailMessage } from "cloudflare:email"

Hello, I’m Allie!•4mo ago

Fair point Going to raise that

siaOP•4mo ago

going to try dynamic imports

siaOP•4mo ago

Ok I got dynamic imports working successfully so that it skips over the email bit when in dev. However, I'm getting errors in production:

siaOP•4mo ago

In my wrangler.toml:

[env.production]
send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

[env.production]
send_email = [
  {type = "send_email", name = "form_email", destination_address = "[email protected]"},
]

Does this mean I cannot use send_email in functions? Maybe only in workers? Just checking in again - does this error mean I can't use email in functions?

Hello, I’m Allie!•4mo ago

!remind 5h

Flare•4mo ago

:zep_check: I will remind you in 5 hours at Aug 1, 2024 at 20:35 CEST Reminder for @HardlyWorkin': https://discord.com/channels/595317990191398933/1268242139188560056/1268562654952423434 Set <t:1722519305:R>

Hello, I’m Allie!•4mo ago

@Hard@Work

Hard@Work•4mo ago

Yeah, just checked internally, and it appears it isn't actually supported for pages at the moment, unfortunately

siaOP•4mo ago

I'm trying from a regular worker now and getting the same error. Perhaps that docs page is wrong? The first example shows:

send_email = [
    {type = "send_email", name = "<NAME_FOR_BINDING>", destination_address = "<YOUR_EMAIL>@example.com"},
]

send_email = [
    {type = "send_email", name = "<NAME_FOR_BINDING>", destination_address = "<YOUR_EMAIL>@example.com"},
]

But the latter example shows:

send_email = [
    {name = "<NAME_FOR_BINDING1>"},
       {name = "<NAME_FOR_BINDING2>", destination_address = "<YOUR_EMAIL>@example.com"},
       {name = "<NAME_FOR_BINDING3>", allowed_destination_addresses = ["<YOUR_EMAIL>@example.com", "<YOUR_EMAIL2>@example.com"]},
]

send_email = [
    {name = "<NAME_FOR_BINDING1>"},
       {name = "<NAME_FOR_BINDING2>", destination_address = "<YOUR_EMAIL>@example.com"},
       {name = "<NAME_FOR_BINDING3>", allowed_destination_addresses = ["<YOUR_EMAIL>@example.com", "<YOUR_EMAIL2>@example.com"]},
]

And no type property is in it

siaOP•4mo ago

When I remove that field, I no longer get the error. I haven't gotten email to work yet but at least that explains that error. I've only done this from the worker so far, not pages. Can you log a request to fix the example on this page? https://developers.cloudflare.com/email-routing/email-workers/send-email-workers/

Cloudflare Docs

Send emails from Workers · Cloudflare Email Routing docs

You can send an email about your Worker’s activity from your Worker to an email address verified on Email Routing. This is useful for when you want to …

siaOP•4mo ago

Got it working in the worker. Re-verified that functions still don't work because they don't support email. So I think the only action now is to fix that docs page to remove the type attribute

Sebastian•2mo ago

guessing this hasn't changed in the past month? i'm sick of mailchannels randomly breaking so i've been trying to figure out how to migrate to CF email worker but it's so needlessly convoluted and not working

Gaming

Programming

emails from functions