Remix-env NPM | npm.io

remix-env

Easy way to use process.env in your Remix apps

Setup

Run npm install remix-env or yarn add remix-env
Add EnvProvider in entry.client.tsx and entry.server.tsx

entry.client.tsx

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
+     <EnvProvider>
        <RemixBrowser />
+     </EnvProvider>
    </StrictMode>
  );
});

entry.server.tsx

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(
+   <EnvProvider>
      <RemixServer context={remixContext} url={request.url} />
+   </EnvProvider>
  );
}

Add InjectEnv in root.tsx

root.tsx

export function Root() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
+       <InjectEnv />
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Usage

Now, You can use the getEnv to get your env

const env = getEnv()

// app/routes/_index.tsx
export default function IndexRoute() {
  return (
    <div>
      {env.PUBLIC_ENV_FOO}
    </div>
  );
}

Configuration

By default this library will inject all environment variables with prefix PUBLIC_ENV_ to the browser.

But you can customize it by provide the filter function at EnvProvider.

<EnvProvider filter={(key, value) => key.startsWith("PUBLIC_ENV_")}>
  ...
</EnvProvider>

remix env

@infinitebrahmanuniverse/nolb-remi @everything-registry/sub-chunk-2648

8 months ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago