Environment Variables | Loader Context

[almcaffee]

I need to access my environment variables in RR7 loaders to make api requests with api keys and or secrets within the loaders during ssr without exposing keys and secrets. After Migrating from Remix, I am no longer able to access any data from loader contexts nor is there any documentation on how to set the AppLoadContext besides typing it, which does nothing for actually using it. There are no examples how to do this in the docs for framework mode.

export async function loader({ context }: Route.LoaderArgs) {
  // Any attempt to access contextis empty
  // context.get?(key)
  // context[key]
  // Object.entries(context)
}

I have a .server file which contains env variable properties. This works well imported directly into my root loader, but these variables are needed in multiple loaders.
env.server.ts

// File includes all environment variables
export const API_KEYS = {
  camelCasedProperty: import.meta.env.ENV_VARIABLE_NAME;
}

... // Other security credentials onelogin, sentry, sanity, etc.
export default {
   apiKeys: API_KEYS;
   oneloginConfig: ...
   sentryConfig: ...
}

In Remix, we used a custom server.ts file, does this also work in RR7? I have tried this same approch in RR7 without luck. All examples only use the params so i'm assuming this may have been moved to vite? Literally no documentation exists on this with the upgrade from remix.
server.ts

import { createRequestHandler as createReactRouterRequestHandler } from 'react-router';
import ENV from 'env.server';
import { Logger } from '...';

// server.ts
export default {
  async fetch(request: Request): Promise<Response> {
    try {
      const handleRequest = createReactRouterRequestHandler(
        () => import('virtual:react-router/server-build'),
        process.env.NODE_ENV
      );

      const response = await handleRequest(request, ENV);

      return response;
    } catch (error) {
      const message =
        error instanceof Error
          ? error.message
          : String(error) ?? 'An unexpected error occurred';
      // eslint-disable-next-line no-console
      Logger.error(`server.ts fetch error: ${message}`);
      return new Response('An unexpected error occurred', { status: 500 });
    }
  },
};

Unstable Context
entry.client.tsx

import React, { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';
import { unstable_createContext } from 'react-router';
import { HydratedRouter } from 'react-router/dom';

import ENV, { type LoaderContext } from 'env.loader';

const envMap = new Map(Object.entries(LoaderEnv)) as Map<
  keyof LoaderContext,
  string
>;
const appLoadContext =
  unstable_createContext<Map<keyof LoaderContext, string>>(envMap);

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        unstable_getContext={() => appLoadContext}
      />
    </StrictMode>
  );
});

Current Solution

I am exporting a loader that processes the env where necessary.

env.server.ts

export const serverLoader = async (request: Route.LoaderArgs['request']) => {
  const session = await getSession(request.headers.get('Cookie'));
  const url = new URL(request.url);
  const userAgent = request.headers.get('user-agent');
  const token = session.get('token');
  ...otherProps
  const features = processFeatures(
    user,
    pathname: url.pathname,
    search: url.search,
  }); // processes some role based permissions and other private data
  return {
    apiKeys: API_KEYS,
    features,
    ...otherProps
  };
};

root.tsx

// TODO: env should be moved to a custom server file to be include with request context
export async function loader({ request }: Route.LoaderArgs) {
  const loaderData = await serverLoader(request);  
  return {
    ...loaderData,
  };
}

Although this works well, importing this loader to multiple components Is not the way I would like to take this a step forward and have these values available in the AppLoadContext. I have read several posts on this topic and they all mentioned typing the context and then seeing the values, whats missing in all these post is the part about populating the context. Once again RR7 framework mode out of the box.

react-router.config.ts

declare module 'react-router' {
  type AppLoadContext = Awaited<ReturnType<typeof serverLoader>>
}

package.json

