fix: set base URL to '/' and add comprehensive tests

.github/workflows/build.yml

@@ -7,7 +7,7 @@ permissions:
   issues: write
 
 env:
-  VITE_MSW_S3_URL: https://s3.amazonaws.com/noam-gaash.co.il/${{ github.run_id }}/open-bus/${{ github.run_number }}/storybook/mockServiceWorker.js
+  ASSET_URL: https://s3.amazonaws.com/noam-gaash.co.il/${{ github.run_id }}/open-bus/${{ github.run_number }}/
 
 jobs:
   build:

tests/baseUrl.spec.ts

@@ -0,0 +1,89 @@
+import { expect, setupTest, test } from './utils'
+
+test.describe('Base URL configuration tests', () => {
+  test('assets should load from root path on nested routes', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to a nested route (e.g., /profile/:id)
+    // We'll use a direct navigation to simulate the issue scenario
+    await page.goto('/profile/8235701')
+
+    // Wait for the page to load
+    await page.waitForLoadState('networkidle')
+
+    // Check that JavaScript assets are loaded from the correct path
+    const scriptTags = await page.locator('script[src]').all()
+    const scriptSources = await Promise.all(scriptTags.map((tag) => tag.getAttribute('src')))
+
+    // Filter for asset files (typically in /assets/ directory)
+    const assetScripts = scriptSources.filter((src) => src && src.includes('/assets/'))
+
+    // Verify that asset paths start with /assets/ (from root) and not /profile/assets/
+    for (const src of assetScripts) {
+      if (src) {
+        expect(src.startsWith('/assets/')).toBeTruthy()
+        expect(src.startsWith('/profile/assets/')).toBeFalsy()
+      }
+    }
+
+    // Also verify that all script resources loaded successfully (no 404s)
+    const failedRequests: string[] = []
+    page.on('requestfailed', (request) => {
+      if (request.resourceType() === 'script') {
+        failedRequests.push(request.url())
+      }
+    })
+
+    // Reload the page to trigger all resource loads again
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+
+    // Check that no script requests failed
+    expect(failedRequests.length).toBe(0)
+  })
+
+  test('assets should load correctly on dashboard page', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to dashboard (a top-level route)
+    await page.goto('/dashboard')
+    await page.waitForLoadState('networkidle')
+
+    // Check that JavaScript assets are loaded from the correct path
+    const scriptTags = await page.locator('script[src]').all()
+    const scriptSources = await Promise.all(scriptTags.map((tag) => tag.getAttribute('src')))
+
+    // Filter for asset files
+    const assetScripts = scriptSources.filter((src) => src && src.includes('/assets/'))
+
+    // Verify that asset paths start with /assets/ (from root)
+    for (const src of assetScripts) {
+      if (src) {
+        expect(src.startsWith('/assets/')).toBeTruthy()
+      }
+    }
+  })
+
+  test('CSS assets should load from root path on nested routes', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to a nested route
+    await page.goto('/profile/8235701')
+    await page.waitForLoadState('networkidle')
+
+    // Check that CSS assets are loaded from the correct path
+    const linkTags = await page.locator('link[rel="stylesheet"]').all()
+    const linkHrefs = await Promise.all(linkTags.map((tag) => tag.getAttribute('href')))
+
+    // Filter for asset files
+    const assetLinks = linkHrefs.filter((href) => href && href.includes('/assets/'))
+
+    // Verify that asset paths start with /assets/ (from root) and not /profile/assets/
+    for (const href of assetLinks) {
+      if (href) {
+        expect(href.startsWith('/assets/')).toBeTruthy()
+        expect(href.startsWith('/profile/assets/')).toBeFalsy()
+      }
+    }
+  })
+})

vite.config.ts

@@ -1,14 +1,14 @@
 import react from '@vitejs/plugin-react-oxc'
 import { loadEnv } from 'vite'
+import { defineConfig } from 'vite'
 import IstanbulPlugin from 'vite-plugin-istanbul'
-import { defineConfig } from 'vitest/config'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
 
   return {
-    base: env?.ASSET_URL || '',
+    base: env?.ASSET_URL || '/',
     plugins: [
       react(),
       ...(env?.VITE_COVERAGE