CodeWithCJ · alfonso46674 · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026
diff --git a/SparkyFitnessFrontend/eslint-rules/noHardcodedBasePathSelectors.cjs b/SparkyFitnessFrontend/eslint-rules/noHardcodedBasePathSelectors.cjs
@@ -0,0 +1,52 @@
+// Shared `no-restricted-syntax` selectors flagging a hardcoded,
+// domain-root-absolute path used directly as a JSX `src=`/`href=` value or as
+// a `fetch(...)` argument. Imported by both eslint.config.js (the rule) and
+// src/tests/eslint/noHardcodedBasePath.test.ts (the test), so the two stay in
+// sync automatically instead of drifting apart. Written as CommonJS (.cjs) so
+// it loads cleanly from both eslint.config.js's native ESM `import` (Node
+// synthesizes named exports from `exports.x = ...` via cjs-module-lexer) and
+// Jest's CommonJS test runtime (plain `require()`, no transform needed).
+exports.noHardcodedBasePathSelectors = [
+  {
+    selector:
+      'JSXAttribute[name.name=/^(src|href)$/] > Literal[value=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'JSXAttribute[name.name=/^(src|href)$/] > JSXExpressionContainer > Literal[value=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'JSXAttribute[name.name=/^(src|href)$/] > JSXExpressionContainer > TemplateLiteral > TemplateElement:first-child[value.raw=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'CallExpression[callee.name="fetch"] > Literal[value=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'CallExpression[callee.name="fetch"] > TemplateLiteral > TemplateElement:first-child[value.raw=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'CallExpression[callee.type="MemberExpression"][callee.property.name="fetch"] > Literal[value=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+  {
+    selector:
+      'CallExpression[callee.type="MemberExpression"][callee.property.name="fetch"] > TemplateLiteral > TemplateElement:first-child[value.raw=/^\\/(?!\\/)/]',
+    message:
+      'Hardcoded absolute path bypasses SPARKY_BASE_PATH. Wrap it with withBasePath() from @/utils/basePath.',
+  },
+];
diff --git a/SparkyFitnessFrontend/eslint-rules/noHardcodedBasePathSelectors.d.cts b/SparkyFitnessFrontend/eslint-rules/noHardcodedBasePathSelectors.d.cts
@@ -0,0 +1,6 @@
+export interface NoHardcodedBasePathSelector {
+  selector: string;
+  message: string;
+}
+
+export const noHardcodedBasePathSelectors: NoHardcodedBasePathSelector[];
diff --git a/SparkyFitnessFrontend/eslint.config.js b/SparkyFitnessFrontend/eslint.config.js
@@ -4,6 +4,7 @@ import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 import unusedImports from 'eslint-plugin-unused-imports';
+import { noHardcodedBasePathSelectors } from './eslint-rules/noHardcodedBasePathSelectors.cjs';
 
 export default tseslint.config(
   { ignores: ['dist', 'build', 'coverage', 'node_modules'] },
@@ -131,5 +132,12 @@ export default tseslint.config(
     rules: {
       'react-refresh/only-export-components': 'off',
     },
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    ignores: ['src/tests/**'],
+    rules: {
+      'no-restricted-syntax': ['error', ...noHardcodedBasePathSelectors],
+    },
   }
 );
diff --git a/SparkyFitnessFrontend/index.html b/SparkyFitnessFrontend/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/" />
     <meta charset="UTF-8" />
     <meta
       name="viewport"
@@ -10,20 +11,19 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="mobile-web-app-capable" content="yes" />
     <title>SparkyFitness</title>
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon" href="/images/SparkyFitness.webp" />
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="images/SparkyFitness.webp" />
     <meta name="description" content="Your Personal Fitness Companion" />
     <meta name="author" content="Lovable" />
-    <link rel="manifest" href="/manifest.json" />
 
     <meta property="og:title" content="SparkyFitness" />
     <meta property="og:description" content="Your Personal Fitness Companion" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="/images/SparkyFitness.webp" />
+    <meta property="og:image" content="images/SparkyFitness.webp" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="" />
-    <meta name="twitter:image" content="/images/SparkyFitness.webp" />
+    <meta name="twitter:image" content="images/SparkyFitness.webp" />
   </head>
 
   <body>

diff --git a/SparkyFitnessFrontend/public/manifest.json b/SparkyFitnessFrontend/public/manifest.json
diff --git a/SparkyFitnessFrontend/src/App.tsx b/SparkyFitnessFrontend/src/App.tsx
@@ -45,6 +45,7 @@ import {
 import { error as logError } from '@/utils/logging';
 import { getUserLoggingLevel } from '@/utils/userPreferences.ts';
 import { lazyWithChunkRecovery } from '@/utils/chunkRecovery';
+import { getRouterBasename } from '@/utils/basePath';
 const Auth = lazyWithChunkRecovery(() => import('@/pages/Auth/Auth'));
 const ForgotPassword = lazyWithChunkRecovery(
   () => import('@/pages/Auth/ForgotPassword')
@@ -300,7 +301,7 @@ const ReportsWrapper = () => {
   return <Reports key={timezone} />;
 };
 
-const router = createBrowserRouter([
+const routes = [
   {
     Component: Root,
     ErrorBoundary: RootErrorBoundary,
@@ -454,7 +455,11 @@ const router = createBrowserRouter([
       { path: '*', Component: NotFound },
     ],
   },
-]);
+];
+
+const router = createBrowserRouter(routes, {
+  basename: getRouterBasename(),
+});
 
 const App = () => {
   return (

diff --git a/SparkyFitnessFrontend/src/api/Chatbot/sparkyChatService.ts b/SparkyFitnessFrontend/src/api/Chatbot/sparkyChatService.ts
@@ -1,4 +1,4 @@
-import { apiCall } from '@/api/api';
+import { apiCall, API_BASE_URL } from '@/api/api';
 import { error } from '@/utils/logging';
 import { Message } from '@/types/Chatbot_types';
 
@@ -12,6 +12,8 @@ interface ChatHistory extends Message {
   created_at: string;
 }
 
+export const getChatStreamUrl = (): string => `${API_BASE_URL}/chat/stream`;
+
 export const loadUserPreferences = async (): Promise<UserPreferences> => {
   const data = await apiCall(`/user-preferences`, {
     method: 'GET',

diff --git a/SparkyFitnessFrontend/src/api/Exercises/exerciseService.ts b/SparkyFitnessFrontend/src/api/Exercises/exerciseService.ts
@@ -1,4 +1,5 @@
 import { apiCall } from '@/api/api';
+import { withBasePath } from '@/utils/basePath';
 import { ExerciseCSVData } from '@/pages/Exercises/ExerciseImportCSV';
 import {
   Exercise,
@@ -280,7 +281,7 @@ export const importFitFiles = async (
 };
 
 export const getBodyMapSvg = async (): Promise<string> => {
-  const response = await fetch('/images/muscle-male.svg');
+  const response = await fetch(withBasePath('/images/muscle-male.svg'));
   if (!response.ok) {
     throw new Error('Failed to fetch SVG');
   }

diff --git a/SparkyFitnessFrontend/src/api/api.ts b/SparkyFitnessFrontend/src/api/api.ts
@@ -1,6 +1,7 @@
 import { toast } from '@/hooks/use-toast';
 import * as logging from '@/utils/logging';
 import { getUserLoggingLevel } from '@/utils/userPreferences';
+import { getBasePath } from '@/utils/basePath';
 
 interface ApiCallOptions extends RequestInit {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15,7 +16,7 @@ interface ApiCallOptions extends RequestInit {
 
 class HttpApiError extends Error {}
 
-export const API_BASE_URL = '/api';
+export const API_BASE_URL = `${getBasePath()}/api`;
 //export const API_BASE_URL = 'http://192.168.1.111:3010';
 
 // A single-use guard so a reload triggered by gateway interception (see

diff --git a/SparkyFitnessFrontend/src/components/DraggableChatbotButton.tsx b/SparkyFitnessFrontend/src/components/DraggableChatbotButton.tsx
@@ -5,6 +5,7 @@ import { useChatbotVisibility } from '@/contexts/ChatbotVisibilityContext';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useAuth } from '@/hooks/useAuth';
 import { useActiveAIService } from '@/hooks/AI/useAIServiceSettings';
+import { withBasePath } from '@/utils/basePath';
 
 const BUTTON_SIZE = 56; // 14 * 4 = 56px (w-14)
 const MINIMIZED_SIZE = 24;
@@ -378,7 +379,7 @@ const DraggableChatbotButton: React.FC = () => {
       )}
 
       <img
-        src="/images/chatbot.gif"
+        src={withBasePath('/images/chatbot.gif')}
         alt="AI Chatbot"
         className={`w-full h-full object-contain drop-shadow-lg pointer-events-none
           ${isDragging ? 'scale-110' : 'hover:scale-110'} transition-transform duration-200`}

diff --git a/SparkyFitnessFrontend/src/hooks/AI/useSparkyChat.ts b/SparkyFitnessFrontend/src/hooks/AI/useSparkyChat.ts
@@ -7,6 +7,10 @@ import {
 } from '@/api/Chatbot/sparkyChatService';
 import { chatbotKeys } from '@/api/keys/ai';
 
+// Re-exported so consumers reach the chat-stream URL through the hooks layer,
+// keeping the api/ layer boundary consistent with the rest of the chat surface.
+export { getChatStreamUrl } from '@/api/Chatbot/sparkyChatService';
+
 export const useChatPreferencesQuery = () => {
   const { t } = useTranslation();
 

diff --git a/SparkyFitnessFrontend/src/i18n.ts b/SparkyFitnessFrontend/src/i18n.ts
@@ -3,6 +3,11 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import { getSupportedLanguages } from './utils/languageUtils';
+import { withBasePath } from './utils/basePath';
+
+export function getLocalesLoadPath(): string {
+  return withBasePath('/locales/{{lng}}/{{ns}}.json');
+}
 
 i18n
   .use(HttpApi)
@@ -23,7 +28,7 @@ i18n
       caches: ['localStorage', 'cookie'],
     },
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
+      loadPath: getLocalesLoadPath(),
     },
     react: {
       useSuspense: false,

diff --git a/SparkyFitnessFrontend/src/layouts/MainLayout.tsx b/SparkyFitnessFrontend/src/layouts/MainLayout.tsx
@@ -44,6 +44,7 @@ import { useCurrentVersionQuery } from '@/hooks/useGeneralQueries';
 import { useCycleSettings } from '@/hooks/useCycle';
 import { cn } from '@/lib/utils';
 import { getGridClassNormal } from '@/utils/layout';
+import { withBasePath } from '@/utils/basePath';
 
 interface AddCompItem {
   value: string;
@@ -439,7 +440,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
         <div className="flex justify-between items-center mb-6">
           <div className="flex items-center gap-1">
             <img
-              src="/images/SparkyFitness.webp"
+              src={withBasePath('/images/SparkyFitness.webp')}
               alt="SparkyFitness Logo"
               width={54}
               height={72}

diff --git a/SparkyFitnessFrontend/src/lib/auth-client.ts b/SparkyFitnessFrontend/src/lib/auth-client.ts
@@ -9,10 +9,15 @@ import { apiKeyClient } from '@better-auth/api-key/client';
 import { ssoClient } from '@better-auth/sso/client';
 import { passkeyClient } from '@better-auth/passkey/client';
 import { BetterAuthClientPlugin } from 'better-auth';
+import { getBasePath } from '@/utils/basePath';
+
+export function getAuthBaseUrl(): string {
+  return window.location.origin + getBasePath() + '/api/auth';
+}
 
 export const authClient = createAuthClient({
-  // Use /api/auth as the base URL.
-  baseURL: window.location.origin + '/api/auth',
+  // Use /api/auth as the base URL, adjusted for the configured sub-path.
+  baseURL: getAuthBaseUrl(),
   plugins: [
     magicLinkClient(),
     adminClient() as unknown as BetterAuthClientPlugin,

diff --git a/SparkyFitnessFrontend/src/pages/Auth/Auth.tsx b/SparkyFitnessFrontend/src/pages/Auth/Auth.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -35,6 +35,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { AuthResponse } from '@/types/auth';
 import { getErrorMessage } from '@/utils/api';
 import { useTranslation } from 'react-i18next';
+import { withBasePath } from '@/utils/basePath';
 
 const Auth = () => {
   const navigate = useNavigate();
@@ -415,7 +416,7 @@ const Auth = () => {
             <CardHeader className="text-center">
               <div className="flex items-center justify-center mb-4">
                 <img
-                  src="/images/SparkyFitness.webp"
+                  src={withBasePath('/images/SparkyFitness.webp')}
                   alt="SparkyFitness Logo"
                   className="h-10 w-10 mr-2"
                 />
@@ -514,12 +515,12 @@ const Auth = () => {
                         />
                       </div>
                       <div className="text-right text-sm">
-                        <a
-                          href="/forgot-password"
+                        <Link
+                          to="/forgot-password"
                           className="font-medium text-primary hover:underline"
                         >
                           Forgot password?
-                        </a>
+                        </Link>
                       </div>
                       <Button
                         type="submit"

diff --git a/SparkyFitnessFrontend/src/pages/Auth/ForgotPassword.tsx b/SparkyFitnessFrontend/src/pages/Auth/ForgotPassword.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -13,6 +14,7 @@ import { usePreferences } from '@/contexts/PreferencesContext';
 import { debug, info } from '@/utils/logging';
 import { useRequestPasswordResetMutation } from '@/hooks/Auth/useAuth';
 import { getErrorMessage } from '@/utils/api';
+import { withBasePath } from '@/utils/basePath';
 
 const ForgotPassword = () => {
   const { loggingLevel } = usePreferences();
@@ -49,7 +51,7 @@ const ForgotPassword = () => {
         <CardHeader className="text-center">
           <div className="flex items-center justify-center mb-4">
             <img
-              src="/images/SparkyFitness.webp"
+              src={withBasePath('/images/SparkyFitness.webp')}
               alt="SparkyFitness Logo"
               className="h-10 w-10 mr-2"
             />
@@ -84,9 +86,9 @@ const ForgotPassword = () => {
               </p>
             )}
             <div className="text-center text-sm">
-              <a href="/" className="font-medium text-primary hover:underline">
+              <Link to="/" className="font-medium text-primary hover:underline">
                 Back to Sign In
-              </a>
+              </Link>
             </div>
           </form>
         </CardContent>