Refactor Dockerfile and configuration for dynamic base path handling

Dockerfile

@@ -18,8 +18,8 @@ RUN rm -f .npmrc
 COPY . .
 
 # Build the application
-ARG VITE_BASE_PATH=""
-ENV VITE_BASE_PATH=${VITE_BASE_PATH}
+ARG APP_SUBFOLDER=""
+ENV VITE_BASE_PATH=${APP_SUBFOLDER}
 RUN npm run build
 
 # Production stage - Use nginx for better performance
@@ -28,12 +28,12 @@ FROM nginx:1.29.1-alpine
 # Remove default nginx website
 RUN rm -rf /usr/share/nginx/html/*
 
-# Create subfolder structure dynamically based on VITE_BASE_PATH
-ARG VITE_BASE_PATH=""
-RUN if [ -n "$VITE_BASE_PATH" ]; then mkdir -p /usr/share/nginx/html/$VITE_BASE_PATH; fi
+# Create subfolder structure dynamically based on APP_SUBFOLDER
+ARG APP_SUBFOLDER=""
+RUN if [ -n "$APP_SUBFOLDER" ]; then mkdir -p /usr/share/nginx/html/$APP_SUBFOLDER; fi
 
 # Copy built application
-COPY --from=builder /app/build /usr/share/nginx/html/${VITE_BASE_PATH}
+COPY --from=builder /app/build /usr/share/nginx/html/${APP_SUBFOLDER}
 
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/nginx.conf
@@ -48,7 +48,7 @@ EXPOSE 80
 
 # Health check
 HEALTHCHECK --interval=120s --timeout=10s --start-period=60s --retries=3 \
-  CMD if [ -n "$VITE_BASE_PATH" ]; then curl -f http://localhost/$VITE_BASE_PATH/ || exit 1; else curl -f http://localhost/ || exit 1; fi
+  CMD if [ -n "$APP_SUBFOLDER" ]; then curl -f http://localhost/$APP_SUBFOLDER/ || exit 1; else curl -f http://localhost/ || exit 1; fi
 
 # Start nginx
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -215,8 +215,8 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm ci --only=production=false
 COPY . .
-ARG VITE_BASE_PATH=""
-ENV VITE_BASE_PATH=${VITE_BASE_PATH}
+ARG APP_SUBFOLDER=""
+ENV VITE_BASE_PATH=${APP_SUBFOLDER}
 RUN npm run build
 
 # Production stage
@@ -235,7 +235,7 @@ CMD ["nginx", "-g", "daemon off;"]
 docker build -t reverse-proxy-frontend .
 
 # For subfolder deployment (/reverse-proxy)
-docker build --build-arg VITE_BASE_PATH=reverse-proxy -t reverse-proxy-frontend .
+docker build --build-arg APP_SUBFOLDER=reverse-proxy -t reverse-proxy-frontend .
 ```
 
 ### Run Container

src/utils/paths.ts

@@ -15,11 +15,15 @@ export const getPublicPath = (path: string): string => {
   return `${normalizedBase}${cleanPath}`;
 };
 
-export const getRouterBasePath = (): string | undefined => {
+const getCleanBasePath = (): string => {
   const basePath = getBasePath();
-  if (basePath === "/") return undefined;
-  // Remove trailing slash if present and ensure it starts with a slash
-  let baseUrl = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
-  baseUrl = baseUrl.startsWith("/") ? baseUrl : `/${baseUrl}`;
-  return baseUrl;
+  if (basePath === "/") return "";
+  // Remove both leading and trailing slashes
+  return basePath.replace(/^\/|\/$/g, "");
+};
+
+export const getRouterBasePath = (): string | undefined => {
+  const basePath = getCleanBasePath();
+  if (!basePath) return undefined;
+  return `/${basePath}`;
 };

vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig(() => {
   const packageJson = JSON.parse(readFileSync("./package.json", "utf-8"));
 
   return {
-    base: process.env.VITE_BASE_PATH ? `/${process.env.VITE_BASE_PATH}/` : "/",
+    base: getViteBasePath(),
     plugins: [
       react(),
       viteTsconfigPaths(), // Enables TypeScript path mapping from tsconfig.json
@@ -42,3 +42,11 @@ export default defineConfig(() => {
     }
   };
 });
+
+const getViteBasePath = (): string => {
+  const basePath = process.env.VITE_BASE_PATH;
+  if (!basePath) return "/";
+  const cleanPath = basePath.replace(/^\/|\/$/g, "");
+  // Vite expects both leading and trailing slashes if not root
+  return `/${cleanPath}/`;
+};