Easy way to use process.env in your Remix apps
- Run
npm install remix-envoryarn add remix-env - Add
EnvProviderinentry.client.tsxandentry.server.tsx
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
+ <EnvProvider>
<RemixBrowser />
+ </EnvProvider>
</StrictMode>
);
});export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const markup = renderToString(
+ <EnvProvider>
<RemixServer context={remixContext} url={request.url} />
+ </EnvProvider>
);
}- Add
InjectEnvinroot.tsx
export function Root() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
+ <InjectEnv />
<Outlet />
<Scripts />
</body>
</html>
);
}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>
);
}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>