From f3b4dbce49d4f88bd40ccb914d32d81f9052e173 Mon Sep 17 00:00:00 2001
From: Aveline <352441+ym@users.noreply.github.com>
Date: Mon, 17 Feb 2025 11:34:38 +0100
Subject: [PATCH] feat: use the api url from device config (#161)

---
 ui/.env.development                      |  2 ++
 ui/.env.device                           |  2 ++
 ui/.env.production                       |  4 +++-
 ui/index.html                            |  1 +
 ui/src/components/AuthLayout.tsx         |  3 ++-
 ui/src/components/Header.tsx             |  5 +++--
 ui/src/components/MountMediaDialog.tsx   |  3 ++-
 ui/src/components/sidebar/settings.tsx   |  5 +++--
 ui/src/main.tsx                          |  3 ++-
 ui/src/routes/adopt.tsx                  |  7 ++++---
 ui/src/routes/devices.$id.deregister.tsx |  5 +++--
 ui/src/routes/devices.$id.rename.tsx     |  5 +++--
 ui/src/routes/devices.$id.setup.tsx      |  5 +++--
 ui/src/routes/devices.$id.tsx            | 13 +++++++------
 ui/src/routes/devices.tsx                |  3 ++-
 ui/src/routes/login-local.tsx            |  7 ++++---
 ui/src/routes/welcome-local.mode.tsx     |  5 +++--
 ui/src/routes/welcome-local.password.tsx |  5 +++--
 ui/src/routes/welcome-local.tsx          |  3 ++-
 ui/src/ui.config.ts                      | 23 +++++++++++++++++++++++
 web.go                                   | 22 ++++++++++++++++++++++
 21 files changed, 99 insertions(+), 32 deletions(-)
 create mode 100644 ui/src/ui.config.ts

diff --git a/ui/.env.development b/ui/.env.development
index 4534cc5..172328c 100644
--- a/ui/.env.development
+++ b/ui/.env.development
@@ -2,3 +2,5 @@ VITE_SIGNAL_API=http://localhost:3000
 
 VITE_CLOUD_APP=http://localhost:5173
 VITE_CLOUD_API=http://localhost:3000
+
+VITE_JETKVM_HEAD=
\ No newline at end of file
diff --git a/ui/.env.device b/ui/.env.device
index f13097c..2aaa6a7 100644
--- a/ui/.env.device
+++ b/ui/.env.device
@@ -2,3 +2,5 @@ VITE_SIGNAL_API= # Uses the KVM device's IP address as the signal API endpoint
 
 VITE_CLOUD_APP=https://app.jetkvm.com
 VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=<script src="/device/ui-config.js"></script>
\ No newline at end of file
diff --git a/ui/.env.production b/ui/.env.production
index de65a37..2587c0c 100644
--- a/ui/.env.production
+++ b/ui/.env.production
@@ -1,4 +1,6 @@
 VITE_SIGNAL_API=https://api.jetkvm.com
 
 VITE_CLOUD_APP=https://app.jetkvm.com
-VITE_CLOUD_API=https://api.jetkvm.com
\ No newline at end of file
+VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=
\ No newline at end of file
diff --git a/ui/index.html b/ui/index.html
index af9bdfb..72d2594 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -28,6 +28,7 @@
     <title>JetKVM</title>
     <link rel="stylesheet" href="/fonts/fonts.css" />
     <link rel="icon" href="/favicon.png" />
+    %VITE_JETKVM_HEAD%
     <script>
       // Initial theme setup
       document.documentElement.classList.toggle(
diff --git a/ui/src/components/AuthLayout.tsx b/ui/src/components/AuthLayout.tsx
index 8a4e6fe..5ed427a 100644
--- a/ui/src/components/AuthLayout.tsx
+++ b/ui/src/components/AuthLayout.tsx
@@ -6,6 +6,7 @@ import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
 import Fieldset from "@components/Fieldset";
 import GridBackground from "@components/GridBackground";
 import StepCounter from "@components/StepCounter";
+import { CLOUD_API } from "@/ui.config";
 
 type AuthLayoutProps = {
   title: string;
@@ -62,7 +63,7 @@ export default function AuthLayout({
               <Fieldset className="space-y-12">
                 <div className="max-w-sm mx-auto space-y-4">
                   <form
-                    action={`${import.meta.env.VITE_CLOUD_API}/oidc/google`}
+                    action={`${CLOUD_API}/oidc/google`}
                     method="POST"
                   >
                     {/*This could be the KVM ID*/}
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index a5fe429..e90fad7 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -14,6 +14,7 @@ import PeerConnectionStatusCard from "@components/PeerConnectionStatusCard";
 import api from "../api";
 import { isOnDevice } from "../main";
 import { Button, LinkButton } from "./Button";
+import { CLOUD_API, SIGNAL_API } from "@/ui.config";
 
 interface NavbarProps {
   isLoggedIn: boolean;
@@ -37,8 +38,8 @@ export default function DashboardNavbar({
   const navigate = useNavigate();
   const onLogout = useCallback(async () => {
     const logoutUrl = isOnDevice
-      ? `${import.meta.env.VITE_SIGNAL_API}/auth/logout`
-      : `${import.meta.env.VITE_CLOUD_API}/logout`;
+      ? `${SIGNAL_API}/auth/logout`
+      : `${CLOUD_API}/logout`;
     const res = await api.POST(logoutUrl);
     if (!res.ok) return;
 
diff --git a/ui/src/components/MountMediaDialog.tsx b/ui/src/components/MountMediaDialog.tsx
index c3ef59d..4021f76 100644
--- a/ui/src/components/MountMediaDialog.tsx
+++ b/ui/src/components/MountMediaDialog.tsx
@@ -35,6 +35,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import notifications from "../notifications";
 import Fieldset from "./Fieldset";
 import { isOnDevice } from "../main";
+import { SIGNAL_API } from "@/ui.config";
 
 export default function MountMediaModal({
   open,
@@ -1119,7 +1120,7 @@ function UploadFileView({
     alreadyUploadedBytes: number,
     dataChannel: string,
   ) {
-    const uploadUrl = `${import.meta.env.VITE_SIGNAL_API}/storage/upload?uploadId=${dataChannel}`;
+    const uploadUrl = `${SIGNAL_API}/storage/upload?uploadId=${dataChannel}`;
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", uploadUrl, true);
diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx
index 28691d8..37e79a4 100644
--- a/ui/src/components/sidebar/settings.tsx
+++ b/ui/src/components/sidebar/settings.tsx
@@ -26,6 +26,7 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
 import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 export function SettingsItem({
   title,
@@ -366,7 +367,7 @@ export default function SettingsSidebar() {
   const getDevice = useCallback(async () => {
     try {
       const status = await api
-        .GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
+        .GET(`${SIGNAL_API}/device`)
         .then(res => res.json() as Promise<LocalDevice>);
       setLocalDevice(status);
     } catch (error) {
@@ -677,7 +678,7 @@ export default function SettingsSidebar() {
                 <div>
                   <LinkButton
                     to={
-                      import.meta.env.VITE_CLOUD_APP +
+                      CLOUD_APP +
                       "/signup?deviceId=" +
                       deviceId +
                       `&returnTo=${location.href}adopt`
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index 91e7a04..69e3c7b 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -27,12 +27,13 @@ import LoginLocalRoute from "./routes/login-local";
 import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
 import WelcomeRoute from "./routes/welcome-local";
 import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
+import { CLOUD_API } from "./ui.config";
 
 export const isOnDevice = import.meta.env.MODE === "device";
 export const isInCloud = !isOnDevice;
 
 export async function checkAuth() {
-  const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/me`, {
+  const res = await fetch(`${CLOUD_API}/me`, {
     mode: "cors",
     credentials: "include",
     headers: { "Content-Type": "application/json" },
diff --git a/ui/src/routes/adopt.tsx b/ui/src/routes/adopt.tsx
index 6ff5798..213f19f 100644
--- a/ui/src/routes/adopt.tsx
+++ b/ui/src/routes/adopt.tsx
@@ -1,5 +1,6 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
 import api from "../api";
+import { CLOUD_API, CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
@@ -11,17 +12,17 @@ const loader = async ({ request }: LoaderFunctionArgs) => {
   const clientId = searchParams.get("clientId");
 
   const res = await api.POST(
-    `${import.meta.env.VITE_SIGNAL_API}/cloud/register`,
+    `${SIGNAL_API}/cloud/register`,
     {
       token: tempToken,
-      cloudApi: import.meta.env.VITE_CLOUD_API,
+      cloudApi: CLOUD_API,
       oidcGoogle,
       clientId,
     },
   );
 
   if (!res.ok) throw new Error("Failed to register device");
-  return redirect(import.meta.env.VITE_CLOUD_APP + `/devices/${deviceId}/setup`);
+  return redirect(CLOUD_APP + `/devices/${deviceId}/setup`);
 };
 
 export default function AdoptRoute() {
diff --git a/ui/src/routes/devices.$id.deregister.tsx b/ui/src/routes/devices.$id.deregister.tsx
index 2f446f6..d8a2d77 100644
--- a/ui/src/routes/devices.$id.deregister.tsx
+++ b/ui/src/routes/devices.$id.deregister.tsx
@@ -14,6 +14,7 @@ import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
@@ -24,7 +25,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
   const { deviceId } = Object.fromEntries(await request.formData());
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${deviceId}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${deviceId}`, {
       method: "DELETE",
       credentials: "include",
       headers: { "Content-Type": "application/json" },
@@ -46,7 +47,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
       method: "GET",
       credentials: "include",
       mode: "cors",
diff --git a/ui/src/routes/devices.$id.rename.tsx b/ui/src/routes/devices.$id.rename.tsx
index 969b1a8..06458e0 100644
--- a/ui/src/routes/devices.$id.rename.tsx
+++ b/ui/src/routes/devices.$id.rename.tsx
@@ -16,6 +16,7 @@ import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
 import api from "../api";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
@@ -31,7 +32,7 @@ const action = async ({ params, request }: ActionFunctionArgs) => {
   }
 
   try {
-    const res = await api.PUT(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await api.PUT(`${CLOUD_API}/devices/${id}`, {
       name,
     });
     if (!res.ok) {
@@ -49,7 +50,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
       method: "GET",
       credentials: "include",
       mode: "cors",
diff --git a/ui/src/routes/devices.$id.setup.tsx b/ui/src/routes/devices.$id.setup.tsx
index ddda233..3113f9c 100644
--- a/ui/src/routes/devices.$id.setup.tsx
+++ b/ui/src/routes/devices.$id.setup.tsx
@@ -16,10 +16,11 @@ import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
 import { checkAuth } from "@/main";
 import api from "../api";
+import { CLOUD_API } from "@/ui.config";
 
 const loader = async ({ params }: LoaderFunctionArgs) => {
   await checkAuth();
-  const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${params.id}`, {
+  const res = await fetch(`${CLOUD_API}/devices/${params.id}`, {
     method: "GET",
     mode: "cors",
     credentials: "include",
@@ -35,7 +36,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
 const action = async ({ request }: ActionFunctionArgs) => {
   // Handle form submission
   const { name, id, returnTo } = Object.fromEntries(await request.formData());
-  const res = await api.PUT(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, { name });
+  const res = await api.PUT(`${CLOUD_API}/devices/${id}`, { name });
 
   if (res.ok) {
     return redirect(returnTo?.toString() ?? `/devices/${id}`);
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index 287f171..bd950b2 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -36,6 +36,7 @@ import { DeviceStatus } from "./welcome-local";
 import FocusTrap from "focus-trap-react";
 import OtherSessionConnectedModal from "@/components/OtherSessionConnectedModal";
 import TerminalWrapper from "../components/Terminal";
+import { CLOUD_API, SIGNAL_API } from "@/ui.config";
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
@@ -56,12 +57,12 @@ export interface LocalDevice {
 
 const deviceLoader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (!res.isSetup) return redirect("/welcome");
 
-  const deviceRes = await api.GET(`${import.meta.env.VITE_SIGNAL_API}/device`);
+  const deviceRes = await api.GET(`${SIGNAL_API}/device`);
   if (deviceRes.status === 401) return redirect("/login-local");
   if (deviceRes.ok) {
     const device = (await deviceRes.json()) as LocalDevice;
@@ -74,11 +75,11 @@ const deviceLoader = async () => {
 const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> => {
   const user = await checkAuth();
 
-  const iceResp = await api.POST(`${import.meta.env.VITE_CLOUD_API}/webrtc/ice_config`);
+  const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`);
   const iceConfig = await iceResp.json();
 
   const deviceResp = await api.GET(
-    `${import.meta.env.VITE_CLOUD_API}/devices/${params.id}`,
+    `${CLOUD_API}/devices/${params.id}`,
   );
 
   if (!deviceResp.ok) {
@@ -142,7 +143,7 @@ export default function KvmIdRoute() {
 
       try {
         const sd = btoa(JSON.stringify(pc.localDescription));
-        const res = await api.POST(`${import.meta.env.VITE_SIGNAL_API}/webrtc/session`, {
+        const res = await api.POST(`${SIGNAL_API}/webrtc/session`, {
           sd,
           // When on device, we don't need to specify the device id, as it's already known
           ...(isOnDevice ? {} : { id: params.id }),
@@ -317,7 +318,7 @@ export default function KvmIdRoute() {
     }
 
     // Fire and forget
-    api.POST(`${import.meta.env.VITE_CLOUD_API}/webrtc/turn_activity`, {
+    api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
       bytesReceived: bytesReceivedDelta,
       bytesSent: bytesSentDelta,
     });
diff --git a/ui/src/routes/devices.tsx b/ui/src/routes/devices.tsx
index 035337a..664956d 100644
--- a/ui/src/routes/devices.tsx
+++ b/ui/src/routes/devices.tsx
@@ -9,6 +9,7 @@ import { User } from "@/hooks/stores";
 import EmptyCard from "@components/EmptyCard";
 import { LuMonitorSmartphone } from "react-icons/lu";
 import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   devices: { id: string; name: string; online: boolean; lastSeen: string }[];
@@ -19,7 +20,7 @@ export const loader = async () => {
   const user = await checkAuth();
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices`, {
+    const res = await fetch(`${CLOUD_API}/devices`, {
       method: "GET",
       credentials: "include",
       mode: "cors",
diff --git a/ui/src/routes/login-local.tsx b/ui/src/routes/login-local.tsx
index c5bf666..ff34995 100644
--- a/ui/src/routes/login-local.tsx
+++ b/ui/src/routes/login-local.tsx
@@ -12,15 +12,16 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
 import ExtLink from "../components/ExtLink";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (!res.isSetup) return redirect("/welcome");
 
-  const deviceRes = await api.GET(`${import.meta.env.VITE_SIGNAL_API}/device`);
+  const deviceRes = await api.GET(`${SIGNAL_API}/device`);
   if (deviceRes.ok) return redirect("/");
   return null;
 };
@@ -31,7 +32,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
 
   try {
     const response = await api.POST(
-      `${import.meta.env.VITE_SIGNAL_API}/auth/login-local`,
+      `${SIGNAL_API}/auth/login-local`,
       {
         password,
       },
diff --git a/ui/src/routes/welcome-local.mode.tsx b/ui/src/routes/welcome-local.mode.tsx
index b95a998..0bf83ae 100644
--- a/ui/src/routes/welcome-local.mode.tsx
+++ b/ui/src/routes/welcome-local.mode.tsx
@@ -9,10 +9,11 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
 import { cx } from "../cva.config";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");
@@ -30,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
 
   if (localAuthMode === "noPassword") {
     try {
-      await api.POST(`${import.meta.env.VITE_SIGNAL_API}/device/setup`, {
+      await api.POST(`${SIGNAL_API}/device/setup`, {
         localAuthMode,
       });
       return redirect("/");
diff --git a/ui/src/routes/welcome-local.password.tsx b/ui/src/routes/welcome-local.password.tsx
index ae6cd2b..1ccbef3 100644
--- a/ui/src/routes/welcome-local.password.tsx
+++ b/ui/src/routes/welcome-local.password.tsx
@@ -10,10 +10,11 @@ import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");
@@ -30,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
   }
 
   try {
-    const response = await api.POST(`${import.meta.env.VITE_SIGNAL_API}/device/setup`, {
+    const response = await api.POST(`${SIGNAL_API}/device/setup`, {
       localAuthMode: "password",
       password,
     });
diff --git a/ui/src/routes/welcome-local.tsx b/ui/src/routes/welcome-local.tsx
index 9be7729..dcb2e0d 100644
--- a/ui/src/routes/welcome-local.tsx
+++ b/ui/src/routes/welcome-local.tsx
@@ -9,6 +9,7 @@ import LogoMark from "@/assets/logo-mark.png";
 import { cx } from "cva";
 import api from "../api";
 import { redirect } from "react-router-dom";
+import { SIGNAL_API } from "@/ui.config";
 
 export interface DeviceStatus {
   isSetup: boolean;
@@ -16,7 +17,7 @@ export interface DeviceStatus {
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");
diff --git a/ui/src/ui.config.ts b/ui/src/ui.config.ts
new file mode 100644
index 0000000..9393985
--- /dev/null
+++ b/ui/src/ui.config.ts
@@ -0,0 +1,23 @@
+interface JetKVMConfig {
+  CLOUD_API?: string;
+  CLOUD_APP?: string;
+  DEVICE_VERSION?: string;
+}
+
+declare global {
+  interface Window { JETKVM_CONFIG?: JetKVMConfig; }
+}
+
+const getAppURL = (api_url?: string) => {
+  if (!api_url) {
+    return;
+  }
+  const url = new URL(api_url);
+  url.host = url.host.replace(/api\./, "app.");
+  // remove the ending slash
+  return url.toString().replace(/\/$/, "");
+}
+
+export const CLOUD_API = window.JETKVM_CONFIG?.CLOUD_API || import.meta.env.VITE_CLOUD_API;
+export const CLOUD_APP = window.JETKVM_CONFIG?.CLOUD_APP || getAppURL(CLOUD_API) || import.meta.env.VITE_CLOUD_APP;
+export const SIGNAL_API = import.meta.env.VITE_SIGNAL_API;
diff --git a/web.go b/web.go
index 02c7eea..6164115 100644
--- a/web.go
+++ b/web.go
@@ -2,6 +2,8 @@ package kvm
 
 import (
 	"embed"
+	"encoding/json"
+	"fmt"
 	"io/fs"
 	"net/http"
 	"path/filepath"
@@ -77,6 +79,9 @@ func setupRouter() *gin.Engine {
 	// We use this to determine if the device is setup
 	r.GET("/device/status", handleDeviceStatus)
 
+	// We use this to provide the UI with the device configuration
+	r.GET("/device/ui-config.js", handleDeviceUIConfig)
+
 	// We use this to setup the device in the welcome page
 	r.POST("/device/setup", handleSetup)
 
@@ -361,6 +366,23 @@ func handleDeviceStatus(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }
 
+func handleDeviceUIConfig(c *gin.Context) {
+	LoadConfig()
+
+	config, _ := json.Marshal(gin.H{
+		"CLOUD_API":      config.CloudURL,
+		"DEVICE_VERSION": builtAppVersion,
+	})
+	if config == nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to marshal config"})
+		return
+	}
+
+	response := fmt.Sprintf("window.JETKVM_CONFIG = %s;", config)
+
+	c.Data(http.StatusOK, "text/javascript; charset=utf-8", []byte(response))
+}
+
 func handleSetup(c *gin.Context) {
 	LoadConfig()