Easy way to use process.env in your Remix apps
npm install remix-env or yarn add remix-envEnvProvider in entry.client.tsx and entry.server.tsxstartTransition(() => {
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>
);
}
InjectEnv in root.tsxexport 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>
FAQs
Easy way to use process.env in your Remix apps
The npm package remix-env receives a total of 30 weekly downloads. As such, remix-env popularity was classified as not popular.
We found that remix-env demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.