Cloudflare Pages Environment Variables are not set through vite.define

[awwong1]

What version of astro are you using?

1.5.0

Are you using an SSR adapter? If so, which one?

Cloudflare

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

The Astro Cloudflare Adapter docs state that I can set Cloudflare Environment variables.

export default {
  vite: {
    define: {
      'process.env.MY_SECRET': JSON.stringify(process.env.MY_SECRET),
    },
  },
}

I have a local .dev.vars file containing:

GITHUB_CLIENT_ID = "foobar"

I have verified that this environment variable is correctly being served through a pages function:

export const onRequest: PagesFunction<Env> = async (context) => {
  return new Response(context.env.GITHUB_CLIENT_ID);
};

I have updated my astro.config.mjs file to contain

// https://astro.build/config
export default defineConfig({
  output: "server",
  vite: {
    define: {
      '__GITHUB_CLIENT_ID': process.env.GITHUB_CLIENT_ID,
    }
  }
});

Unfortunately I see that __GITHUB_CLIENT_ID is always undefined.

EDIT:
The vite define approach works only if I explicitly set the bash variable prior to running npm run build or npm run preview. I expected the CloudFlare adapter to derive the environment variables from the Cloudflare wrangler context.

export GITHUB_CLIENT_ID='"foobar"' npx astro build && npx wrangler pages dev ./dist/

---

See also:

• https://github.com/udiaca/u0.vc/compare/main...gh-oauth
• https://fcda727e.u0-vc.pages.dev/en/authenticate
  • Expecting the clientId parameter not to be undefined
• https://fcda727e.u0-vc.pages.dev/env/github_client_id

Link to Minimal Reproducible Example

https://github.com/udiaca/u0.vc/compare/main...gh-oauth

Participation

• I am willing to submit a pull request for this issue.

[arstnei0]

have you tried import.meta.env.MY_SECRET? This is the default method to use env variables in vite

[awwong1]

have you tried import.meta.env.MY_SECRET? This is the default method to use env variables in vite

I have tried this approach. For the above example:

import.meta.env.GITHUB_CLIENT_ID;
// undefined
import.meta.env.__GITHUB_CLIENT_ID;
// undefined

[AirBorne04]

Hi, this is a little bit of a mixup. There are two different env vars in the game here.

I have a local .dev.vars file containing:

GITHUB_CLIENT_ID = "foobar"

I have verified that this environment variable is correctly being served through a pages function:

export const onRequest: PagesFunction<Env> = async (context) => {
  return new Response(context.env.GITHUB_CLIENT_ID);
};

this is the full cloudflare (-only) way of defining and accessing env vars.

The Astro Cloudflare Adapter docs state that I can set Cloudflare Environment variables.

export default {
  vite: {
    define: {
      'process.env.MY_SECRET': JSON.stringify(process.env.MY_SECRET),
    },
  },
}

this is the full astro (-only) way of defining and accessing env vars.

Unfortunately this is not currently compatible with each other. We are currently discussing a way to fix this and merge them together inside the Astro environment (there is not much to be done for a native cloudflare function as this is out of Astros hand)

[maxcountryman]

@AirBorne04 when you say there's an Astro only and Cloudflare only method what do you mean by that? If I have env vars I want to use in an endpoint, how do I do that? This is pretty confusing since the docs state that the Vite define method is what you're supposed to use with the cf adapter. However in practice those variables when accessed through import.meta.env are not defined when deployed to Cloudflare Pages (at least in my endpoint). Even more confusingly is when run via the wrangler preview method the env vars are set and do work. This is all terribly difficult to work with.

[AirBorne04]

hi @maxcountryman, yes it is a little confusing at the moment. there are basically 2 worlds which are currently kind of existing in parallel with the Cloudflare deployments.

1. You can build an API route the astro way this gives you access to all the Astro vars. The adapter (in directory mode) is compiling the astro bits and pieces into the functions folder [[path]].js file.
2. You can use the native Cloudflare functions that you can define in the functions folder by yourself, there you can access the Cloudflare runtime (vars, KV, DO, R2) but since it is not compiled by the adapter there is no access to the env vars defined in the astro build.

Therefore those two worlds are living aside each other, but i am working on the PR #5103 to enable access to the Cloudflare runtime from the Astro world.

[maxcountryman]

Unfortunately 1 doesn't seem to work at all. Other folks in Discord are reporting the same issue.

[awwong1]

Closing this issue now that #5103 is merged