diff --git a/frontend/src/utils/get-valid-fallback-host.ts b/frontend/src/utils/get-valid-fallback-host.ts
index 4b9c85b06e..6b1482520e 100644
--- a/frontend/src/utils/get-valid-fallback-host.ts
+++ b/frontend/src/utils/get-valid-fallback-host.ts
@@ -11,8 +11,7 @@
  */
 export const getValidFallbackHost = () => {
   if (typeof window !== "undefined") {
-    const { hostname, host } = window.location;
-    if (hostname !== "localhost") return host;
+    return window.location.host;
   }
 
   // Fallback is localhost:3000 because that is the default port for the server
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 30a78092eb..c5c8c7ebda 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,37 +1,71 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /// <reference types="vitest" />
 /// <reference types="vite-plugin-svgr/client" />
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
 import { vitePlugin as remix } from "@remix-run/dev";
 
-export default defineConfig(() => ({
-  plugins: [
-    !process.env.VITEST &&
-      remix({
-        future: {
-          v3_fetcherPersist: true,
-          v3_relativeSplatPath: true,
-          v3_throwAbortReason: true,
+export default defineConfig(({ mode }) => {
+  const {
+      VITE_BACKEND_HOST = "127.0.0.1:3000",
+      VITE_USE_TLS = "false",
+      VITE_FRONTEND_PORT = "3001",
+      VITE_INSECURE_SKIP_VERIFY = "false",
+      VITE_WATCH_USE_POLLING = "false",
+  } = loadEnv(mode, process.cwd());
+
+  const USE_TLS = VITE_USE_TLS === "true";
+  const INSECURE_SKIP_VERIFY = VITE_INSECURE_SKIP_VERIFY === "true";
+  const PROTOCOL = USE_TLS ? "https" : "http";
+  const WS_PROTOCOL = USE_TLS ? "wss" : "ws";
+
+  const API_URL = `${PROTOCOL}://${VITE_BACKEND_HOST}/`;
+  const WS_URL = `${WS_PROTOCOL}://${VITE_BACKEND_HOST}/`;
+  const FE_PORT = Number.parseInt(VITE_FRONTEND_PORT, 10);
+  return {
+    plugins: [
+      !process.env.VITEST &&
+        remix({
+          future: {
+            v3_fetcherPersist: true,
+            v3_relativeSplatPath: true,
+            v3_throwAbortReason: true,
+          },
+          appDirectory: "src",
+          ssr: false,
+        }),
+      viteTsconfigPaths(),
+      svgr(),
+    ],
+    server: {
+      port: FE_PORT,
+      proxy: {
+        "/api": {
+          target: API_URL,
+          changeOrigin: true,
+          secure: !INSECURE_SKIP_VERIFY,
         },
-        appDirectory: "src",
-        ssr: false,
-      }),
-    viteTsconfigPaths(),
-    svgr(),
-  ],
-  ssr: {
-    noExternal: ["react-syntax-highlighter"],
-  },
-  clearScreen: false,
-  test: {
-    environment: "jsdom",
-    setupFiles: ["vitest.setup.ts"],
-    coverage: {
-      reporter: ["text", "json", "html", "lcov", "text-summary"],
-      reportsDirectory: "coverage",
-      include: ["src/**/*.{ts,tsx}"],
+        "/ws": {
+          target: WS_URL,
+          ws: true,
+          changeOrigin: true,
+          secure: !INSECURE_SKIP_VERIFY,
+        },
+      },
     },
-  },
-}));
+    ssr: {
+      noExternal: ["react-syntax-highlighter"],
+    },
+    clearScreen: false,
+    test: {
+      environment: "jsdom",
+      setupFiles: ["vitest.setup.ts"],
+      coverage: {
+        reporter: ["text", "json", "html", "lcov", "text-summary"],
+        reportsDirectory: "coverage",
+        include: ["src/**/*.{ts,tsx}"],
+      },
+    },
+  }
+});