in progress

apps/shelter-web/.env.sample

@@ -1,4 +1,6 @@
 # only Vars prefixed with `VITE_` will be available on to the client
-VITE_API_URL=http://localhost:8000
-VITE_CSRF_COOKIE_NAME=csrftoken
-VITE_CSRF_HEADER_NAME=x-csrftoken
+VITE_SHELTER_API_URL=http://localhost:8000
+
+# Optional Settings
+VITE_SHELTER_CSRF_COOKIE_NAME=csrftoken
+VITE_SHELTER_CSRF_HEADER_NAME=x-csrftoken

apps/shelter-web/src/app/shared/clients/apollo/csrf.ts

@@ -1,8 +1,10 @@
 import { ApolloLink, Observable } from '@apollo/client';
 import { getCookie } from '../../utils/storage/cookies';
 
-const csrfCookieName = import.meta.env.VITE_CSRF_COOKIE_NAME;
-const csrfHeaderName = import.meta.env.VITE_CSRF_HEADER_NAME;
+const csrfCookieName =
+  import.meta.env.VITE_SHELTER_CSRF_COOKIE_NAME || 'csrftoken';
+const csrfHeaderName =
+  import.meta.env.VITE_SHELTER_CSRF_HEADER_NAME || 'x-csrftoken';
 
 const extractCsrfToken = async (apiUrl: string, customFetch = fetch) => {
   const csrfToken = getCookie(csrfCookieName);

apps/shelter-web/src/main.tsx

@@ -7,17 +7,20 @@ import App from './app/app';
 import { createApolloClient } from './app/shared/clients/apollo/client';
 
 const apolloClient = createApolloClient({
-  apiUrl: import.meta.env.VITE_API_URL,
+  apiUrl: import.meta.env.VITE_SHELTER_API_URL,
 });
 
+// Get the basename from the current path
+const basename = window.location.pathname.split('/').slice(0, -1).join('/');
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <StrictMode>
     <ApolloProvider client={apolloClient}>
-      <BrowserRouter>
+      <BrowserRouter basename={basename}>
         <App />
       </BrowserRouter>
     </ApolloProvider>

apps/shelter-web/vite.config.mts

@@ -1,35 +1,39 @@
 /// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/shelter-web',
+export default defineConfig(() => {
+  const branchName = process.env.BRANCH_NAME || '/';
+  return {
+    root: __dirname,
+    base: branchName,
+    cacheDir: '../../node_modules/.vite/apps/shelter-web',
 
-  server: {
-    port: 4200,
-    host: 'localhost',
-  },
+    server: {
+      port: 4200,
+      host: 'localhost',
+    },
 
-  preview: {
-    port: 4300,
-    host: 'localhost',
-  },
+    preview: {
+      port: 4300,
+      host: 'localhost',
+    },
 
-  plugins: [react(), nxViteTsPaths()],
+    plugins: [react(), nxViteTsPaths()],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
+    // Uncomment this if you are using workers.
+    // worker: {
+    //  plugins: [ nxViteTsPaths() ],
+    // },
 
-  build: {
-    outDir: '../../dist/apps/shelter-web',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
+    build: {
+      outDir: '../../dist/apps/shelter-web',
+      emptyOutDir: true,
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
     },
-  },
+  };
 });