diff --git a/docs/ROUTE_FIX.md b/docs/ROUTE_FIX.md new file mode 100644 index 0000000..325f866 --- /dev/null +++ b/docs/ROUTE_FIX.md @@ -0,0 +1,131 @@ +# Route Fix for Published App + +## Problem +When publishing the app to a static hosting service (like GitHub Pages), accessing the root URL `/` results in "Cannot GET /" error. This happens because: + +1. The app uses React Router for client-side routing +2. Static hosting servers don't understand client-side routes +3. When a user accesses `/`, the server looks for a physical file at that path +4. The server returns 404 because there's no file matching that route + +## Solution Applied + +### 1. Created `public/_redirects` File +This file tells compatible static hosts (Netlify, Render, etc.) to redirect all routes to `index.html`: + +``` +/* /index.html 200 +``` + +### 2. Created `public/404.html` +For hosts like GitHub Pages that use a 404 page, this file captures the route and stores it in sessionStorage: + +```html + + + + + + Redirecting... + + + + +

Redirecting...

+ + +``` + +### 3. Updated `index.html` +Added a script to restore the route from sessionStorage after the redirect: + +```html + +``` + +## How It Works + +1. User accesses `https://your-app.github.io/dashboard` +2. GitHub Pages returns 404 (no physical file at that path) +3. GitHub Pages serves `404.html` instead +4. `404.html` stores the URL in sessionStorage and redirects to `/` +5. `index.html` loads with the React app +6. The script in `index.html` reads sessionStorage and updates the URL +7. React Router sees `/dashboard` in the URL and renders the correct route + +## Enhanced Console Logging + +Added comprehensive trace logging throughout the initialization flow: + +### App Initialization (`App.tsx`) +- Current URL, pathname, search, hash +- Seed data loading progress +- App ready state +- Component preloading status + +### Route Configuration (`routes.tsx`) +- Enabled pages list with details +- Root page detection +- Route creation with paths + +### Router Provider (`RouterProvider.tsx`) +- Feature toggles state +- State and action context keys +- Routes memo updates +- Individual route rendering + +### Page Loader (`page-loader.ts`) +- Page configuration loading +- Enabled pages filtering +- Props resolution for each state/action +- Keyboard shortcuts configuration + +## Verification + +To verify the fix works: + +1. Build the app: `npm run build` +2. Serve the `dist` folder with a static server +3. Navigate to `/` - should load the home page +4. Navigate to `/dashboard` - should load dashboard +5. Refresh on `/dashboard` - should stay on dashboard (not 404) + +## Trace Console Output + +You can now trace the full initialization flow in the browser console: + +``` +[INIT] 🚀 main.tsx starting - BEGIN +[INIT] 📦 Importing React DOM +[INIT] ✅ React DOM imported +... +[APP] 🚀 App component initializing +[APP] 🌐 Current URL: https://... +[APP] 📍 Current pathname: / +... +[ROUTES] 🏗️ Creating routes with feature toggles +[ROUTES] 📄 Enabled pages count: 24 +[ROUTES] 🏠 Root page search result: Found: home (ProjectDashboard) +... +[ROUTER_PROVIDER] 🎨 Rendering 25 routes +[ROUTER_PROVIDER] 🛣️ Rendering route: /dashboard +[ROUTER_PROVIDER] 🛣️ Rendering route: /code +... +``` + +## Additional Notes + +- The root route `/` is configured in `src/config/pages.json` with `"isRoot": true` +- The home page uses the `ProjectDashboard` component +- All routes are dynamically generated from the JSON configuration +- The console logs include emojis and structured prefixes for easy filtering diff --git a/index.html b/index.html index d3a81a1..82968e9 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,16 @@ + + diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..406d84e --- /dev/null +++ b/public/404.html @@ -0,0 +1,15 @@ + + + + + + Redirecting... + + + + +

Redirecting...

+ + diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 0000000..ad37e2c --- /dev/null +++ b/public/_redirects @@ -0,0 +1 @@ +/* /index.html 200 diff --git a/src/App.tsx b/src/App.tsx index c1e5683..ce7730d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -313,12 +313,18 @@ function AppLayout() { function App() { console.log('[APP] 🚀 App component initializing') + console.log('[APP] 🌐 Current URL:', window.location.href) + console.log('[APP] 📍 Current pathname:', window.location.pathname) + console.log('[APP] 🔍 Current search:', window.location.search) + console.log('[APP] 🏷️ Current hash:', window.location.hash) + console.log('[APP] 🌱 Initializing seed data hook') const { loadSeedData } = useSeedData() const [appReady, setAppReady] = useState(false) useEffect(() => { console.log('[APP] 🚀 Initialization effect triggered') + console.log('[APP] ⏰ Timestamp:', new Date().toISOString()) console.time('[APP] Seed data loading') const timer = setTimeout(() => { @@ -356,7 +362,7 @@ function App() { } }, [loadSeedData]) - console.log('[APP] 🎨 Rendering App component') + console.log('[APP] 🎨 Rendering App component, appReady:', appReady) return ( <> diff --git a/src/router/RouterProvider.tsx b/src/router/RouterProvider.tsx index b3331bf..4a4d107 100644 --- a/src/router/RouterProvider.tsx +++ b/src/router/RouterProvider.tsx @@ -17,21 +17,27 @@ export function RouterProvider({ stateContext, actionContext }: RouterProviderProps) { - console.log('[ROUTER_PROVIDER] 🏗️ Creating routes') + console.log('[ROUTER_PROVIDER] 🏗️ RouterProvider rendering') + console.log('[ROUTER_PROVIDER] 🎛️ Feature toggles:', featureToggles) + console.log('[ROUTER_PROVIDER] 📦 State context keys:', Object.keys(stateContext)) + console.log('[ROUTER_PROVIDER] 🎬 Action context keys:', Object.keys(actionContext)) const routes = useMemo(() => { console.log('[ROUTER_PROVIDER] 🔄 Routes memo updating') + console.log('[ROUTER_PROVIDER] ⏰ Timestamp:', new Date().toISOString()) const routeConfigs = createRoutes(featureToggles, stateContext, actionContext) console.log('[ROUTER_PROVIDER] ✅ Routes created:', routeConfigs.length, 'routes') + console.log('[ROUTER_PROVIDER] 📋 Route paths:', routeConfigs.map(r => r.path).join(', ')) return routeConfigs }, [featureToggles, stateContext, actionContext]) - console.log('[ROUTER_PROVIDER] 🎨 Rendering routes') + console.log('[ROUTER_PROVIDER] 🎨 Rendering', routes.length, 'routes') return ( - {routes.map((route, index) => ( - - ))} + {routes.map((route, index) => { + console.log('[ROUTER_PROVIDER] 🛣️ Rendering route:', route.path || `index-${index}`) + return + })} ) } diff --git a/src/router/routes.tsx b/src/router/routes.tsx index ff76b37..f0e4935 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -72,12 +72,19 @@ export function createRoutes( stateContext: any, actionContext: any ): RouteObject[] { - console.log('[ROUTES] 🏗️ Creating routes with feature toggles') + console.log('[ROUTES] 🏗️ Creating routes with feature toggles:', featureToggles) const enabledPages = getEnabledPages(featureToggles) - console.log('[ROUTES] 📄 Enabled pages:', enabledPages.map(p => p.id).join(', ')) + console.log('[ROUTES] 📄 Enabled pages count:', enabledPages.length) + console.log('[ROUTES] 📄 Enabled page IDs:', enabledPages.map(p => p.id).join(', ')) + console.log('[ROUTES] 📄 Enabled pages details:', JSON.stringify(enabledPages.map(p => ({ + id: p.id, + component: p.component, + isRoot: p.isRoot, + enabled: p.enabled + })), null, 2)) const rootPage = enabledPages.find(p => p.isRoot) - console.log('[ROUTES] 🏠 Root page:', rootPage?.id || 'none (will use dashboard)') + console.log('[ROUTES] 🏠 Root page search result:', rootPage ? `Found: ${rootPage.id} (${rootPage.component})` : 'NOT FOUND - will redirect to /dashboard') const routes: RouteObject[] = enabledPages .filter(p => !p.isRoot)