Where are cloudflare pages environment variables attached?

[targetlucked69]

I have a file and when I log process.env.MY_KEY or import.meta.env.MY_KEY, it is undefined. I'm calling it inside a page like this:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_hello')({
  beforeLoad: ({ context }) => {
    console.log(process.env.MY_KEY);
    console.log(import.meta.env.MY_KEY);
  },
})

and here's my wrangler.toml file

name = "tanstack-start-example"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2024-11-25"

[vars]
MY_KEY = "some-test-string"

and my app.config.ts

import { defineConfig } from '@tanstack/start/config'
import { cloudflare } from 'unenv'

export default defineConfig({
  server: {
    preset: "cloudflare-pages",
    unenv: cloudflare,
  },
});

This works with other deployments btw, just wrangler and deployment to CF pages.

How do I get access to env variables?

[wobsoriano]

You can access the CF env variables inside event context:

import { getContext } from 'vinxi/http'

// below should be called inside an `eventHandler`
const cf = getContext('cloudflare')
console.log(cf.env.MY_KEY)

[mattymattdev]

I am struggling to get your implementation working. getContext('cloudflare') returning null for me. I am calling in a server function, but am not sure what you mean by "eventHandler." Could you help me by elaborating on what to do here? Thank you.

[ShooTeX]

I'm a bit confused here, if I understand correctly nitro is the production server, so reading through the nitro documentation, nitro should allow us to use import.meta.env universally or am I missing something?

https://nitro.build/deploy/providers/cloudflare#environment-variables

[targetlucked69]

Same here. While the suggestion of @wobsoriano works, I'm not sure why the CF env vars are not injected automatically to import.meta.env since it just uses Nitro under the hood?

[wobsoriano]

I think it might be related to server side env vars