Fix 404 issue on reload (#581)

* Use custom RELOAD_URL constant * Use BASE_URL instead of GRAPH_EXP_ENV_ROOT_FOLDER * Fix formatting
aws · Sep 4, 2024 · 9329c96 · 9329c96
1 parent 7bb41f2
commit 9329c96
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/packages/graph-explorer/index.html b/packages/graph-explorer/index.html
@@ -2,26 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%GRAPH_EXP_ENV_ROOT_FOLDER%/favicon.ico" />
+    <link rel="icon" href="%BASE_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Graph Explorer" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%GRAPH_EXP_ENV_ROOT_FOLDER%/apple-touch-icon.png"
+      href="%BASE_URL%/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%GRAPH_EXP_ENV_ROOT_FOLDER%/favicon-32x32.png"
+      href="%BASE_URL%/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%GRAPH_EXP_ENV_ROOT_FOLDER%/favicon-16x16.png"
+      href="%BASE_URL%/favicon-16x16.png"
     />
     <link
       rel="mask-icon"
@@ -33,7 +33,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%GRAPH_EXP_ENV_ROOT_FOLDER%/manifest.json" />
+    <link rel="manifest" href="%BASE_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -45,6 +45,7 @@
     -->
     <title>Graph Explorer</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/packages/graph-explorer/src/core/AppErrorPage.tsx b/packages/graph-explorer/src/core/AppErrorPage.tsx
@@ -7,8 +7,7 @@ import {
   Paragraph,
   ResetIcon,
 } from "@/components";
-import { env } from "@/utils";
-import { APP_NAME } from "@/utils/constants";
+import { APP_NAME, RELOAD_URL } from "@/utils/constants";
 
 /** This is the app wide error page that will be shown when the app essentially crashes */
 export default function AppErrorPage(props: FallbackProps) {
@@ -24,7 +23,7 @@ export default function AppErrorPage(props: FallbackProps) {
         </div>
 
         {/* Force a full reload of the app in the browser */}
-        <a href={env.BASE_URL}>
+        <a href={RELOAD_URL}>
           <Button variant="filled" size="large" icon={<ResetIcon />}>
             Reload {APP_NAME}
           </Button>

diff --git a/packages/graph-explorer/src/utils/constants.ts b/packages/graph-explorer/src/utils/constants.ts
@@ -5,3 +5,9 @@ export const DEFAULT_CONCURRENT_REQUESTS_LIMIT = 10;
 
 /** The string "Graph Explorer". */
 export const APP_NAME = "Graph Explorer";
+
+/** The root URL for the app used for reloading fresh. */
+export const RELOAD_URL =
+  import.meta.env.BASE_URL.substring(-1) !== "/"
+    ? import.meta.env.BASE_URL + "/"
+    : import.meta.env.BASE_URL;
diff --git a/packages/graph-explorer/src/workspaces/Settings/LoadConfigButton.tsx b/packages/graph-explorer/src/workspaces/Settings/LoadConfigButton.tsx
@@ -19,8 +19,7 @@ import {
   type SerializedBackup,
 } from "@/core/StateProvider/localDb";
 import { useDebounceValue } from "@/hooks";
-import { env } from "@/utils";
-import { APP_NAME } from "@/utils/constants";
+import { APP_NAME, RELOAD_URL } from "@/utils/constants";
 
 export default function LoadConfigButton() {
   const [file, setFile] = useState<File | null>(null);
@@ -244,7 +243,7 @@ function SuccessModal({ success }: { success: boolean }) {
           </div>
 
           {/* Force a full reload of the app in the browser */}
-          <a href={env.BASE_URL} className="self-end">
+          <a href={RELOAD_URL} className="self-end">
             <Button variant="filled" size="large">
               Reload {APP_NAME}
             </Button>