pages environment vars

hey guys i posted a question on reddit before remembering discord, maybe you can help out.

https://www.reddit.com/r/CloudFlare/comments/18shs8h/how_to_work_with_environment_variables_in_pages/
hey everyone,

i made my first site, and i'm hoping to make the code public on my github repo.

the site is hosted with cloudflare pages and workers.

the workers part is easy: i just have a wrangler.toml file that holds a bunch of variables and i pass them through the context in the workers.

but for example, i'm also using the clouflare turnstile - and it requires a site key to be run from the client side. right now, i have it literally sitting in a .ts file.

when i go to Workers & Pages for the static webapp, there is a section for Environment variables... but how do i extract those into the actual code.

let's say i have:

async function renderTurnstile(){
    let turnstileToken;
    const renderParams = {
        sitekey: CLDFLR_SITEKEY_TO_USE,
        callback: async function(token: any) {
            turnstileToken = token;
            turnstileTokenStore.set(token);
            await tick();
            console.log(
Challenge Success ${token}
);
        },
        theme: 'dark',
        appearance: 'interaction-only'
      };

right now im using:

import { CLDFLR_SITEKEY_TO_USE } from '../routes/DevOrProd.ts'

which is definitely not recommended.

can anyone share how i would load the environment variables i save on the cloudflare website.

(also would be great if it were possible to have something similar to a wrangler.toml for the static app to hold the vars)
Reddit
Explore this post and more from the CloudFlare community
Was this page helpful?