Implement runtime BASE_PATH support with middleware

Co-authored-by: nickshanks347 <11299982+nickshanks347@users.noreply.github.com>

Author: Copilot

.docker/compose-build.yml

@@ -12,4 +12,5 @@ services:
       - SONARR_API_KEY=YOUR_SONARR_API_KEY
       - RADARR_URL=http://radarr:7878
       - RADARR_API_KEY=YOUR_RADARR_API_KEY
+      - BASE_PATH=/monitarr  # Test subfolder hosting
     restart: unless-stopped

lib/basePath.ts

@@ -0,0 +1,65 @@
+/**
+ * Get the base path from environment variable
+ * This is used to support hosting the app in a subfolder
+ */
+export function getBasePath(): string {
+  // On the client side, we can get the base path from the environment
+  if (typeof window !== 'undefined') {
+    return process.env.NEXT_PUBLIC_BASE_PATH || '';
+  }
+  
+  // On the server side, use the environment variable
+  return process.env.BASE_PATH || '';
+}
+
+/**
+ * Create a URL that respects the base path configuration
+ */
+export function createUrl(path: string): string {
+  const basePath = getBasePath();
+  
+  // Remove leading slash from path if it exists
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  
+  // If no base path, just return the path with leading slash
+  if (!basePath) {
+    return `/${cleanPath}`;
+  }
+  
+  // Combine base path with the route path
+  return `${basePath}/${cleanPath}`;
+}
+
+/**
+ * Get the current base path for client-side usage
+ * This extracts the base path from the current URL
+ */
+export function getCurrentBasePath(): string {
+  if (typeof window === 'undefined') {
+    return getBasePath();
+  }
+  
+  const pathname = window.location.pathname;
+  
+  // Known application routes - adjust these based on your app structure
+  const appRoutes = ['/', '/api'];
+  
+  // Check if current path contains any known route
+  for (const route of appRoutes) {
+    const routeIndex = pathname.indexOf(route);
+    if (routeIndex > 0) {
+      return pathname.substring(0, routeIndex);
+    }
+  }
+  
+  // If we're at root and there might be a base path
+  if (pathname !== '/') {
+    // Check if this could be a base path by looking for common patterns
+    const segments = pathname.split('/').filter(Boolean);
+    if (segments.length === 1) {
+      return `/${segments[0]}`;
+    }
+  }
+  
+  return '';
+}

middleware.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const basePath = process.env.BASE_PATH || '';
+  
+  // If no base path is configured, proceed normally
+  if (!basePath) {
+    return NextResponse.next();
+  }
+
+  const url = request.nextUrl.clone();
+  
+  // Skip middleware for static files and internal Next.js routes
+  if (
+    url.pathname.startsWith('/_next') ||
+    url.pathname.startsWith('/api/_next') ||
+    url.pathname.includes('.')
+  ) {
+    return NextResponse.next();
+  }
+  
+  // Handle requests that already include the base path
+  if (url.pathname.startsWith(basePath)) {
+    // Remove the base path from the pathname for internal routing
+    const newPathname = url.pathname.slice(basePath.length) || '/';
+    url.pathname = newPathname;
+    return NextResponse.rewrite(url);
+  }
+  
+  // Handle API routes - they should work under base path
+  if (url.pathname.startsWith('/api')) {
+    // Rewrite API calls to work under base path
+    return NextResponse.next();
+  }
+  
+  // For all other routes (including root), redirect to include base path
+  if (!url.pathname.startsWith(basePath)) {
+    url.pathname = basePath + url.pathname;
+    return NextResponse.redirect(url);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    '/((?!_next/static|_next/image|favicon.ico).*)',
+  ],
+};

next.config.mjs

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
-    basePath: process.env.BASE_PATH || '',
+    env: {
+        NEXT_PUBLIC_BASE_PATH: process.env.BASE_PATH || '',
+    },
 };
 
 export default nextConfig;