Cloudflare Developers•3w ago

Defining different Environments in wrangler.toml in Pages app

First Cloudflare project. I've been deploying a Pages app to a dev environment but want to configure/deploy to a Prod environment which will be a domain I have registered at Cloudflare. I have a function that performs a KV transaction so I wanted to configure the KV binding through a wrangler.toml file. Not sure exactly how it could end up working with routes but just to try something I wrote this in teh wrangler.toml file:

 name = "uvuli"
pages_build_output_dir = "./dist"

route = "https://uvuli-esketit.pages.dev/*"
vars = { ENVIRONMENT = "dev" }

kv_namespaces = [
  { binding = "EMAIL_LIST", id = "a16974f824054fb7b2457f7d13c5bfa5" }
]


[env.production]
vars = { ENVIRONMENT = "production" }
routes = [
  "uvuli.app/*",
]
kv_namespaces = [
  { binding = "EMAIL_LIST", id = "583b076b601d4dc49e13d8ddf47a574e" }
]

 name = "uvuli"
pages_build_output_dir = "./dist"

route = "https://uvuli-esketit.pages.dev/*"
vars = { ENVIRONMENT = "dev" }

kv_namespaces = [
  { binding = "EMAIL_LIST", id = "a16974f824054fb7b2457f7d13c5bfa5" }
]


[env.production]
vars = { ENVIRONMENT = "production" }
routes = [
  "uvuli.app/*",
]
kv_namespaces = [
  { binding = "EMAIL_LIST", id = "583b076b601d4dc49e13d8ddf47a574e" }
]

though when I try to deploy this, I get an error saying that Pages doesn't support route in its wrangler.toml file. So kind of a two part question...am I even configuring the environments in the correct way and if so, how do I define the environments?

2 Replies

Erisa•3w ago

Pages only supports preview and production environments, and routes isn't supported because custom domains are configured on the dashboard instead. The project.pages.dev will always run the latest production deployment (unless you redirect it elsewhere) while preview deployments will get URLs with unique IDs and also one based on branch name (e.g. abcdef.project.pages.dev and branchname.pages.dev) If that part makes sense, you would want to adapt your wrangler.toml so that it uses production(or the default) and preview environments with no routes, then add the custom domain on the dashboard. There's an example file here: https://developers.cloudflare.com/pages/functions/wrangler-configuration/#environment-specific-overrides

Cloudflare Docs

Configuration · Cloudflare Pages docs

If your project contains an existing wrangler.toml file that you previously used for local development, make sure you verify that it matches your …

richy.kandora•3w ago

ok I think it makes sense the environment set up is all a bit confusing especially because Pages and Workers act differently despite being seemingly similar. So essentially what I can do is use the preview environment as a staging type environment? is that typical best practice?

Gaming

Programming

Defining different Environments in wrangler.toml in Pages app