JLarky/0_README.md

## 0_README.md

      
    Raw
  

              0_README.md
            
          
    How to use environment variables in Remix, tiny version, see full version:

https://gist.github.com/JLarky/de14d71eb2075a8fafc2a99fdd9e36b0


## _index.tsx
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';
};

## env.server.ts
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,
  };
}

## env.ts
import { prepareClientEnv } from './env.server';

function initClientEnv() {
  const isServer = typeof document === 'undefined';
  return isServer ? prepareClientEnv() : window.ENV;
}

export const clientEnv = initClientEnv();

## root.tsx
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>
  );
}
	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>
	);
	}