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?
Was this page helpful?