{
  "name": "app-name",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc",
    "prepare": "husky",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix"
  },
  "dependencies": {
    "@aws-sdk/client-sesv2": "^3.272.0",
    "@babel/core": "^7.25.2",
    "@babel/plugin-syntax-flow": "^7.24.7",
    "@babel/plugin-transform-react-jsx": "^7.25.2",
    "@elgorditosalsero/react-gtm-hook": "^2.6.0",
    "@headlessui/react": "^1.7.13",
    "@heroicons/react": "^2.0.11",
    "@react-hook/media-query": "^1.1.1",
    "@react-router/node": "^7.6.0",
    "@react-router/serve": "^7.6.0",
    "@remix-run/node": "^2.16.2",
    "@sentry/react": "^9.5.0",
    "@sentry/react-router": "^9.15.0",
    "@sentry/remix": "^9",
    "@sentry/tracing": "^7.120.3",
    "@sentry/vite-plugin": "^3.4.0",
    "@shopify/shopify-api": "^2.1.0",
    "@tailwindcss/forms": "^0.5.0",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@tanstack/react-query": "^5.74.4",
    "@tsparticles/engine": "^3.8.1",
    "@tsparticles/react": "^3.0.0",
    "@twilio/conversations": "^2.6.0",
    "algoliasearch": "^4.13.0",
    "axios": "^1.8.2",
    "chart.js": "^3.7.1",
    "classnames": "^2.5.1",
    "conventional-changelog-cli": "^5.0.0",
    "eslint-config-airbnb": "^19.0.4",
    "isbot": "^5.1.17",
    "joi": "^17.13.3",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "luxon": "^3.1.1",
    "nanoid": "^3.3.1",
    "photoswipe": "^5.2.0-beta.4",
    "prop-types": "^15.8.1",
    "query-string": "^9.1.1",
    "react": "^19.0.0",
    "react-chartjs-2": "^4.1.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^19.0.0",
    "react-gtm-module": "^2.0.11",
    "react-hook-form": "^7.56.3",
    "react-infinite-scroll-component": "^6.1.0",
    "react-paginate": "^8.1.2",
    "react-photoswipe-gallery": "^2.1.0",
    "react-query": "^3.39.3",
    "react-router": "^7.6.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.2.2",
    "react-toastify": "^11.0.4",
    "recharts": "^2.13.0-alpha.5",
    "sass": "^1.57.1",
    "ts-debounce": "^4.0.0",
    "tsparticles": "^3.8.1",
    "universal-base64url": "^1.1.0",
    "vite-plugin-circular-dependency": "^0.5.0",
    "vite-plugin-devtools-json": "^0.1.0",
    "vite-plugin-environment": "^1.1.3",
    "vite-plugin-static-copy": "^2.3.0",
    "web-vitals": "^2.1.4",
    "zustand": "^5.0.5"
  },
  "devDependencies": {
    "@aws-sdk/client-sts": "^3.272.0",
    "@commitlint/cli": "^19.8.0",
    "@commitlint/config-conventional": "^19.8.0",
    "@react-router/dev": "^7.6.0",
    "@tailwindcss/postcss": "^4.0.14",
    "@tailwindcss/vite": "^4.0.0",
    "@types/algoliasearch": "^4.0.0",
    "@types/lodash": "^4.14.180",
    "@types/luxon": "^3.1.0",
    "@types/node": "^20",
    "@types/photoswipe": "^4.1.2",
    "@types/react": "^19.0.1",
    "@types/react-copy-to-clipboard": "^5.0.2",
    "@types/react-dom": "^19.0.1",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-paginate": "^7.1.1",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.41.0",
    "autoprefixer": "^10.4.3",
    "aws-sdk": "^2.1328.0",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.5.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx": "^0.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "husky": "^9.1.7",
    "lint-staged": "^15.5.0",
    "postcss-import": "^16.1.0",
    "postcss-load-config": "^6.0.1",
    "postcss-plugin": "^1.0.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^2.7.1",
    "react-router-devtools": "^1.1.0",
    "tailwindcss": "3.1.8",
    "typescript": "^5.7.2",
    "vite": "^5.4.19",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "resolutions": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  }
}

[sergiodxa]

You can use process.env in any server code to access your env variables

If you're using Cloudflare you can import env from cloudflare:workers to also access them without using the context.

[almcaffee]

You can use process.env in any server code to access your env variables

This has inconsistent results. Do you mean in any .server file?

[sergiodxa]

Any .server file runs server side only yes, but also loaders and actions run server side only, and any function run only inside a loader or actions will run server side only too

[sergiodxa]

In Remix, we used a custom server.ts file, does this also work in RR7?

Yes this also work on RR the same way as in Remix

[almcaffee]

Good to know I'm on the right path, please point me to any documentation on this if available or sample repos. Shopify Hydrogen does most of the heavy lifting for .env variables for our retail site, now im working on internal tools bringing remix/rr7 along with me.