Project structure for functions and D1
I'm having a hard time understanding what the best practice is when it comes to implementing the cloudflare stack with a react app.
So currently I have a vite react app and the app is in /src
I have wrangler.jsonc in the root. I want to make functions that use D1. At first I saw you just make /functions and put the files in there. Seems good to me but I don't see where you configure D1 there without mixing it with the react app. I've also seen the /workers directory used too. Not sure which one to use or where to put D1 / drizzle config stuff.
3 Replies
Hi!
Did you start from scratch or use one of the starters, for instance: https://developers.cloudflare.com/workers/framework-guides/web-apps/react/
?
Cloudflare Docs
React + Vite
Create a React application and deploy it to Cloudflare Workers with Workers Assets.
You configure a binding to a D1 instance in wrangler.jsonc and when there is an incoming request, there will be an interface to interact with D1 in the request context.
If you want to build a React SPA without mixing D1 etc. in the React App you need to build some backend endpoints that the frontend can use.
I started with a normal vite + react app and then added CF later
my functions are my endpoints but i dont know where i put the D1 stuff in the project
I am reading the tutorial for existing vite projects
https://developers.cloudflare.com/workers/vite-plugin/tutorial/
this uses "workers" what is the difference betweens workers and functions
with functions all being different files wouldn't that mean requesting one only spins up that one function. with the workers it looks like it's all one.