chore: implement dynamic basename routing for branch-based urls (#871)

Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Dec 23, 2024 · 37e72b5 · 37e72b5
1 parent 391ed5e
commit 37e72b5
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 11 deletions.
diff --git a/.env-ui.sample b/.env-ui.sample
@@ -5,4 +5,5 @@ ISSUER_UI_WARNING_MESSAGE=
 ISSUER_UI_IPFS_GATEWAY_URL=https://ipfs-proxy-cache.privado.id
 ISSUER_UI_SCHEMA_EXPLORER_AND_BUILDER_URL=https://tools.privado.id
 ISSUER_UI_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id
-ISSUER_UI_INSECURE=false
+ISSUER_UI_INSECURE=false
+ISSUER_UI_BASE_URL=/
diff --git a/ui/.env.sample b/ui/.env.sample
@@ -12,4 +12,6 @@ VITE_WARNING_MESSAGE=This Issuer Node is for testing purposes only. It is public
 
 VITE_IPFS_GATEWAY_URL=https://ipfs-proxy-cache.privado.id
 VITE_SCHEMA_EXPLORER_AND_BUILDER_URL=https://tools.privado.id
-VITE_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id
+VITE_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id
+
+VITE_BASE_URL=/
diff --git a/ui/scripts/deploy.sh b/ui/scripts/deploy.sh
@@ -15,6 +15,7 @@ echo "VITE_WARNING_MESSAGE=$ISSUER_UI_WARNING_MESSAGE" >> $ENV_FILENAME
 echo "VITE_IPFS_GATEWAY_URL=$ISSUER_UI_IPFS_GATEWAY_URL" >> $ENV_FILENAME
 echo "VITE_SCHEMA_EXPLORER_AND_BUILDER_URL=$ISSUER_UI_SCHEMA_EXPLORER_AND_BUILDER_URL" >> $ENV_FILENAME
 echo "VITE_DISPLAY_METHOD_BUILDER_URL=$ISSUER_UI_DISPLAY_METHOD_BUILDER_URL" >> $ENV_FILENAME
+echo "VITE_BASE_URL"=$ISSUER_UI_BASE_URL >> $ENV_FILENAME
 
 # Build app
 cd /app && npm run build

diff --git a/ui/src/adapters/env.ts b/ui/src/adapters/env.ts
@@ -8,6 +8,7 @@ export type EnvInput = {
   VITE_API_PASSWORD: string;
   VITE_API_URL: string;
   VITE_API_USERNAME: string;
+  VITE_BASE_URL?: string;
   VITE_BUILD_TAG?: string;
   VITE_DISPLAY_METHOD_BUILDER_URL: string;
   VITE_IPFS_GATEWAY_URL: string;
@@ -23,6 +24,7 @@ export const envParser = getStrictParser<EnvInput, Env>()(
       VITE_API_PASSWORD: z.string().min(1),
       VITE_API_URL: z.string().url(),
       VITE_API_USERNAME: z.string().min(1),
+      VITE_BASE_URL: z.string().optional(),
       VITE_BUILD_TAG: z.string().optional(),
       VITE_DISPLAY_METHOD_BUILDER_URL: z.string(),
       VITE_IPFS_GATEWAY_URL: z.string().url(),
@@ -39,6 +41,7 @@ export const envParser = getStrictParser<EnvInput, Env>()(
         VITE_API_PASSWORD,
         VITE_API_URL,
         VITE_API_USERNAME,
+        VITE_BASE_URL,
         VITE_BUILD_TAG,
         VITE_DISPLAY_METHOD_BUILDER_URL,
         VITE_IPFS_GATEWAY_URL,
@@ -52,6 +55,7 @@ export const envParser = getStrictParser<EnvInput, Env>()(
           url: VITE_API_URL,
           username: VITE_API_USERNAME,
         },
+        baseUrl: VITE_BASE_URL,
         buildTag: VITE_BUILD_TAG,
         displayMethodBuilderUrl: VITE_DISPLAY_METHOD_BUILDER_URL,
         ipfsGatewayUrl: VITE_IPFS_GATEWAY_URL,

diff --git a/ui/src/components/shared/RouterProvide.tsx b/ui/src/components/shared/RouterProvide.tsx
@@ -0,0 +1,11 @@
+import { PropsWithChildren } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { useEnvContext } from "src/contexts/Env";
+import { ROOT_PATH } from "src/utils/constants";
+
+export function RouterProvider(props: PropsWithChildren) {
+  const env = useEnvContext();
+  const baseName = env.baseUrl || ROOT_PATH;
+
+  return <BrowserRouter basename={baseName}>{props.children}</BrowserRouter>;
+}
diff --git a/ui/src/contexts/Env.tsx b/ui/src/contexts/Env.tsx
@@ -12,6 +12,7 @@ const defaultEnvContext: Env = {
     url: "",
     username: "",
   },
+  baseUrl: "",
   displayMethodBuilderUrl: "",
   ipfsGatewayUrl: "",
   issuer: {

diff --git a/ui/src/domain/env.ts b/ui/src/domain/env.ts
@@ -4,6 +4,7 @@ export type Env = {
     url: string;
     username: string;
   };
+  baseUrl?: string;
   buildTag?: string;
   displayMethodBuilderUrl: string;
   ipfsGatewayUrl: string;

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -3,9 +3,9 @@ import { extend as extendDayJsWith } from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 
 import { Router } from "src/components/shared/Router";
+import { RouterProvider } from "src/components/shared/RouterProvide";
 import { EnvProvider } from "src/contexts/Env";
 import { IdentityProvider } from "src/contexts/Identity";
 import { IssuerStateProvider } from "src/contexts/IssuerState";
@@ -26,18 +26,18 @@ const root = createRoot(rootElement);
 
 root.render(
   <StrictMode>
-    <BrowserRouter>
-      <ConfigProvider theme={theme}>
-        <App message={{ duration: TOAST_NOTIFICATION_TIMEOUT }}>
-          <EnvProvider>
+    <EnvProvider>
+      <RouterProvider>
+        <ConfigProvider theme={theme}>
+          <App message={{ duration: TOAST_NOTIFICATION_TIMEOUT }}>
             <IdentityProvider>
               <IssuerStateProvider>
                 <Router />
               </IssuerStateProvider>
             </IdentityProvider>
-          </EnvProvider>
-        </App>
-      </ConfigProvider>
-    </BrowserRouter>
+          </App>
+        </ConfigProvider>
+      </RouterProvider>
+    </EnvProvider>
   </StrictMode>
 );