Merge pull request #114 from SciPhi-AI/Nolan/EnvVars

Allow runtime env vars

Dockerfile

@@ -1,3 +1,4 @@
+# Builder Stage
 FROM node:22-alpine AS builder
 WORKDIR /app
 
@@ -16,7 +17,7 @@ COPY . .
 # Build the Next.js application
 RUN pnpm build
 
-# Production stage
+# Production Stage
 FROM node:22-alpine AS runner
 WORKDIR /app
 
@@ -32,8 +33,14 @@ COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 
+# Copy the startup script
+COPY startup.sh /app/startup.sh
+
+# Ensure the startup script is executable
+RUN chmod +x /app/startup.sh
+
 # Expose the port the app runs on
 EXPOSE 3000
 
-# Define the command to run the app
-CMD ["node", "server.js"]
+# Define the command to run the startup script
+CMD ["/app/startup.sh"]

next.config.js

@@ -22,13 +22,4 @@ module.exports = {
       },
     ],
   },
-  env: {
-    NEXT_PUBLIC_R2R_DEPLOYMENT_URL: process.env.NEXT_PUBLIC_R2R_DEPLOYMENT_URL,
-    R2R_DASHBOARD_DISABLE_TELEMETRY:
-      process.env.R2R_DASHBOARD_DISABLE_TELEMETRY,
-    SUPABASE_URL: process.env.SUPABASE_URL,
-    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
-    NEXT_PUBLIC_HATCHET_DASHBOARD_URL:
-      process.env.NEXT_PUBLIC_HATCHET_DASHBOARD_URL,
-  },
 };

package.json

@@ -91,7 +91,7 @@
     "pnpm": "^9.5.0",
     "postcss": "^8.4.39",
     "posthog-js": "^1.148.0",
-    "r2r-js": "file:/Users/nolantremelling/R2R/js/sdk/r2r-js-0.3.10.tgz",
+    "r2r-js": "^0.3.11",
     "radix-ui": "^1.0.1",
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",

public/env-config.js

@@ -0,0 +1,7 @@
+window.__RUNTIME_CONFIG__ = {
+  NEXT_PUBLIC_R2R_DEPLOYMENT_URL: '__NEXT_PUBLIC_R2R_DEPLOYMENT_URL__',
+  R2R_DASHBOARD_DISABLE_TELEMETRY: '__R2R_DASHBOARD_DISABLE_TELEMETRY__',
+  SUPABASE_URL: '__SUPABASE_URL__',
+  SUPABASE_ANON_KEY: '__SUPABASE_ANON_KEY__',
+  NEXT_PUBLIC_HATCHET_DASHBOARD_URL: '__NEXT_PUBLIC_HATCHET_DASHBOARD_URL__',
+};

src/lib/posthog-client.tsx

@@ -15,7 +15,7 @@ function initializePostHog() {
     autocapture: true,
   });
 
-  if (process.env.R2R_DASHBOARD_DISABLE_TELEMETRY === 'true') {
+  if (window.__RUNTIME_CONFIG__?.R2R_DASHBOARD_DISABLE_TELEMETRY === 'true') {
     posthog.opt_out_capturing();
   }
 }

src/lib/supabase.ts

@@ -1,12 +1,23 @@
-import { createClient } from '@supabase/supabase-js';
+// lib/supabase.ts
 
-let supabase: ReturnType<typeof createClient> | null = null;
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
 
-if (process.env.SUPABASE_URL && process.env.SUPABASE_ANON_KEY) {
-  supabase = createClient(
-    process.env.SUPABASE_URL,
-    process.env.SUPABASE_ANON_KEY
-  );
-}
+let supabase: SupabaseClient | null = null;
+
+export const getSupabase = (): SupabaseClient | null => {
+  if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__) {
+    if (!supabase) {
+      const supabaseUrl = window.__RUNTIME_CONFIG__.SUPABASE_URL;
+      const supabaseAnonKey = window.__RUNTIME_CONFIG__.SUPABASE_ANON_KEY;
+      if (supabaseUrl && supabaseAnonKey) {
+        supabase = createClient(supabaseUrl, supabaseAnonKey);
+      } else {
+        console.warn('Supabase URL or Anon Key is missing in runtime config.');
+      }
+    }
+    return supabase;
+  }
+  return null;
+};
 
 export { supabase };

src/pages/_app.tsx

@@ -35,12 +35,10 @@ function MyAppContent({ Component, pageProps }: AppProps) {
     }
 
     if (isSuperUser()) {
-      // Superusers can access all routes
       return;
     }
 
     if (!isUserRoute(currentPath)) {
-      // Non-superusers are redirected to /documents if they try to access any other page
       router.replace('/documents');
     }
   }, [isAuthenticated, isSuperUser, authState.userRole, router]);
