use varlock ENV

- remove extra getEnv() + global ENV logic
- use ENV from varlock/env instead of process.env
- remove extra coercion/validation
- add MODE to schema (we should merge this with NODE_ENV)

Author: theoephraim

.env.schema

@@ -7,6 +7,8 @@
 
 # @type=enum(development, production, test)
 NODE_ENV=development
+# @type=enum(development, production, test)
+MODE=$NODE_ENV
 
 # @type=port
 PORT=3000

app/entry.client.tsx

@@ -1,6 +1,7 @@
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { HydratedRouter } from 'react-router/dom'
+import { ENV } from 'varlock/env'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	void import('./utils/monitoring.client.tsx').then(({ init }) => init())

app/entry.server.tsx

@@ -12,29 +12,26 @@ import {
 	type ActionFunctionArgs,
 	type HandleDocumentRequestFunction,
 } from 'react-router'
-import { getEnv } from './utils/env.server.ts'
+import { ENV } from 'varlock/env'
 import { getInstanceInfo } from './utils/litefs.server.ts'
 import { NonceProvider } from './utils/nonce-provider.ts'
 import { makeTimings } from './utils/timing.server.ts'
 
 export const streamTimeout = 5000
 
-global.ENV = getEnv()
-
-const MODE = process.env.NODE_ENV
 
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
 export default async function handleRequest(...args: DocRequestArgs) {
 	const [request, responseStatusCode, responseHeaders, reactRouterContext] =
 		args
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
-	responseHeaders.set('fly-region', process.env.FLY_REGION ?? 'unknown')
-	responseHeaders.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')
+	responseHeaders.set('fly-region', ENV.FLY_REGION ?? 'unknown')
+	responseHeaders.set('fly-app', ENV.FLY_APP_NAME ?? 'unknown')
 	responseHeaders.set('fly-primary-instance', primaryInstance)
 	responseHeaders.set('fly-instance', currentInstance)
 
-	if (process.env.NODE_ENV === 'production' && process.env.SENTRY_DSN) {
+	if (ENV.NODE_ENV === 'production' && ENV.SENTRY_DSN) {
 		responseHeaders.append('Document-Policy', 'js-profiling')
 	}
 
@@ -71,8 +68,8 @@ export default async function handleRequest(...args: DocRequestArgs) {
 							directives: {
 								fetch: {
 									'connect-src': [
-										MODE === 'development' ? 'ws:' : undefined,
-										process.env.SENTRY_DSN ? '*.sentry.io' : undefined,
+										ENV.MODE === 'development' ? 'ws:' : undefined,
+										ENV.SENTRY_DSN ? '*.sentry.io' : undefined,
 										"'self'",
 									],
 									'font-src': ["'self'"],
@@ -113,8 +110,8 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 export async function handleDataRequest(response: Response) {
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
-	response.headers.set('fly-region', process.env.FLY_REGION ?? 'unknown')
-	response.headers.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')
+	response.headers.set('fly-region', ENV.FLY_REGION ?? 'unknown')
+	response.headers.set('fly-app', ENV.FLY_APP_NAME ?? 'unknown')
 	response.headers.set('fly-primary-instance', primaryInstance)
 	response.headers.set('fly-instance', currentInstance)
 

app/root.tsx

@@ -11,6 +11,7 @@ import {
 	useMatches,
 } from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
+import { ENV } from 'varlock/env'
 import { type Route } from './+types/root.ts'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'
@@ -31,7 +32,6 @@ import tailwindStyleSheetUrl from './styles/tailwind.css?url'
 import { getUserId, logout } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints } from './utils/client-hints.tsx'
 import { prisma } from './utils/db.server.ts'
-import { getEnv } from './utils/env.server.ts'
 import { pipeHeaders } from './utils/headers.server.ts'
 import { honeypot } from './utils/honeypot.server.ts'
 import { combineHeaders, getDomainUrl, getImgSrc } from './utils/misc.tsx'
@@ -119,7 +119,6 @@ export async function loader({ request }: Route.LoaderArgs) {
 					theme: getTheme(request),
 				},
 			},
-			ENV: getEnv(),
 			toast,
 			honeyProps,
 		},
@@ -138,34 +137,25 @@ function Document({
 	children,
 	nonce,
 	theme = 'light',
-	env = {},
 }: {
 	children: React.ReactNode
 	nonce: string
 	theme?: Theme
-	env?: Record<string, string | undefined>
 }) {
-	const allowIndexing = ENV.ALLOW_INDEXING !== 'false'
 	return (
 		<html lang="en" className={`${theme} h-full overflow-x-hidden`}>
 			<head>
 				<ClientHintCheck nonce={nonce} />
 				<Meta />
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width,initial-scale=1" />
-				{allowIndexing ? null : (
+				{ENV.ALLOW_INDEXING ? null : (
 					<meta name="robots" content="noindex, nofollow" />
 				)}
 				<Links />
 			</head>
 			<body className="bg-background text-foreground">
 				{children}
-				<script
-					nonce={nonce}
-					dangerouslySetInnerHTML={{
-						__html: `window.ENV = ${JSON.stringify(env)}`,
-					}}
-				/>
 				<ScrollRestoration nonce={nonce} />
 				<Scripts nonce={nonce} />
 			</body>
@@ -174,12 +164,10 @@ function Document({
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-	// if there was an error running the loader, data could be missing
-	const data = useLoaderData<typeof loader | null>()
 	const nonce = useNonce()
 	const theme = useOptionalTheme()
 	return (
-		<Document nonce={nonce} theme={theme} env={data?.ENV}>
+		<Document nonce={nonce} theme={theme}>
 			{children}
 		</Document>
 	)

app/routes/_auth/auth.$provider/callback.test.ts

@@ -2,6 +2,7 @@ import { invariant } from '@epic-web/invariant'
 import { faker } from '@faker-js/faker'
 import { SetCookie } from '@mjackson/headers'
 import { http } from 'msw'
+import { ENV } from 'varlock/env'
 import { afterEach, expect, test } from 'vitest'
 import { twoFAVerificationType } from '#app/routes/settings/profile/two-factor/_layout.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
@@ -231,7 +232,7 @@ async function setupRequest({
 		sameSite: 'Lax',
 		httpOnly: true,
 		maxAge: 60 * 10,
-		secure: process.env.NODE_ENV === 'production' || undefined,
+		secure: ENV.NODE_ENV === 'production' || undefined,
 	})
 	const request = new Request(url.toString(), {
 		method: 'GET',

app/routes/_auth/webauthn/utils.server.ts

@@ -3,6 +3,7 @@ import {
 	type RegistrationResponseJSON,
 } from '@simplewebauthn/server'
 import { createCookie } from 'react-router'
+import { ENV } from 'varlock/env'
 import { z } from 'zod'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 
@@ -11,8 +12,8 @@ export const passkeyCookie = createCookie('webauthn-challenge', {
 	sameSite: 'lax',
 	httpOnly: true,
 	maxAge: 60 * 60 * 2,
-	secure: process.env.NODE_ENV === 'production',
-	secrets: [process.env.SESSION_SECRET],
+	secure: ENV.NODE_ENV === 'production',
+	secrets: [ENV.SESSION_SECRET],
 })
 
 export const PasskeyCookieSchema = z.object({

app/routes/admin/cache/sqlite.server.ts

@@ -1,4 +1,5 @@
 import { redirect } from 'react-router'
+import { ENV } from 'varlock/env'
 import { z } from 'zod'
 import { cache } from '#app/utils/cache.server.ts'
 import {
@@ -21,7 +22,7 @@ export async function updatePrimaryCacheValue({
 		)
 	}
 	const domain = getInternalInstanceDomain(primaryInstance)
-	const token = process.env.INTERNAL_COMMAND_TOKEN
+	const token = ENV.INTERNAL_COMMAND_TOKEN
 	return fetch(`${domain}/admin/cache/sqlite`, {
 		method: 'POST',
 		headers: {
@@ -39,7 +40,7 @@ export async function action({ request }: Route.ActionArgs) {
 			`${request.url} should only be called on the primary instance (${primaryInstance})}`,
 		)
 	}
-	const token = process.env.INTERNAL_COMMAND_TOKEN
+	const token = ENV.INTERNAL_COMMAND_TOKEN
 	const isAuthorized =
 		request.headers.get('Authorization') === `Bearer ${token}`
 	if (!isAuthorized) {

app/routes/resources/images.tsx

@@ -1,6 +1,7 @@
 import { promises as fs, constants } from 'node:fs'
 import { invariantResponse } from '@epic-web/invariant'
 import { getImgResponse } from 'openimg/node'
+import { ENV } from 'varlock/env'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts'
 import { type Route } from './+types/images'
@@ -11,7 +12,7 @@ async function getCacheDir() {
 	if (cacheDir) return cacheDir
 
 	let dir = './tests/fixtures/openimg'
-	if (process.env.NODE_ENV === 'production') {
+	if (ENV.NODE_ENV === 'production') {
 		const isAccessible = await fs
 			.access('/data', constants.W_OK)
 			.then(() => true)
@@ -38,7 +39,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 		headers,
 		allowlistedOrigins: [
 			getDomainUrl(request),
-			process.env.AWS_ENDPOINT_URL_S3,
+			ENV.AWS_ENDPOINT_URL_S3,
 		].filter(Boolean),
 		cacheFolder: await getCacheDir(),
 		getImgSource: () => {

app/utils/cache.server.ts

@@ -14,12 +14,13 @@ import {
 } from '@epic-web/cachified'
 import { remember } from '@epic-web/remember'
 import { LRUCache } from 'lru-cache'
+import { ENV } from 'varlock/env'
 import { z } from 'zod'
 import { updatePrimaryCacheValue } from '#app/routes/admin/cache/sqlite.server.ts'
 import { getInstanceInfo, getInstanceInfoSync } from './litefs.server.ts'
 import { cachifiedTimingReporter, type Timings } from './timing.server.ts'
 
-const CACHE_DATABASE_PATH = process.env.CACHE_DATABASE_PATH
+const CACHE_DATABASE_PATH = ENV.CACHE_DATABASE_PATH
 
 const cacheDb = remember('cacheDb', createDatabase)
 

app/utils/email.server.ts

@@ -1,5 +1,6 @@
 import { render } from '@react-email/components'
 import { type ReactElement } from 'react'
+import { ENV } from 'varlock/env'
 import { z } from 'zod'
 
 const resendErrorSchema = z.union([
@@ -40,7 +41,7 @@ export async function sendEmail({
 	}
 
 	// feel free to remove this condition once you've set up resend
-	if (!process.env.RESEND_API_KEY && !process.env.MOCKS) {
+	if (!ENV.RESEND_API_KEY && !ENV.MOCKS) {
 		console.error(`RESEND_API_KEY not set and we're not in mocks mode.`)
 		console.error(
 			`To send emails, set the RESEND_API_KEY environment variable.`,
@@ -56,7 +57,7 @@ export async function sendEmail({
 		method: 'POST',
 		body: JSON.stringify(email),
 		headers: {
-			Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
+			Authorization: `Bearer ${ENV.RESEND_API_KEY}`,
 			'Content-Type': 'application/json',
 		},
 	})