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(

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'
      };

);
        },
        theme: 'dark',
        appearance: 'interaction-only'
      };

right now im using:

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

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)

From the CloudFlare community on Reddit

Explore this post and more from the CloudFlare community

Cloudflare Developers•3y ago

avnav

pages environment vars

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(

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'
      };

);
        },
        theme: 'dark',
        appearance: 'interaction-only'
      };

right now im using:

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

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

From the CloudFlare community on Reddit

Explore this post and more from the CloudFlare community

pages environment vars

Similar Threads

pages environment vars

Similar Threads

Similar Threads

Similar Threads