wee-brown

Accessing Cloudflare Pages Environment Variables

Hello, can someone please explain how I may access the environment variables within my Tanstack Start application, deployed to Cloudflare Pages? Where do I set up the Cloudflare context?

9 Replies

wee-brownOP•10mo ago

Maybe I'm on to something here https://github.com/nekochan0122/tanstack-start-with-cf-pages-basic-example/blob/main/app.config.ts @Aaron - thanks for this!

GitHub

tanstack-start-with-cf-pages-basic-example/app.config.ts at main · ...

Contribute to nekochan0122/tanstack-start-with-cf-pages-basic-example development by creating an account on GitHub.

eager-peach•10mo ago

:meow_coffee:

wee-brownOP•10mo ago

@Aaron Is this supposed to work with server-sided environment variables yet? 🤔

eager-peach•10mo ago

Cloudflare Pages will inject the private env vars in the request event context for public env vars, it will inject to import.meta.env so in Cloudflare Pages, if you want to initialize a lib, u might need to wrap them into a function and return it after initialized maybe you can save it on the globalThis

wee-brownOP•10mo ago

Is this the correct way to access?

const getServerEnv = createServerFn({
  method: "GET",
}).handler(async ({ context }) => {
  console.log("Context", context.cloudflare.env.ENV_VALUE_PLACEHOLDER);
});

const getServerEnv = createServerFn({
  method: "GET",
}).handler(async ({ context }) => {
  console.log("Context", context.cloudflare.env.ENV_VALUE_PLACEHOLDER);
});

eager-peach•10mo ago

no the context from server function is from middleware u need to use getEvent from vinxi api

wee-brownOP•10mo ago

Sorry I am new to Tanstack router in general. I've used CF Pages with Remix, and the context was put in differently. Ok - thanks will try this.

eager-peach•10mo ago

and do event.context.cloudflare.YOUR_ENV_VARS this is TanStack Start API btw Here is the channels for TanStack Start https://discord.com/channels/719702312431386674/1238170697650405547 https://discord.com/channels/719702312431386674/1240861643462934568

wee-brownOP•10mo ago

Good to know... yeah I am working w/ Tanstack start, just difficult to tell what's core to that and what's Tanstack router as they intertwine. Ah, seems that channel was hidden. Thanks again! Vinxi API worked!

Gaming

Programming

Accessing Cloudflare Pages Environment Variables

Did you find this page helpful?