Trying to figure out D1/Worker/Page Issue
I have a marketing web page which is buit on astro, and has a single react component for a CTA form. The form submits data right now (name and email) to an endpoint /api/signup. This endpoint is, right now, an astro endpoint located at {root}/src/pages/api/signup.ts.
in my web browser, http://localhost:4321/, the astro page loads perfectly, but when I submit the form I get an error, but it's all because the back-end server is not handling it properly.
I am hosting the astro webapp in a cloudflare page and it is connected to my github repo. Builds are running fine.
I have a wrangler.toml file as well, where I have defined my D1 instance (this is where I aim to store the contacts submitted via the CTA form), and I have it defined to my {root}/src/pages/api/signup.ts is the main entry point. When I use npx wrangler dev and disable the local mode, I can POST to http://localhost:8787/api/signup with dummy data and it writes to the D1 database with no issue. If I try and submit this via the web app browser interface. I guess I am confused as to what may be going wrong here, and given my goals, if I'm even on the right path.
If I stream the CF Page function logs, I get this when I try and post the form data from the CF page:
{
"message": [
"Error adding contact:",
"TypeError: Cannot read properties of undefined (reading 'D1_CONTACTS')"
],
"level": "error",
"timestamp": 1710273694590
}
I just created a CF Worker just to see what this is all about, and haven't explored this too much yet. Am I on the right path? Does anyone have advice for me?
6 Replies
Have you added the D1 database to your page project via the dashboard. Pages won’t take it from wrangler file.
Hi @Cyb3r-Jok3 - yeah, in the page settings > functions > D1 database bindings it's configured there.
I guess I'm confused as to whether or not I need to have a service binding, and/or use a separate worker altogether, or if I can do everything I aim to with just a single Page instance and a function with the D1 bindings. It works via wrangler CLI and using postman, just not from my webapp locally or from the CF page. Wondering if it's maybe CORS or something else?
Is postman hitting your function directly or hitting the local dev instance.
Do you have a D1 database bound for both preview and production deployments
local dev instance (http://localhost:8787/api/signup) which is via wrangler. Yes I have it for both preview and production.
I think I know what's wrong, but I don't yet know how to fix it. I'm authenitcated to CF via the wrangler CLI. So when interfacing with http://localhost:8787/api/signup it works fine. I tried sending the same data I was using in Postman from my Astro webapp targeting http://localhost:8787/api/signup but I get the CORS error. I am thinking that my webapp has no idea how to interface with the D1 environment.
which, I get why this woudln't work locally. But I would imagine it would/should work within CF once I do a git commit and the deployment/build is done. I'm probably missing something simple.
Weird that error typically means that the binding isn’t available to running application.
I ran a buid command locally to see what was contained within the /dist. I've tried both 'advanced' and 'directory' mode on my astro.config.mjs and neither one brings in my functions which I have created within the /functions root folder.