Environment variables not available in React app

Developers Cloudflare Pages
1

I am trying to make my turnstile sitekeys available in my react app so I can test my preview and prod environments. I defined my wrangler.toml file as follows

pages_build_output_dir = "./build"

[vars]
REACT_APP_TURNSTILE_KEY = "previewsitekey"

[env.production.vars]
REACT_APP_TURNSTILE_KEY = "prodsitekey"

but I don’t see either variable available in process.env. I created a .env file to test and REACT_APP_ varaibles are accessible through that but I don’t think my native react app can differentiate between preview and prod environments, only test/dev/production.

any ideas?

2

process.env is for Node. In Pages Functions they will be on the context object passed to your handler. So, context.env.REACT_APP_TURNSTILE_KEY, assuming context is the object passed into the handler.

3

This isn’t in a Pages Function, this is in a React component so it’s purely in the frontend

4

ahh, found out that I can use a turnstile for multiple domains so I don’t need to send both sitekeys

5

Cool. For future reference if it comes up again, in a client-side React component, the “environment” is the browser, so your variables don’t exist. You would need to have your build process bake them in at build time. For example Vite exposes them in its own way. But, of course this means the values end up in your client-side code and thus you can’t do this for anything that needs to be secret.