Wrangler environment variables are undefined

I followed the Astro guide (https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site/) and I tried setting an env var in wrangler.json and accessed it with Astro.locals.runtime.env.MY_VARIABLE and it works in dev but it is undefined in preview/build.
Steps to reproduce:
1. Create the project with

yarn create cloudflare my-astro-app --framework=astro --platform=pages

yarn create cloudflare my-astro-app --framework=astro --platform=pages

2. Uncomment the like

"vars": { "MY_VARIABLE": "production_value" },

"vars": { "MY_VARIABLE": "production_value" },

in wrangler.json and add the comma above it.
3. Make the start of src/components/Welcome.astro the following:

---
import astroLogo from "../assets/astro.svg";
import background from "../assets/background.svg";

const myVar = Astro.locals.runtime.env.MY_VARIABLE;
---

<div id="container">
    {myVar}

---
import astroLogo from "../assets/astro.svg";
import background from "../assets/background.svg";

const myVar = Astro.locals.runtime.env.MY_VARIABLE;
---

<div id="container">
    {myVar}

Any help would be much appreciated. Thanks

Cloudflare Docs

Astro

Astro is an all-in-one web framework for building fast, content-focused websites. By default, Astro builds websites that have zero JavaScript runtime code.

Cloudflare Developers•9mo ago

undefined

Wrangler environment variables are undefined

yarn create cloudflare my-astro-app --framework=astro --platform=pages

yarn create cloudflare my-astro-app --framework=astro --platform=pages

2. Uncomment the like

"vars": { "MY_VARIABLE": "production_value" },

"vars": { "MY_VARIABLE": "production_value" },

in wrangler.json and add the comma above it.
3. Make the start of src/components/Welcome.astro the following:

---
import astroLogo from "../assets/astro.svg";
import background from "../assets/background.svg";

const myVar = Astro.locals.runtime.env.MY_VARIABLE;
---

<div id="container">
    {myVar}

---
import astroLogo from "../assets/astro.svg";
import background from "../assets/background.svg";

const myVar = Astro.locals.runtime.env.MY_VARIABLE;
---

<div id="container">
    {myVar}

Any help would be much appreciated. Thanks

Cloudflare Docs

Astro

Astro is an all-in-one web framework for building fast, content-focused websites. By default, Astro builds websites that have zero JavaScript runtime code.

Wrangler environment variables are undefined

Similar Threads

Wrangler environment variables are undefined

Similar Threads

Similar Threads

Similar Threads