Skip to content

Instantly share code, notes, and snippets.

@JLarky
Last active January 22, 2024 08:06
Show Gist options
  • Save JLarky/a8a4f7790a0022f1f1ca86bf96a0e502 to your computer and use it in GitHub Desktop.
Save JLarky/a8a4f7790a0022f1f1ca86bf96a0e502 to your computer and use it in GitHub Desktop.
Remix environment variables (tiny)
import type { LoaderArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { serverEnv } from '~/environment/env.server';
import { clientEnv } from '~/environment/env';
export async function loader({}: LoaderArgs) {
const { AWS_S3_BUCKET, BASE_URL, APP_ENV, npm_package_version } = serverEnv;
return json({});
}
export default () => {
const { BASE_URL } = clientEnv;
return 'hello';
};
export type ClientEnv = ReturnType<typeof prepareClientEnv>;
declare global {
interface Window {
ENV: Readonly<ClientEnv>;
}
}
/**
* Use this when accessing from server-only modules. Use `clientEnv` for everythign else (browser + ssr)
* @example
* ```
* import { serverEnv } from './env';
* ```
*/
export const serverEnv = {
AWS_S3_BUCKET: process.env.AWS_S3_BUCKET as string,
};
/**
* Internal API to prepare hydration script. Use this in your code instead:
* ```
* import { clientEnv } from './env';
* ```
*/
export function prepareClientEnv() {
// Careful what you put in here, it's going to be publicly available
return {
APP_ENV: process.env.APP_ENV as 'prod' | 'qa' | 'dev' | 'local',
BASE_URL: process.env.BASE_URL as string,
npm_package_version: process.env.npm_package_version,
};
}
import { prepareClientEnv } from './env.server';
function initClientEnv() {
const isServer = typeof document === 'undefined';
return isServer ? prepareClientEnv() : window.ENV;
}
export const clientEnv = initClientEnv();
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import { clientEnv } from './environment/env';
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
<script
dangerouslySetInnerHTML={{
__html: `window.ENV=${JSON.stringify(clientEnv)}`,
}}
/>
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment