Is there a better way to use environment variables with Cloudflare Pages?

[simonsinclair]

Hi Remix community,

I bootstrapped a Remix application (with npx create-remix@latest) for deployment to Cloudflare Pages, and have some findings to share and some questions to ask:

1. Handler context

I discovered I could set an 'environment variable' by modifying the Wrangler options:

package.json scripts

"dev:wrangler": "wrangler pages dev ./public --binding FOO=BAR --watch ./build",

Note: these can normally be set in a wrangler.toml file, but need to be passed as above for now.

I can access FOO in functions/[[path]].js from context.env. Then if I implement getLoadContext on handleRequest, I can return an object containing my environment variables, which are accessible from a Loader:

functions/[[path]].js

import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';

import * as build from '../build';

const handleRequest = createPagesFunctionHandler({
  build,
  getLoadContext: (context) => ({ env: context.env }), // ⬅️ 
});

export function onRequest(context) {
  return handleRequest(context);
}

root.tsx

export const loader = ({ context }) => {
  return {
    ENV: context.env,
  };
};

This also works in production – an environment variable set within https://dash.cloudflare.com/[id]/pages/view/[project]/settings/environment-variables is also accessible from the loader.

Most of what I've implemented above is the result of reading the createRequestHandler documentation (although it does not mention Cloudflare Pages), reverse engineering, and checking out repositories, gists, and comments from @kentcdodds, @sergiodxa, @jacob-ebey, and @edmundhung.

Is there a better way? Would it help to document this?

2. process.env

• Part of the reason I went down the route above is because the server was crashing when trying to access process.env. Is this a bug, or is process undefined because we're in a 'serverless' environment?
• Why doesn't {process.env.NODE_ENV === 'development' ? <LiveReload /> : null} (from root.tsx in the Remix template) cause any issues?

[sergiodxa]

Part of the reason I went down the route above is because the server was crashing when trying to access process.env. Is this a bug, or is process undefined because we're in a 'serverless' environment?

It’s undefined because process is a Node thing and Cloudflare Workers doesn’t use Node, they have a different runtime, in other Serverless platforms you could use process.

Why doesn't {process.env.NODE_ENV === 'development' ? : null} (from root.tsx in the Remix template) cause any issues?

This is because that specific line is being replaced with the value at build, so when running Remix in dev it will be replaced with the string development and when you build for production it will be replaced with the string production. You can consider it a special case, this is that way because a lot of packages rely on that env variable to change things, one example is React.

[simonsinclair]

Thanks, Sergio. It's really helpful to have this clarified.