@@ -53,6 +51,21 @@ function MyAppContent({ Component, pageProps }: AppProps) {
 }
 
 function MyApp(props: AppProps) {
+  // Move the runtime config check into useEffect
+  useEffect(() => {
+    // Load the env-config.js script dynamically
+    const script = document.createElement('script');
+    script.src = '/env-config.js';
+    script.onload = () => {
+      if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__) {
+        console.log('Runtime Config:', window.__RUNTIME_CONFIG__);
+      } else {
+        console.warn('Runtime Config not found!');
+      }
+    };
+    document.body.appendChild(script);
+  }, []);
+
   return (
     <ThemeProvider
       attribute="class"

src/pages/auth/login.tsx

@@ -10,6 +10,8 @@ import { useUserContext } from '@/context/UserContext';
 import debounce from '@/lib/debounce';
 import { supabase } from '@/lib/supabase';
 
+const DEFAULT_DEPLOYMENT_URL = 'http://localhost:7272';
+
 const LoginPage: React.FC = () => {
   const [email, setEmail] = useState('[email protected]');
   const [password, setPassword] = useState('change_me_immediately');
@@ -26,10 +28,14 @@ const LoginPage: React.FC = () => {
   const [sanitizedDeploymentUrl, setSanitizedDeploymentUrl] = useState('');
 
   useEffect(() => {
-    const deploymentUrl =
-      process.env.NEXT_PUBLIC_R2R_DEPLOYMENT_URL || 'http://localhost:7272';
-    setRawDeploymentUrl(deploymentUrl);
-    setSanitizedDeploymentUrl(deploymentUrl);
+    if (typeof window !== 'undefined') {
+      const deploymentUrl =
+        window.__RUNTIME_CONFIG__?.NEXT_PUBLIC_R2R_DEPLOYMENT_URL;
+      if (deploymentUrl) {
+        setRawDeploymentUrl(deploymentUrl);
+        setSanitizedDeploymentUrl(deploymentUrl);
+      }
+    }
   }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -125,14 +131,25 @@ const LoginPage: React.FC = () => {
   };
 
   const sanitizeUrl = (url: string): string => {
-    const defaultUrl =
-      process.env.NEXT_PUBLIC_R2R_DEPLOYMENT_URL || 'http://localhost:7272';
-    let sanitized = url.trim();
+    if (
+      typeof window !== 'undefined' &&
+      window.__RUNTIME_CONFIG__?.NEXT_PUBLIC_R2R_DEPLOYMENT_URL
+    ) {
+      const configUrl =
+        window.__RUNTIME_CONFIG__.NEXT_PUBLIC_R2R_DEPLOYMENT_URL;
+
+      // If the URL is empty or just a protocol, return the config URL
+      if (!url || url === 'http://' || url === 'https://') {
+        return configUrl;
+      }
+    }
 
-    if (!sanitized || sanitized === 'http://' || sanitized === 'https://') {
-      return defaultUrl;
+    // If no config URL is available, use the default
+    if (!url || url === 'http://' || url === 'https://') {
+      return DEFAULT_DEPLOYMENT_URL;
     }
 
+    let sanitized = url.trim();
     sanitized = sanitized.replace(/\/+$/, '');
 
     if (!/^https?:\/\//i.test(sanitized)) {

src/pages/index.tsx

@@ -284,10 +284,19 @@ const HomePage = () => {
                           className="rounded-md py-1 px-3"
                           color="light"
                           disabled={
-                            !process.env.NEXT_PUBLIC_HATCHET_DASHBOARD_URL
+                            !window.__RUNTIME_CONFIG__
+                              ?.NEXT_PUBLIC_HATCHET_DASHBOARD_URL
+                          }
+                          onClick={() =>
+                            window.open(
+                              window.__RUNTIME_CONFIG__
+                                .NEXT_PUBLIC_HATCHET_DASHBOARD_URL,
+                              '_blank'
+                            )
                           }
                           tooltip={
-                            !process.env.NEXT_PUBLIC_HATCHET_DASHBOARD_URL ? (
+                            !window.__RUNTIME_CONFIG__
+                              ?.NEXT_PUBLIC_HATCHET_DASHBOARD_URL ? (
                               <div>
                                 Hatchet Dashboard Deployment URL unavailable.
                                 <br />

startup.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+# Function to replace placeholders with environment variables
+replace_env_vars() {
+  echo "Replacing environment variables in env-config.js..."
+  sed -i "s|__NEXT_PUBLIC_R2R_DEPLOYMENT_URL__|${NEXT_PUBLIC_R2R_DEPLOYMENT_URL}|g" /app/public/env-config.js
+  sed -i "s|__R2R_DASHBOARD_DISABLE_TELEMETRY__|${R2R_DASHBOARD_DISABLE_TELEMETRY}|g" /app/public/env-config.js
+  sed -i "s|__SUPABASE_URL__|${SUPABASE_URL}|g" /app/public/env-config.js
+  sed -i "s|__SUPABASE_ANON_KEY__|${SUPABASE_ANON_KEY}|g" /app/public/env-config.js
+  sed -i "s|__NEXT_PUBLIC_HATCHET_DASHBOARD_URL__|${NEXT_PUBLIC_HATCHET_DASHBOARD_URL}|g" /app/public/env-config.js
+}
+
+# Replace environment variables
+replace_env_vars
+
+# Start the Next.js server
+exec node server.js

tsconfig.json

@@ -27,6 +27,13 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "typeRoots": ["./node_modules/@types", "./types"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "types/**/*.d.ts"
+  ],
   "exclude": ["node_modules", "cloud-docs"]
 }

types/globals.d.ts

@@ -0,0 +1,14 @@
+// types/globals.d.ts
+declare global {
+  interface Window {
+    __RUNTIME_CONFIG__: {
+      NEXT_PUBLIC_R2R_DEPLOYMENT_URL: string;
+      R2R_DASHBOARD_DISABLE_TELEMETRY: string;
+      SUPABASE_URL: string;
+      SUPABASE_ANON_KEY: string;
+      NEXT_PUBLIC_HATCHET_DASHBOARD_URL: string;
+    };
+  }
+}
+
+export {};