From 87bdbb205866b02b07989ddbd2ad0d1ca2e9cc3c Mon Sep 17 00:00:00 2001
From: DingDongSoLong4 <99329275+DingDongSoLong4@users.noreply.github.com>
Date: Mon, 23 Oct 2023 07:52:02 +0200
Subject: [PATCH] Vite dev server authentication tweaks (#4234)
* Add VITE_APP_PLATFORM_URL, error on dev server auth
* Remove experimentalDeepDynamicChunkOptimization
---
docs/DEVELOPMENT.md | 2 +-
ui/v2.5/src/App.tsx | 2 +-
ui/v2.5/src/core/createClient.ts | 53 +++++++++++++++++++-------------
ui/v2.5/src/globals.d.ts | 5 ++-
ui/v2.5/src/index.tsx | 8 +++--
ui/v2.5/vite.config.js | 5 ---
6 files changed, 41 insertions(+), 34 deletions(-)
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",