access the cloudflare runtime in an astro js/ts en...
# pages-help
j
i've been trying to figure out the answer to this question for a couple days. the obvious answer finally dawned on me today, but since it's not in the @astrojs/cloudflare documentation, i want to share it here to save others time. if you're writing an astro endpoint in javascript or typescript, and want to access the cloudflare runtime, the example code doesn't work:
Copy code
import { getRuntime } from "@astrojs/cloudflare/runtime";
getRuntime(Astro.request);
from https://docs.astro.build/en/guides/integrations-guide/cloudflare/#access-to-the-cloudflare-runtime this sample code only works in
.astro
files where
Astro
is globally defined. instead, use the following to get access to the cloudflare runtime in a typescript endpoint:
Copy code
import type { APIContext } from 'astro'
import { getRuntime } from "@astrojs/cloudflare/runtime"

export async function get( context: APIContext ) 
{
  const rt = getRuntime( context.request )
  ...
  const id = context.params.id
  const val = await rt.env.MY_KV.get( id )
  ...
}
logging
rt
here will look something like this:
Copy code
rt = {
  functionPath: '/foo.json',
  params: [Object: null prototype] { path: [Array] },
  data: {},
  env: {
    MY_KV: KVNamespace {},
    ASSETS: Fetcher {},
    SITE: 'https://example.com',
    BASE_URL: '/hello',
    FOOBAR: 'SNAFU'
  },
  waitUntil: [Function: bound waitUntil],
  passThroughOnException: [Function: passThroughOnException],
  name: 'cloudflare',
  next: [AsyncFunction: next]
}
in my local dev environment, the bindings in
rt.env
from: 1.
.dev.vars
Copy code
SITE="http://example.com"
BASE_URL="/hello"
FOOBAR="SNAFU"
2.
wrangler.toml
Copy code
kv_namespaces = [
  { binding = "MY_KV", id = "...", preview_id = "..." }
]
hope this helps someone!
s
Thanks for posting this, I tried to build a test project with
astro build
and served with wrangler using
wrangler pages dev dist
to serve the built static files and it appears to be working fine. However, with the wrangler proxying the astro dev server, the
getRuntime
function returns
undefined
using
wrangler pages dev --proxy 3000 -- astro dev
. No idea what's wrong, any chance you got it to work with proxying? I created the project using C3 (create-cloudflare-cli)
s
When you proxy a request with pages dev by passing the command through, wrangler doesn't know of any functions existing, it just forwards your requests to the port exposed by your command. Because of this, it's unable to run it in the workers runtime, so you're not able to get any of the things that come with that, as astro's the one running it instead
You'd instead need to use
astro build --watch
in one terminal, and
wrangler pages dev <astro output directory>
in another
s
It would've been nice if there was something in the docs mentioning or pointing to how the wrangler proxying feature works. The Astro project c3-cli inits, contains a dev script that I assumed would just work out of the box as expected.
I just checked, and there is no mention of the
--watch
flag for the
astro build
command in their docs https://docs.astro.build/en/reference/cli-reference/#astro-build. I've also tested it out on the terminal in case docs would be out of sync, but it appears that it doesn't exist. I just ended up doing something similar using nodemon (https://discord.com/channels/595317990191398933/1091549559253123172/1091647088821010462) to watch for file changes and run the
astro build
command. There is a delay of a few seconds while the build runs which isn't that big of a deal but still a bit annoying sometimes.
s
Ah, I must have been thinking of astro check --watch, yeah, nodemon will be what you want then