remix-pages-context
This package lets you use Cloudflare Pages' environment variables and KV-backed sessions more easily. Some setup is requried.
Install
npm install remix-pages-context
server.ts
Set up - Create a typed context object, passing in Zod schemas for your ENV variables and session values
- Destructure
getLoadContext
andgetPagesContext
off the object - Pass
getLoadContext
intocreatePagesFunctionHandler
- Use
getPagesContext
anywhere you want to access your typed ENV variables and session values
import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
import * as build from "@remix-run/dev/server-build";
import { createTypedPagesContext } from "remix-pages-context";
import { z } from "zod";
export let contextSchema = z.object({
SESSION_SECRET: z.string(),
// other ENV vars...
});
export let sessionSchema = z.object({
someValue: z.string().optional(),
});
export let { getLoadContext, getPagesContext } = createTypedPagesContext({
contextSchema,
sessionSchema,
});
const handleRequest = createPagesFunctionHandler({
build,
mode: process.env.NODE_ENV,
getLoadContext,
});
export function onRequest(context: EventContext<any, any, any>) {
return handleRequest(context);
}
Optional Typed Sessions
If you provide a Zod schema for sessionSchema
like this:
createTypedPagesContext({ contextSchema, sessionSchema })
…you will get a typed session from Remix Utils.
KV Session
Enable Cloudflare KV session storage when you create a KV namespace named KV
and
an environment variable named SESSION_SECRET
. The factory function takes a
second param of CookieOptions
if you want to customize the underlying cookie
that's used for the session storage.
Use the context
In loaders, you can access context
along with request
and params
, but it won't be typed. Better to use it like this:
export let loader = async() {
let { env, sessionStorage } = getPagesContext();
}
Then, in any other module, call getPagesContext()
to access the context set in server.ts
.
Limitations
If you call getPagesContext()
in a *.server.ts
module, you need to call it in a function because it will be undefined
until the loader
in root.tsx
is run.
// foo.server.ts
import { getPagesContext } from "server";
export let foo = async () => {
let { env, sessionStorage } = getPagesContext();
// do something with context
};