How to use environment variables in Remix, tiny version, see full version:
Last active
January 22, 2024 08:06
-
-
Save JLarky/a8a4f7790a0022f1f1ca86bf96a0e502 to your computer and use it in GitHub Desktop.
Remix environment variables (tiny)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| }; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { prepareClientEnv } from './env.server'; | |
| function initClientEnv() { | |
| const isServer = typeof document === 'undefined'; | |
| return isServer ? prepareClientEnv() : window.ENV; | |
| } | |
| export const clientEnv = initClientEnv(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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