Vite dev server authentication tweaks (#4234)

* Add VITE_APP_PLATFORM_URL, error on dev server auth
* Remove experimentalDeepDynamicChunkOptimization

docs/DEVELOPMENT.md

@@ -57,7 +57,7 @@ NOTE: The `make` command in Windows will be `mingw32-make` with MinGW. For examp
 * `make fmt-ui` - Formats the UI source code
 * `make server-start` - Runs a development stash server in the `.local` directory
 * `make server-clean` - Removes the `.local` directory and all of its contents
-* `make ui-start` - Runs the UI in development mode. Requires a running Stash server to connect to. The server port can be changed from the default of `9999` using the environment variable `VITE_APP_PLATFORM_PORT`. The UI runs on port `3000` or the next available port.
+* `make ui-start` - Runs the UI in development mode. Requires a running Stash server to connect to - the server URL can be changed from the default of `http://localhost:9999` using the environment variable `VITE_APP_PLATFORM_URL`, but keep in mind that authentication cannot be used since the session authorization cookie cannot be sent cross-origin. The UI runs on port `3000` or the next available port.
 
 ## Local development quickstart
 

ui/v2.5/src/App.tsx

@@ -102,7 +102,7 @@ export const App: React.FC = () => {
   useEffect(() => {
     (async () => {
       try {
-        const res = await fetch(getPlatformURL() + "customlocales");
+        const res = await fetch(getPlatformURL("customlocales"));
         if (res.ok) {
           setCustomMessages(await res.json());
         }

ui/v2.5/src/core/createClient.ts

@@ -114,40 +114,39 @@ const possibleTypes = {
 export const baseURL =
   document.querySelector("base")?.getAttribute("href") ?? "/";
 
-export const getPlatformURL = (ws?: boolean) => {
-  const platformUrl = new URL(window.location.origin + baseURL);
+export const getPlatformURL = (path?: string) => {
+  let url = new URL(window.location.origin + baseURL);
 
   if (import.meta.env.DEV) {
-    platformUrl.port = import.meta.env.VITE_APP_PLATFORM_PORT ?? "9999";
-
-    if (import.meta.env.VITE_APP_HTTPS === "true") {
-      platformUrl.protocol = "https:";
-    }
-  }
-
-  if (ws) {
-    if (platformUrl.protocol === "https:") {
-      platformUrl.protocol = "wss:";
+    if (import.meta.env.VITE_APP_PLATFORM_URL) {
+      url = new URL(import.meta.env.VITE_APP_PLATFORM_URL);
     } else {
-      platformUrl.protocol = "ws:";
+      url.port = import.meta.env.VITE_APP_PLATFORM_PORT ?? "9999";
     }
   }
 
-  return platformUrl;
+  if (path) {
+    url.pathname += path;
+  }
+
+  return url;
 };
 
 export const createClient = () => {
-  const platformUrl = getPlatformURL();
-  const wsPlatformUrl = getPlatformURL(true);
+  const url = getPlatformURL("graphql");
 
-  const url = `${platformUrl}graphql`;
-  const wsUrl = `${wsPlatformUrl}graphql`;
+  const wsUrl = getPlatformURL("graphql");
+  if (wsUrl.protocol === "https:") {
+    wsUrl.protocol = "wss:";
+  } else {
+    wsUrl.protocol = "ws:";
+  }
 
-  const httpLink = createUploadLink({ uri: url });
+  const httpLink = createUploadLink({ uri: url.toString() });
 
   const wsLink = new GraphQLWsLink(
     createWSClient({
-      url: wsUrl,
+      url: wsUrl.toString(),
       retryAttempts: Infinity,
       shouldRetry() {
         return true;
@@ -156,10 +155,20 @@ export const createClient = () => {
   );
 
   const errorLink = onError(({ networkError }) => {
-    // handle unauthorized error by redirecting to the login page
+    // handle graphql unauthorized error
     if (networkError && (networkError as ServerError).statusCode === 401) {
+      if (import.meta.env.DEV) {
+        alert(`\
+GraphQL server error: 401 Unauthorized
+Authentication cannot be used with the dev server, since the session authorization cookie cannot be sent cross-origin.
+Please disable it on the server and refresh the page.`);
+        return;
+      }
       // redirect to login page
-      const newURL = new URL(`${baseURL}login`, window.location.toString());
+      const newURL = new URL(
+        getPlatformURL("login"),
+        window.location.toString()
+      );
       newURL.searchParams.append("returnURL", window.location.href);
       window.location.href = newURL.toString();
     }

ui/v2.5/src/globals.d.ts

@@ -5,11 +5,10 @@ declare module "*.md" {
   export default src;
 }
 
-/* eslint-disable-next-line  @typescript-eslint/naming-convention */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 interface ImportMetaEnv {
   readonly VITE_APP_GITHASH?: string;
   readonly VITE_APP_STASH_VERSION?: string;
   readonly VITE_APP_DATE?: string;
-  readonly VITE_APP_PLATFORM_PORT?: string;
-  readonly VITE_APP_HTTPS?: string;
+  readonly VITE_APP_PLATFORM_URL?: string;
 }

ui/v2.5/src/index.tsx

@@ -9,7 +9,11 @@ import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <>
-    <link rel="stylesheet" type="text/css" href={`${getPlatformURL()}css`} />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href={getPlatformURL("css").toString()}
+    />
     <BrowserRouter basename={baseURL}>
       <ApolloProvider client={getClient()}>
         <App />
@@ -20,7 +24,7 @@ ReactDOM.render(
 );
 
 const script = document.createElement("script");
-script.src = `${getPlatformURL()}javascript`;
+script.src = getPlatformURL("javascript").toString();
 document.body.appendChild(script);
 
 // If you want your app to work offline and load faster, you can change

ui/v2.5/vite.config.js

@@ -34,11 +34,6 @@ export default defineConfig(() => {
       outDir: "build",
       sourcemap: sourcemap,
       reportCompressedSize: false,
-      rollupOptions: {
-        output: {
-          experimentalDeepDynamicChunkOptimization: true,
-        },
-      },
     },
     optimizeDeps: {
       entries: "src/index.tsx",