Fix jwt-token

client/.env.example

@@ -0,0 +1,11 @@
+# Client Environment Configuration
+
+# Base path for the application (used for deployment in subdirectories)
+# Default: '/drones' in production, '' in development
+# Example: VITE_BASE_PATH=/my-custom-path
+# VITE_BASE_PATH=
+
+# API URL override (if API is hosted on different domain/port)
+# Default: auto-detected based on environment
+# Example: VITE_API_URL=https://api.example.com/api
+# VITE_API_URL=

client/src/App.jsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import { AuthProvider } from './contexts/AuthContext';
 import { SocketProvider } from './contexts/SocketContext';
+import APP_CONFIG from './config/app';
 import Layout from './components/Layout';
 import Dashboard from './pages/Dashboard';
 import MapView from './pages/MapView';
@@ -17,7 +18,7 @@ function App() {
   return (
     <AuthProvider>
       <SocketProvider>
-        <Router basename={process.env.NODE_ENV === 'production' ? '/drones' : ''}>
+        <Router basename={APP_CONFIG.basePath}>
           <div className="App">
             <Toaster 
               position="top-center"

client/src/config/app.js

@@ -0,0 +1,17 @@
+// Application configuration
+export const APP_CONFIG = {
+  // Base path for the application in production
+  // Can be overridden with VITE_BASE_PATH environment variable
+  basePath: import.meta.env.VITE_BASE_PATH || (import.meta.env.PROD ? '/drones' : ''),
+  
+  // API configuration
+  api: {
+    baseUrl: '/api' // This will be proxied by Vite in dev, and relative in production
+  },
+  
+  // Environment info
+  isDevelopment: import.meta.env.DEV,
+  isProduction: import.meta.env.PROD
+};
+
+export default APP_CONFIG;

client/src/contexts/SocketContext.jsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useEffect, useState } from 'react';
 import { io } from 'socket.io-client';
 import { useAuth } from './AuthContext';
 import toast from 'react-hot-toast';
+import APP_CONFIG from '../config/app';
 
 const SocketContext = createContext();
 
@@ -121,10 +122,10 @@ export const SocketProvider = ({ children }) => {
   useEffect(() => {
     if (isAuthenticated) {
       // Initialize socket connection
-      const newSocket = io(process.env.NODE_ENV === 'production' 
+      const newSocket = io(APP_CONFIG.isProduction 
         ? window.location.origin
         : 'http://localhost:3001', {
-        path: process.env.NODE_ENV === 'production' ? '/drones/socket.io/' : '/socket.io/'
+        path: APP_CONFIG.isProduction ? `${APP_CONFIG.basePath}/socket.io/` : '/socket.io/'
       });
 
       newSocket.on('connect', () => {

client/src/services/api.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import APP_CONFIG from '../config/app';
 
 // Determine API base URL based on environment
 const getApiBaseUrl = () => {
@@ -12,8 +13,8 @@ const getApiBaseUrl = () => {
     return 'http://localhost:3002/api';
   }
   
-  // Otherwise, use relative URL (same domain)
-  return '/drones/api';
+  // Otherwise, use the configured base path + /api
+  return `${APP_CONFIG.basePath}/api`;
 };
 
 const API_BASE_URL = getApiBaseUrl();

client/vite.config.js

@@ -1,9 +1,14 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+// Application base path configuration
+// Can be overridden with VITE_BASE_PATH environment variable
+// This should match the base path used in nginx/reverse proxy configuration
+const BASE_PATH = process.env.VITE_BASE_PATH || (process.env.NODE_ENV === 'production' ? '/drones/' : '/')
+
 export default defineConfig({
   plugins: [react()],
-  base: process.env.NODE_ENV === 'production' ? '/drones/' : '/',
+  base: BASE_PATH, // Used for asset paths and routing
   server: {
     port: 3000,
     proxy: {