Make feature server URL configurable in UI

kchawlani19 · ntkathole · commit 18ede884a6fe · 2026-03-18T11:49:04.000+05:30
Signed-off-by: kchawlani19 &lt;kchawlan@redhat.com&gt;
diff --git a/docs/reference/alpha-web-ui.md b/docs/reference/alpha-web-ui.md
@@ -35,6 +35,18 @@ Options:
 
 This will spin up a Web UI on localhost which automatically refreshes its view of the registry every `registry_ttl_sec`
 
+#### Curl Generator Feature Server URL
+
+The Curl Generator uses a default Feature Server URL when building the example curl command. You can configure
+this default at build time using:
+
+```bash
+REACT_APP_FEAST_FEATURE_SERVER_URL="http://your-server:6566"
+```
+
+If this environment variable is not set, the UI falls back to `http://localhost:6566`. A user-edited value in
+the UI is still stored in localStorage and will take precedence for that browser.
+
 ### Importing as a module to integrate with an existing React App
 
 This is the recommended way to use Feast UI for teams maintaining their own internal UI for their deployment of Feast.
diff --git a/ui/src/pages/feature-views/CurlGeneratorTab.tsx b/ui/src/pages/feature-views/CurlGeneratorTab.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import {
   EuiPanel,
   EuiTitle,
@@ -16,23 +16,22 @@ import {
 import { CodeBlock, github } from "react-code-blocks";
 import { RegularFeatureViewCustomTabProps } from "../../custom-tabs/types";
 
+const defaultServerUrl =
+  process.env.REACT_APP_FEAST_FEATURE_SERVER_URL || "http://localhost:6566";
+
 const CurlGeneratorTab = ({
   feastObjectQuery,
 }: RegularFeatureViewCustomTabProps) => {
   const data = feastObjectQuery.data as any;
   const [serverUrl, setServerUrl] = useState(() => {
     const savedUrl = localStorage.getItem("feast-feature-server-url");
-    return savedUrl || "http://localhost:6566";
+    return savedUrl || defaultServerUrl;
   });
   const [entityValues, setEntityValues] = useState<Record<string, string>>({});
   const [selectedFeatures, setSelectedFeatures] = useState<
     Record<string, boolean>
   >({});
 
-  useEffect(() => {
-    localStorage.setItem("feast-feature-server-url", serverUrl);
-  }, [serverUrl]);
-
   if (feastObjectQuery.isLoading) {
     return <EuiText>Loading...</EuiText>;
   }
@@ -106,8 +105,12 @@ const CurlGeneratorTab = ({
         <EuiFormRow label="Feature Server URL">
           <EuiFieldText
             value={serverUrl}
-            onChange={(e) => setServerUrl(e.target.value)}
-            placeholder="http://localhost:6566"
+            onChange={(e) => {
+              const nextValue = e.target.value;
+              setServerUrl(nextValue);
+              localStorage.setItem("feast-feature-server-url", nextValue);
+            }}
+            placeholder={defaultServerUrl}
           />
         </EuiFormRow>
 
