Environment variables in the browser with React Context #8704

ris314 · 2024-02-07T16:34:17Z

ris314
Feb 7, 2024

I've read https://remix.run/docs/en/main/guides/envvars for the recommended way to expose environment variables in the browser.

I am taking a slightly modified approach and wanted to share it here.

First, I defined app/providers/client-environment as:

import { createContext, useContext } from 'react';

export interface ClientEnvironment {
  // dummy vars here just to have something generic to illustrate the point
  something: string,
  anotherThing: string
}

const ClientEnvironmentContext = createContext<ClientEnvironment | null>(null);

export const ClientEnvironmentProvider = ({
  children,
  value,
}: {
  children: React.ReactNode;
  value: ClientEnvironment;
}) => {
  return (
    <ClientEnvironmentContext.Provider value={value}>
      {children}
    </ClientEnvironmentContext.Provider>
  );
};

export const useClientEnvironment = (): ClientEnvironment => {
  const context = useContext(ClientEnvironmentContext);

  if (!context) {
    throw new Error(
      'useClientEnvironment must be invoked within a ClientEnvironmentProvider.'
    );
  }

  return context;
};

Then, the client environment provider can be utilized in the root:

import { cssBundleHref } from '@remix-run/css-bundle';
import { type LinksFunction } from '@remix-run/node';
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from '@remix-run/react';
import {
  type ClientEnvironment,
  ClientEnvironmentProvider,
} from '~/providers/client-environment';

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
];

export function loader(): ClientEnvironment {
  // Export environment variables needed by the client side. Do not export any secrets!
  return {
      something: process.env.SOMETHING!,
      anotherThing: process.env.ANOTHER_THING!,
  };
}

export default function App() {
  const clientEnvironment = useLoaderData<ClientEnvironment>();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
          <ClientEnvironmentProvider value={clientEnvironment}>
            <Outlet />
          </ClientEnvironmentProvider>
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
      </body>
    </html>
  );
}

Now that the root wraps the Outlet within ClientEnvironmentProvider, any route and component downstream can use useClientEnvironment:

import { useClientEnvironment } from '~/providers/client-environment';

export default function SomeComponent() {
  const { something, anotherThing } = useClientEnvironment();

  return (
    <div>
      Something is {something} and Another Thing is {anotherThing}
    </div>
  );
}

It is easy enough to do this in individual projects, but there also might be an opportunity to streamline the ClientEnvironmentProvider and useClientEnvironment so that they are exported from one of remix modules if you find my approach valuable.

sergiodxa · 2024-02-07T16:36:47Z

sergiodxa
Feb 7, 2024
Maintainer

If you return the env variables always from your root loader, you can use the useRouteLoaderData hook to access it anywhere without creating a separate context.

// app/root.tsx
export async function loader() {
  return json({
    env: {
      something: process.env.SOMETHING!,
      anotherThing: process.env.ANOTHER_THING!,
    }
  });
}

// rest of the root code here

Then you can create a hook to access env like this:

import { useRouteLoaderData } from "@remix-run/react";

import type { loader } from "~/root";

export function useEnv() {
  let data = useRouteLoaderData<typeof loader>("root")!;
  return data.env;
}

2 replies

ris314 Feb 7, 2024
Author

Cool, thanks for that tip!

ris314 Feb 7, 2024
Author

I really like this approach. It seems more idiomatic compared to what is currently documented at https://remix.run/docs/en/main/guides/envvars. Would you consider updating the docs with this info?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Environment variables in the browser with React Context #8704

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Environment variables in the browser with React Context #8704

ris314 Feb 7, 2024

Replies: 1 comment · 2 replies

sergiodxa Feb 7, 2024 Maintainer

ris314 Feb 7, 2024 Author

ris314 Feb 7, 2024 Author

ris314
Feb 7, 2024

Replies: 1 comment 2 replies

sergiodxa
Feb 7, 2024
Maintainer

ris314 Feb 7, 2024
Author

ris314 Feb 7, 2024
Author