Lazy init env (#38)

# Description

- Lazily initialize and process environment variables
- Set default values for `NODE_ENV` and `APP_ENV` for local development


## Type of change

Please mark relevant options with an `x` in the brackets.

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Algorithm update - updates algorithm
documentation/questions/answers etc.
- [ ] Other (please describe):

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also
list any relevant details for your test configuration

- [ ] Integration tests
- [x] Unit tests
- [x] Manual tests
- [ ] No tests required

Author: thomasfr

.env.example

@@ -1,2 +1,5 @@
 # Add your env variables here
-APP_DEPLOYMENT_ENV="staging"
+
+# The environment of the app. This is different from NODE_ENV, and will be used for deployments.
+# Default: development
+#APP_ENV="staging"

app/env.server.ts

@@ -1,18 +1,18 @@
 import { z } from "zod"
 
 const envSchema = z.object({
-	NODE_ENV: z.enum(["development", "production", "test"]),
-	APP_DEPLOYMENT_ENV: z.enum(["staging", "production"]),
+	NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
+	APP_ENV: z.enum(["development", "staging", "production"]).default("development"),
 })
 
-type APP_ENV = z.infer<typeof envSchema>
-let env: APP_ENV
+type ServerEnv = z.infer<typeof envSchema>
+let env: ServerEnv
+
 /**
- * Helper method used for initializing .env vars in your entry.server.ts file. It uses
- * zod to validate your .env and throws if it's not valid.
+ * Initializes and parses given environment variables using zod
  * @returns Initialized env vars
  */
-export const initEnv = () => {
+export function initEnv() {
 	// biome-ignore lint/nursery/noProcessEnv: This should be the only place to use process.env directly
 	const envData = envSchema.safeParse(process.env)
 
@@ -23,35 +23,39 @@ export const initEnv = () => {
 	}
 
 	env = envData.data
+	Object.freeze(env)
 
 	// Do not log the message when running tests
 	if (env.NODE_ENV !== "test") {
 		// biome-ignore lint/suspicious/noConsole: We want this to be logged
 		console.log("✅ Environment variables loaded successfully")
 	}
-	return envData.data
+	return env
+}
+
+export function getServerEnv() {
+	if (env) return env
+	return initEnv()
 }
 
 /**
- * Helper method for you to return client facing .env vars, only return vars that are needed on the client.
+ * Helper function which returns a subset of the environment vars which are safe expose to the client.
+ * Dont expose any secrets or sensitive data here.
  * Otherwise you would expose your server vars to the client if you returned them from here as this is
  * directly sent in the root to the client and set on the window.env
  * @returns Subset of the whole process.env to be passed to the client and used there
  */
-export const getClientEnv = () => {
-	const serverEnv = env
+export function getClientEnv() {
+	const serverEnv = getServerEnv()
 	return {
 		NODE_ENV: serverEnv.NODE_ENV,
 	}
 }
 
-type CLIENT_ENV = ReturnType<typeof getClientEnv>
+type ClientEnvVars = ReturnType<typeof getClientEnv>
 
 declare global {
 	interface Window {
-		env: CLIENT_ENV
-	}
-	namespace NodeJS {
-		interface ProcessEnv extends APP_ENV {}
+		env: ClientEnvVars
 	}
 }

app/routes/resource.locales.ts

@@ -4,7 +4,7 @@ import { resources } from "~/localization/resource"
 import type { Route } from "./+types/resource.locales"
 
 export async function loader({ request, context }: Route.LoaderArgs) {
-	const { env } = context
+	const { isProductionDeployment } = context
 	const url = new URL(request.url)
 
 	const lng = z
@@ -24,7 +24,7 @@ export async function loader({ request, context }: Route.LoaderArgs) {
 	const headers = new Headers()
 
 	// On production, we want to add cache headers to the response
-	if (env.APP_DEPLOYMENT_ENV === "production") {
+	if (isProductionDeployment) {
 		headers.set(
 			"Cache-Control",
 			cacheHeader({

app/routes/robots[.]txt.ts

@@ -4,8 +4,7 @@ import { createDomain } from "~/utils/http"
 import type { Route } from "./+types/robots[.]txt"
 
 export async function loader({ request, context }: Route.LoaderArgs) {
-	const { env } = context
-	const isProductionDeployment = env.APP_DEPLOYMENT_ENV === "production"
+	const { isProductionDeployment } = context
 	const domain = createDomain(request)
 	const robotsTxt = generateRobotsTxt([
 		{

app/server/context.ts

@@ -1,22 +1,21 @@
 import type { Context } from "hono"
 import { i18next } from "remix-hono/i18next"
-import { getClientEnv, initEnv } from "~/env.server"
-
-// Setup the .env vars
-const env = initEnv()
+import { getClientEnv, getServerEnv } from "~/env.server"
 
 export const getLoadContext = async (c: Context) => {
 	// get the locale from the context
 	const locale = i18next.getLocale(c)
 	// get t function for the default namespace
 	const t = await i18next.getFixedT(c)
+	// get the server environment
+	const env = getServerEnv()
 
-	const clientEnv = getClientEnv()
 	return {
 		lang: locale,
 		t,
+		isProductionDeployment: env.APP_ENV === "production",
 		env,
-		clientEnv,
+		clientEnv: getClientEnv(),
 		// We do not add this to AppLoadContext type because it's not needed in the loaders, but it's used above to handle requests
 		body: c.body,
 	}