diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md index d6dee6244..2590d0fd6 100644 --- a/docs/DEVELOPMENT.md +++ b/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 diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index f2c6ddd0e..e85ecb2fb 100644 --- a/ui/v2.5/src/App.tsx +++ b/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()); } diff --git a/ui/v2.5/src/core/createClient.ts b/ui/v2.5/src/core/createClient.ts index 6b81a4000..ef1ce33a2 100644 --- a/ui/v2.5/src/core/createClient.ts +++ b/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(); } diff --git a/ui/v2.5/src/globals.d.ts b/ui/v2.5/src/globals.d.ts index 360388e5f..2ed58f6ac 100644 --- a/ui/v2.5/src/globals.d.ts +++ b/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; } diff --git a/ui/v2.5/src/index.tsx b/ui/v2.5/src/index.tsx index 2e66ca2c3..f52e28cea 100755 --- a/ui/v2.5/src/index.tsx +++ b/ui/v2.5/src/index.tsx @@ -9,7 +9,11 @@ import * as serviceWorker from "./serviceWorker"; ReactDOM.render( <> - + @@ -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 diff --git a/ui/v2.5/vite.config.js b/ui/v2.5/vite.config.js index 84db5db79..ebec2618a 100644 --- a/ui/v2.5/vite.config.js +++ b/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",