Fix base path handling for Vite and React Router

Updated vite.config.js to set the base path only in production, ensuring local development uses '/'. Modified index.tsx to dynamically set React Router's basename from Vite's BASE_URL, improving routing when deployed to a subpath. Added a type declaration for serviceWorker to resolve TypeScript import issues.

Author: JorchCortez

src/index.tsx

@@ -2,14 +2,23 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from './serviceWorker.js';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 
-const container = document.getElementById('root');
+const container = document.getElementById('root') as HTMLElement | null;
+if (!container) {
+  throw new Error('Root container with id "root" not found');
+}
 const root = createRoot(container);
+// Use Vite's BASE_URL for correct subpath in production (e.g., /svprogresstracker/)
+// React Router expects basename without trailing slash
+const basename = (import.meta as any).env?.BASE_URL
+  ? (import.meta as any).env.BASE_URL.replace(/\/$/, '')
+  : '';
+
 root.render(
-  <Router>
+  <Router basename={basename}>
     <React.StrictMode>
       <App />
     </React.StrictMode>

src/types/serviceWorker.d.ts

@@ -0,0 +1,3 @@
+declare module './serviceWorker' {
+  export function unregister(): void;
+}

vite.config.js

@@ -2,18 +2,16 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
-export default defineConfig({
-  // Ensure assets resolve correctly when hosted at
-  // https://thecoderaccoons.github.io/svprogresstracker/
-  // If you later use a custom domain, update/remove this base.
-  base: '/svprogresstracker/',
+// Use base only in production so local dev runs at '/'
+export default defineConfig(({ mode }) => ({
+  base: mode === 'production' ? '/svprogresstracker/' : '/',
   plugins: [react()],
   resolve: {
     alias: {
-        '@': path.resolve(__dirname, 'src'),
-        '@media': path.resolve(__dirname, 'src/Media'),
-        '@utility': path.resolve(__dirname, 'src/Components/Utility'),
-        '@hooks': path.resolve(__dirname, 'src/Hooks'),
+      '@': path.resolve(__dirname, 'src'),
+      '@media': path.resolve(__dirname, 'src/Media'),
+      '@utility': path.resolve(__dirname, 'src/Components/Utility'),
+      '@hooks': path.resolve(__dirname, 'src/Hooks'),
     },
   },
   build: {
@@ -22,4 +20,4 @@ export default defineConfig({
   server: {
     open: true,
   },
-});
+}));