Krow/krowworkforce_controltower
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix blank page on self-hosted deploys

Browse Source 
The app reads its Base44 app id and backend URL from VITE_BASE44_APP_ID and
VITE_BASE44_BACKEND_URL, but neither was set anywhere, so Vite compiled both
defaults to undefined and app-params resolved them to null at runtime. On
base44's own host these arrive as query params; on a custom domain they never
do. A null serverUrl skipped the SDK's default (it only applies to undefined),
making every API baseURL relative — requests hit our own nginx, which answered
with index.html, and the app rendered against HTML and died. Deploys reported
success while serving an empty page.

appBaseUrl was never passed either, so login/logout redirects were relative too
and bounced between /login and the SPA fallback. redirectToLogin also omits
app_id, which base44.app/login 404s on when the request comes from our domain
rather than a *.base44.app one, so login now goes through loginWithProvider.

Set both vars as build args in the Dockerfile — they must be present at build
time, since runtime env vars in Dokploy arrive after Vite has already inlined
them. Guard the build against an empty app id and a missing dist/index.html.

Surface failures instead of hiding them: an ErrorBoundary around the tree, and
a diagnostic panel for auth errors that previously fell through to a crash.

In nginx, serve a real 404 for missing /assets/ files. Falling through to the
SPA rule returned index.html as text/html, which the browser refuses to run as
a module — another silent blank page. Also add /health and stop the SPA
fallback from being cached under the requested path.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Aravind
2026-08-17 20:31:04 +05:30
parent 3b16d507f8
commit 3c649fc123
8 changed files with 155 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.jsx
View File

@@ -9,6 +9,8 @@ import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-route
import { setupIframeMessaging } from './lib/iframe-messaging';
import PageNotFound from './lib/PageNotFound';
import { AuthProvider, useAuth } from '@/lib/AuthContext';
import ErrorBoundary from '@/lib/ErrorBoundary';
import { appParams } from '@/lib/app-params';
import UserNotRegisteredError from '@/components/UserNotRegisteredError';
import FeatureReport from './pages/FeatureReport';
import LandingPage from './pages/LandingPage';
@@ -70,6 +72,22 @@ const AuthenticatedApp = () => {
navigateToLogin();
return null;
}
// Anything else (bad/missing app id, unreachable backend, network failure)
// used to fall straight through to the app, which then crashed on the empty
// data and left a blank page. Say what happened instead.
return (
<div className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
<div className="max-w-lg w-full bg-white border border-slate-200 rounded-lg shadow-sm p-6">
<h1 className="text-lg font-semibold text-slate-900">Unable to load the app</h1>
<p className="mt-2 text-sm text-slate-600">{authError.message || 'The Base44 backend could not be reached.'}</p>
<p className="mt-4 text-xs text-slate-500">
App ID: <code>{String(appParams.appId)}</code><br />
Backend: <code>{String(appParams.serverUrl)}</code>
</p>
</div>
</div>
);
}
// Render the main app
@@ -126,16 +144,18 @@ const AuthenticatedApp = () => {
function App() {
return (
<AuthProvider>
<QueryClientProvider client={queryClientInstance}>
<Router>
<NavigationTracker />
<AuthenticatedApp />
</Router>
<Toaster />
<VisualEditAgent />
</QueryClientProvider>
</AuthProvider>
<ErrorBoundary>
<AuthProvider>
<QueryClientProvider client={queryClientInstance}>
<Router>
<NavigationTracker />
<AuthenticatedApp />
</Router>
<Toaster />
<VisualEditAgent />
</QueryClientProvider>
</AuthProvider>
</ErrorBoundary>
)
}