Env vriables with Vite and Cloudflare, the new replace of getRuntime()

[Mahmoudgalalz]

What version of astro are you using?

Latest

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,

What browser are you using?

Chrome

Describe the Bug

I have no access to environment variables via cloudflare, and I do override the connection string an a ts file and import it in a route

What's the expected result?

I should be able to access the old getRuntime() out of the new usage Astro.Locals.runtime

as I cannot access this in the .ts files

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wj2hw8?file=src%2Fdb.ts

Participation

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

[natemoo-re]

Ah, I think this consideration was overlooked when switching to Astro.locals.runtime. Ideally import.meta.env should still work, though. IMO you shouldn't need to use getRuntime for this.

[alexanderniebuhr]

@Mahmoudgalalz getRuntime() should still be available as for now. We wanted to get feedback for potential issues, before removing it. However I don't quite get your issue, yet!

[matthewp]

I think @Mahmoudgalalz is saying that this is untyped. To type the locals you do this: https://docs.astro.build/en/guides/middleware/#middleware-types

[kelvinz]

I have a similar question, how can I access my cloudflare env variables at my API endpoint on the server?

Docs say,

import type { APIContext } from "astro";
import { getRuntime } from "@astrojs/cloudflare/runtime";

export async function get({request}: APIContext) => {
  const runtime = getRuntime(request);
  // the type KVNamespace comes from the @cloudflare/workers-types package
  const { MY_KV } = (runtime.env as { MY_KV: KVNamespace }));

  return {
    // ...
  };
};

But since getRuntime is gone, how do I access the env?

[ematipico]

Probably we should write a better documentation.

Inside an .astro file:

const runtime = Astro.locals.runtime;

Inside an endpoint

export function get(context) {
	const runtime = context.locals.getRuntime();
}

[kelvinz]

@ematipico this is the error I'm getting from ts, Property 'getRuntime' does not exist on type 'Locals'
when I try running const runtime = context.locals.getRuntime()

Also, I'm planning to do this, is this correct? const API_KEY = import.meta.env.DEV ? import.meta.env.API_KEY : runtime.env.API_KEY
So getting the api key from astro dev vs getting it from cloudflare env variables on server.

[ematipico]

@ematipico this is the error I'm getting from ts, Property 'getRuntime' does not exist on type 'Locals'
when I try running const runtime = context.locals.getRuntime()

My bad, it should be just runtime.

[kelvin-zhao]

There doesn't seem to be anything in runtime

[alexanderniebuhr]

There doesn't seem to be anything in runtime

Could you provide a Minimal Reproducible Example?
The CF Runtime is only available after the Requests are made.

[alexanderniebuhr]

It does work for me (https://github.com/alexanderniebuhr/smoggy-spiral), maybe you can either provide a Minimal Reproducible Example or compare the difference to your code. Also note, if you try to get it working with astro dev, that will not work. But that limitation is also existence for getRuntime()

• https://smoggy-spiral.pages.dev/
• https://smoggy-spiral.pages.dev/api/someFile

[ematipico]

There doesn't seem to be anything in runtime

Is it possible you checked that while running the Dev server? If so, that's expected.

You should see the info only if you build the project and deploy it to CF.

[kelvin-zhao]

So does this
const API_KEY = import.meta.env.DEV ? import.meta.env.API_KEY : context.locals.runtime.env.API_KEY
make sense to test and run on dev to make sure everything works before pushing it to test on server?
Or is there a better way to do development for such endpoints?
Btw I'm also getting this typescript error Property 'runtime' does not exist on type 'Locals'.

I'm also wondering if there is way to use CORS or someway to ensure that this API endpoint can only be run by my project and its domain?

Really thanks for the help thus far!

[ematipico]

@kelvin-zhao yeah that code makes sense

[kelvinz]

But how do you get rid of the typescript error?

[ematipico]

We are going to fix it in this PR: https://github.com/withastro/astro/pull/8190/files#diff-a74615b421da488d5e2bcf3e14c80732c192a374f51901a2064b3e2caef9d529