Pages + Functions or Pages + Worker (How to dev full-stack locally)
I'm trying to create a "simple" form with form submission.
Ideally what I'd like to do is create my form locally, projects/mysite.com/index.html.
Then ,create all the form handling and CSRF token, turnstile logic under projects/mysite.com/src/index.ts.
Then, configure the .toml file to route the worker under api.mysite.com/contact
But I'd also like to do everything locally before pushing to GitHub & deploy to CF.
Initially I was running a http-server for /website and wrangler dev for the worker. With a node server proxy in the middle.
But I'm following some tutorials that are talking about running functions within a functions directory under a static page setup and then pushing to CF and letting CF dictate the handling of routes.
I'm just not sure if this is something I can do and run locally?
I'm also not sure if what I'm doing would be considered best practice, there's not a whole of documentation on running the full-stack development locally.
7 Replies
Personally I use wrangler for local dev and cloudflare tunnels to make it available on an https domain.
npx wrangler pages dev . --compatibility-flags="nodejs_compat"
That makes the directory your in served up as a pages project on localhost:8788
Then I have a tunnel that points to my local machine's port 8788
I start it like this:
cloudflared tunnel run <ID of your tunnel>
Then you can hit your pages via the hostname you configured in your tunnel. eg: https://subdomain-devel.example.com and that gets routed to your localhost:8788 which is being served by wrangler.
Hope that helps
Interesting, and in your setup are do you use a functions directory instead of a seperate worker directory?
Yes, I use a functions directory.
Would you mind sharing your wrangler.toml with me, I'm trying to replicate this or is there a documentation on how to setup toml correctly for local dev.
I don't have a local wrangler.toml, I'm just using the ability to configure things via the dashboard.
I found the page here https://developers.cloudflare.com/pages/functions/local-development/ that led me to the "npx wrangler pages dev ." command.
Cloudflare Docs
Local development · Cloudflare Pages docs
Run your Pages application locally with our Wrangler Command Line Interface (CLI).
And this was where I learned to configure the tunnel with a fixed hostname: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/configure-tunnels/local-management/
Cloudflare Docs
Locally-managed tunnel · Cloudflare Zero Trust docs
If you set up your tunnel through the CLI, the tunnel runs as an instance of cloudflared on your machine. You can configure cloudflared properties by …
Thanks I'll look into setting up that tunnel!