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.
No description
44 Replies
sia
siaOP4mo 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
Hard@Work4mo ago
Just to confirm, are you doing this with pages dev or pages deploy?
sia
siaOP4mo ago
npx wrangler pages dev _site --compatibility-flags='nodejs_compat' and also in my wrangler.toml file compatibility_flags = [ "nodejs_compat" ]
sia
siaOP4mo 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
No description
Hard@Work
Hard@Work4mo ago
Yeah, that one is because it isn't supported locally You need to deploy it for it to work
sia
siaOP4mo ago
ah ok
Hard@Work
Hard@Work4mo ago
+ Make sure the binding is actually configured
sia
siaOP4mo 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)
sia
siaOP4mo ago
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
Hard@Work4mo 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 …
sia
siaOP4mo 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
Hard@Work4mo 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.
sia
siaOP4mo 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!
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 …
sia
siaOP4mo 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!
Also, Secrets should™️ be present at build time In your wrangler.toml? I’m not sure I understand
sia
siaOP4mo 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!
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
sia
siaOP4mo 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!
Yeah
sia
siaOP4mo 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!
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 };
sia
siaOP4mo ago
Sorry, where's the binding name used in that example? I'm not using typescript, just javascript
Hello, I’m Allie!
form_email Or whatever you set in the name field
sia
siaOP4mo 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 …
sia
siaOP4mo 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!
Ooohhh... Yeah, that's the binding What would you expect it to do, if it was supported locally?
sia
siaOP4mo ago
lol finally
Hello, I’m Allie!
Sorry, I misunderstood what you were asking
sia
siaOP4mo 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!
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
sia
siaOP4mo 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!
Fair point Going to raise that
sia
siaOP4mo ago
going to try dynamic imports
sia
siaOP4mo 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:
No description
sia
siaOP4mo 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!
!remind 5h
Flare
Flare4mo 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!
@Hard@Work
Hard@Work
Hard@Work4mo ago
Yeah, just checked internally, and it appears it isn't actually supported for pages at the moment, unfortunately
sia
siaOP4mo 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
sia
siaOP4mo 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 …
sia
siaOP4mo 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
Sebastian3mo 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
Want results from more Discord servers?
Add your server