dashboard: allow changing the dashboard api url using an env var (#3892)

Author: aurbano

dashboard/next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: "standalone",
-    basePath: "/ray"
 };
 
 export default nextConfig;

dashboard/src/app/api/config/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const config = {
+    apiUrl: process.env.NEXT_PUBLIC_API_URL || process.env.API_URL || "http://localhost:31888/apis/v1",
+  };
+
+  return NextResponse.json(config);
+}

dashboard/src/app/page.tsx

@@ -13,18 +13,24 @@ import {
 import NextLink from "next/link";
 import WorkIcon from "@mui/icons-material/Work";
 import LanIcon from "@mui/icons-material/Lan";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useFirstVisit } from "@/components/FirstVisitContext";
 import { roblox } from "@/utils/constants";
+import { fetchRuntimeConfig } from "@/utils/constants";
+
 const HomePage = () => {
   const router = useRouter();
   const { firstVisit } = useFirstVisit();
+
   useEffect(() => {
+    fetchRuntimeConfig();
+
     if (firstVisit) {
       router.push("/jobs");
     }
   }, [])
+
   return (
     <>
       <Box

dashboard/src/hooks/api/useCreateJob.ts

@@ -4,7 +4,6 @@ import { useSnackBar } from "@/components/SnackBarProvider";
 import { useNamespace } from "@/components/NamespaceProvider";
 import { useRouter } from "next/navigation";
 import { config } from "@/utils/constants";
-import { Job } from "@/types/rayjob";
 
 // TODO: still hard-coded
 async function _createJob(

dashboard/src/utils/constants.ts

@@ -1,14 +1,47 @@
 export const ALL_NAMESPACES = "all"
-// I'm developing in the stage cluster, so I'm directly using the deployed backend
-const development = {
-  url: "http://localhost:31888/apis/v1",
-};
 
-const production = {
+interface RuntimeConfig {
+  url: string;
+}
+
+const defaultConfig: RuntimeConfig = {
   url: "http://localhost:31888/apis/v1",
 };
 
-export const config =
-  process.env.NODE_ENV === "development" ? development : production;
+let runtimeConfig: RuntimeConfig | null = null;
+
+export async function fetchRuntimeConfig(): Promise<RuntimeConfig> {
+  if (runtimeConfig) {
+    return runtimeConfig;
+  }
+
+  try {
+    const response = await fetch('/api/config');
+    if (response.ok) {
+      const data = await response.json();
+      runtimeConfig = {
+        url: data.apiUrl || defaultConfig.url,
+      };
+      return runtimeConfig;
+    }
+  } catch (error) {
+    console.warn('Failed to fetch runtime config, using default:', error);
+  }
+
+  // Fallback to default config
+  runtimeConfig = defaultConfig;
+  return runtimeConfig;
+}
+
+export const config = {
+  async getUrl(): Promise<string> {
+    const cfg = await fetchRuntimeConfig();
+    return cfg.url;
+  },
+
+  get url(): string {
+    return runtimeConfig?.url || defaultConfig.url;
+  }
+};
 
 export const roblox = false;

dashboard/src/utils/fetch.ts

@@ -16,9 +16,7 @@ export default async function fetcher(
   endpoint: string,
   ...args: RequestInit[]
 ) {
-  const baseUrl = config.url;
-  console.log(`${baseUrl}${endpoint}`);
-  // await new Promise((resolve) => setTimeout(resolve, 10000));
+  const baseUrl = await config.getUrl();
   const res = await fetch(`${baseUrl}${endpoint}`, ...args);
   if (!res.ok) {
     const error = new FetchError("An error occurred while fetching the data");