mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-25 14:25:02 +00:00

Files

johndoe6345789 a51130a127 feat: Add external low-code and postgres repositories

- codegen: Low-code React app with JSON-driven component system
- packagerepo: Schema-driven package repository with backend/frontend
- postgres: Next.js app with Drizzle ORM and PostgreSQL

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-21 16:48:52 +00:00

3.8 KiB

Raw Blame History

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:

The app uses React Router for client-side routing
Static hosting servers don't understand client-side routes
When a user accesses /, the server looks for a physical file at that path
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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redirecting...</title>
    <script>
        sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/'" />
</head>
<body>
    <p>Redirecting...</p>
</body>
</html>

3. Updated `index.html`

Added a script to restore the route from sessionStorage after the redirect:

<script>
    (function() {
        var redirect = sessionStorage.redirect;
        delete sessionStorage.redirect;
        if (redirect && redirect !== location.href) {
            history.replaceState(null, null, redirect);
        }
    })();
</script>

How It Works

User accesses https://your-app.github.io/dashboard
GitHub Pages returns 404 (no physical file at that path)
GitHub Pages serves 404.html instead
404.html stores the URL in sessionStorage and redirects to /
index.html loads with the React app
The script in index.html reads sessionStorage and updates the URL
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:

Build the app: npm run build
Serve the dist folder with a static server
Navigate to / - should load the home page
Navigate to /dashboard - should load dashboard
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

3.8 KiB Raw Blame History

Route Fix for Published App

Problem

Solution Applied

1. Created public/_redirects File

2. Created public/404.html

3. Updated index.html