made env variables typesafe

max-programming · max-programming · commit 23905d26801b · 2025-10-22T15:19:26.000Z
diff --git a/src/client.tsx b/src/client.tsx
@@ -3,18 +3,18 @@ import { StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import * as Sentry from "@sentry/tanstackstart-react";
 import { createRouter } from "./router";
-
+import { env } from "./config/env";
 
 const router = createRouter();
 
 Sentry.init({
-  dsn: import.meta.env.VITE_SENTRY_DSN,
+  dsn: env.VITE_SENTRY_DSN,
   sendDefaultPii: true,
 });
 
 hydrateRoot(
   document,
   <StrictMode>
     <StartClient router={router} />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/src/config/env.ts b/src/config/env.ts
@@ -0,0 +1,20 @@
+import { createIsomorphicFn } from "@tanstack/react-start";
+import { z } from "zod";
+
+const clientEnvSchema = z.object({
+  VITE_SENTRY_DSN: z.string().optional(),
+  VITE_ANALYTICS_SCRIPT: z.url().optional(),
+  VITE_ANALYTICS_WEBSITE_ID: z.uuid().optional(),
+});
+
+const serverEnvSchema = z
+  .object({ DATABASE_URL: z.url() })
+  .and(clientEnvSchema);
+
+const getEnv = createIsomorphicFn()
+  .server(() => serverEnvSchema.parse(process.env))
+  .client(() => clientEnvSchema.parse(import.meta.env));
+
+type Env = z.infer<typeof serverEnvSchema>;
+
+export const env = getEnv() as Env;
diff --git a/src/lib/db/index.ts b/src/lib/db/index.ts
@@ -1,8 +1,8 @@
 import { drizzle } from "drizzle-orm/libsql";
 import { EnhancedQueryLogger } from "drizzle-query-logger";
+import { env } from "~/config/env";
 
-const dbUrl = process.env.DATABASE_URL!;
-export const db = drizzle(dbUrl, {
+export const db = drizzle(env.DATABASE_URL, {
   casing: "snake_case",
   logger: new EnhancedQueryLogger(),
 });
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -15,11 +15,12 @@ import { ThemeToggle } from "~/components/theme-toggle";
 import { Footer } from "~/components/footer";
 import { themeQuery } from "~/lib/queries";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { env } from "~/config/env";
 
 export const Route = wrapCreateRootRouteWithSentry(
   createRootRouteWithContext<{
     queryClient: QueryClient;
-  }>()
+  }>(),
 )({
   head: () => ({
     meta: [
@@ -86,14 +87,13 @@ function RootDocument({ children }: Readonly<{ children: React.ReactNode }>) {
     <html className={theme} suppressHydrationWarning>
       <head>
         <HeadContent />
-        {import.meta.env.VITE_ANALYTICS_SCRIPT &&
-          import.meta.env.VITE_ANALYTICS_WEBSITE_ID && (
-            <script
-              defer
-              src={import.meta.env.VITE_ANALYTICS_SCRIPT}
-              data-website-id={import.meta.env.VITE_ANALYTICS_WEBSITE_ID}
-            ></script>
-          )}
+        {env.VITE_ANALYTICS_SCRIPT && env.VITE_ANALYTICS_WEBSITE_ID && (
+          <script
+            defer
+            src={env.VITE_ANALYTICS_SCRIPT}
+            data-website-id={env.VITE_ANALYTICS_WEBSITE_ID}
+          ></script>
+        )}
       </head>
       <body className="min-h-screen">
         <ScrollArea className="h-screen overflow-y-auto">
diff --git a/src/server.tsx b/src/server.tsx
@@ -4,10 +4,10 @@ import {
 } from "@tanstack/react-start/server";
 import * as Sentry from "@sentry/tanstackstart-react";
 import { createRouter } from "./router";
-
+import { env } from "./config/env";
 
 Sentry.init({
-  dsn: process.env.VITE_SENTRY_DSN,
+  dsn: env.VITE_SENTRY_DSN,
   sendDefaultPii: true,
 });
 
