captableinc · erickmmolina · May 22, 2025 · May 22, 2025
diff --git a/.env.example → .env b/.env.example → .env
diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
@@ -1,7 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import type { NextRequest } from "next/server";
 
-import { env } from "@/env";
+import { env, envUtils } from "@/env";
 import { appRouter } from "@/trpc/api/root";
 import { createTRPCContext } from "@/trpc/api/trpc";
 
@@ -22,7 +22,7 @@ const handler = (req: NextRequest) =>
     router: appRouter,
     createContext: () => createContext(req),
     onError:
-      env.NODE_ENV === "development"
+      envUtils.isDevelopment()
         ? ({ path, error }) => {
             console.error(
               `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import logo from "@/assets/logo.svg";
 import { PublicEnvScript } from "@/components/public-env-script";
 import ScreenSize from "@/components/screen-size";
 import { constants } from "@/lib/constants";
+import { envUtils } from "@/env";
 import { cn } from "@/lib/utils";
 import { NextAuthProvider } from "@/providers/next-auth";
 import { ProgressBarProvider } from "@/providers/progress-bar";
@@ -30,7 +31,6 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const session = await getServerComponentAuthSession();
-  const nodeEnv = process.env.NODE_ENV;
 
   return (
     <html lang="en" className={cn(satoshi.variable, robotoMono.variable)}>
@@ -43,7 +43,7 @@ export default async function RootLayout({
             <TRPCReactProvider cookies={cookies().toString()}>
               <main>{children}</main>
               <Toaster richColors />
-              {nodeEnv === "development" && <ScreenSize />}
+              {envUtils.isDevelopment() && <ScreenSize />}
             </TRPCReactProvider>
           </NextAuthProvider>
         </ProgressBarProvider>

diff --git a/src/components/onboarding/signin/index.tsx b/src/components/onboarding/signin/index.tsx
@@ -27,6 +27,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
 import { AuthFormHeader } from "../auth-form-header";
+import { envUtils } from "@/env";
 
 const loginSchema = z.object({
   email: z.string().email(),
@@ -47,8 +48,8 @@ const SignInForm = ({ isGoogleAuthEnabled }: LoginFormProps) => {
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
-      email: process.env.NODE_ENV === "development" ? "[email protected]" : "",
-      password: process.env.NODE_ENV === "development" ? "P@ssw0rd!" : "",
+      email: envUtils.isDevelopment() ? "[email protected]" : "",
+      password: envUtils.isDevelopment() ? "P@ssw0rd!" : "",
     },
   });
   const isSubmitting = form.formState.isSubmitting;

diff --git a/src/env.js b/src/env.js
@@ -16,6 +16,75 @@ const readRuntimePublicEnvVariable = (key) => {
   return process.env[key];
 };
 
+// Utility functions to check environment
+function isDevelopment() {
+  // First check the custom environment variable from runtime
+  if (isBrowser() && window?.[PUBLIC_ENV_KEY]?.NEXT_PUBLIC_APP_ENV) {
+    return window[PUBLIC_ENV_KEY].NEXT_PUBLIC_APP_ENV === "development";
+  }
+
+  // Then check process.env
+  if (process.env.NEXT_PUBLIC_APP_ENV) {
+    return process.env.NEXT_PUBLIC_APP_ENV === "development";
+  }
+
+  // Fall back to NODE_ENV
+  return process.env.NODE_ENV === "development";
+}
+
+function isProduction() {
+  // First check the custom environment variable from runtime
+  if (isBrowser() && window?.[PUBLIC_ENV_KEY]?.NEXT_PUBLIC_APP_ENV) {
+    return window[PUBLIC_ENV_KEY].NEXT_PUBLIC_APP_ENV === "production";
+  }
+
+  // Then check process.env
+  if (process.env.NEXT_PUBLIC_APP_ENV) {
+    return process.env.NEXT_PUBLIC_APP_ENV === "production";
+  }
+
+  // Fall back to NODE_ENV
+  return process.env.NODE_ENV === "production";
+}
+
+function isTest() {
+  // First check the custom environment variable from runtime
+  if (isBrowser() && window?.[PUBLIC_ENV_KEY]?.NEXT_PUBLIC_APP_ENV) {
+    return window[PUBLIC_ENV_KEY].NEXT_PUBLIC_APP_ENV === "test";
+  }
+
+  // Then check process.env
+  if (process.env.NEXT_PUBLIC_APP_ENV) {
+    return process.env.NEXT_PUBLIC_APP_ENV === "test";
+  }
+
+  // Fall back to NODE_ENV
+  return process.env.NODE_ENV === "test";
+}
+
+function isStaging() {
+  // First check the custom environment variable from runtime
+  if (isBrowser() && window?.[PUBLIC_ENV_KEY]?.NEXT_PUBLIC_APP_ENV) {
+    return window[PUBLIC_ENV_KEY].NEXT_PUBLIC_APP_ENV === "staging";
+  }
+
+  // Then check process.env
+  if (process.env.NEXT_PUBLIC_APP_ENV) {
+    return process.env.NEXT_PUBLIC_APP_ENV === "staging";
+  }
+
+  // Fall back to NODE_ENV
+  return process.env.NODE_ENV === "staging";
+}
+
+// Export utility functions for checking environment
+export const envUtils = {
+  isDevelopment,
+  isProduction,
+  isTest,
+  isStaging
+};
+
 export const env = createEnv({
   /**
    * Specify your server-side environment variables schema here. This way you can ensure the app
@@ -73,6 +142,7 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_BASE_URL: z.string(),
     NEXT_PUBLIC_UPLOAD_DOMAIN: z.string().optional(),
+    NEXT_PUBLIC_APP_ENV: z.enum(["development", "test", "production", "staging"]).default("production"),
 
     // stripe
     NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().optional(),
@@ -122,6 +192,7 @@ export const env = createEnv({
 
     /// job queue
     WORKER_DATABASE_URL: process.env.WORKER_DATABASE_URL,
+    NEXT_PUBLIC_APP_ENV: readRuntimePublicEnvVariable("NEXT_PUBLIC_APP_ENV"),
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

diff --git a/src/trpc/react.tsx b/src/trpc/react.tsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 
 import { type AppRouter } from "@/trpc/api/root";
 import { getUrl, transformer } from "./shared";
+import { envUtils } from "@/env";
 
 export const api = createTRPCReact<AppRouter>();
 
@@ -22,7 +23,7 @@ export function TRPCReactProvider(props: {
       links: [
         loggerLink({
           enabled: (op) =>
-            process.env.NODE_ENV === "development" ||
+            envUtils.isDevelopment() ||
             (op.direction === "down" && op.result instanceof Error),
         }),
         unstable_httpBatchStreamLink({