Fix blank page on self-hosted deploys

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>

src/App.jsx

@@ -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>
   )
 }
 

src/api/base44Client.js

@@ -3,10 +3,15 @@ import { appParams } from '@/lib/app-params';
 
 const { appId, serverUrl, token, functionsVersion } = appParams;
 
-//Create a client with authentication required
+// appBaseUrl is what the SDK prefixes onto its login/logout redirects. Left unset
+// it normalises to "" and those redirects become relative — on a self-hosted
+// domain that sends the browser to /login on our own nginx, which serves
+// index.html, which bootstraps the app, which redirects again: a loop that shows
+// as a blank page. Pointing it at Base44 sends auth where it actually lives.
 export const base44 = createClient({
   appId,
   serverUrl,
+  appBaseUrl: serverUrl,
   token,
   functionsVersion,
   requiresAuth: false

src/lib/AuthContext.jsx

@@ -124,8 +124,11 @@ export const AuthProvider = ({ children }) => {
   };
 
   const navigateToLogin = () => {
-    // Use the SDK's redirectToLogin method
-    base44.auth.redirectToLogin(window.location.href);
+    // redirectToLogin() posts to `${appBaseUrl}/login` with no app_id, so Base44
+    // cannot tell which app is asking when the request comes from our own domain
+    // instead of a *.base44.app one. loginWithProvider() hits the same login flow
+    // but carries app_id in the query, which is what a self-hosted build needs.
+    base44.auth.loginWithProvider('google', window.location.href);
   };
 
   return (

src/lib/ErrorBoundary.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+/**
+ * Catches render-time crashes so they surface as a readable message instead of a
+ * white screen. React unmounts the whole tree when an error escapes, which is
+ * indistinguishable from "the deploy didn't work" — this makes the difference
+ * visible without opening devtools, which matters most on a hosted build where
+ * the stack is minified and nobody is watching the console.
+ */
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Application crashed:', error, info?.componentStack);
+  }
+
+  render() {
+    if (!this.state.error) {
+      return this.props.children;
+    }
+
+    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">Something went wrong</h1>
+          <p className="mt-2 text-sm text-slate-600">
+            The application failed to render. The details below are also in the browser console.
+          </p>
+          <pre className="mt-4 p-3 bg-slate-100 rounded text-xs text-slate-800 overflow-auto max-h-64 whitespace-pre-wrap">
+            {String(this.state.error?.stack || this.state.error)}
+          </pre>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="mt-4 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded hover:bg-slate-700"
+          >
+            Reload
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ErrorBoundary;

src/lib/app-params.js

@@ -34,10 +34,18 @@ const getAppParamValue = (paramName, { defaultValue = undefined, removeFromUrl =
 	return null;
 }
 
+// Base44's own host. On a base44-hosted app these arrive as ?app_id=/?server_url=
+// query params, but a self-hosted build (Docker/Dokploy on a custom domain) never
+// gets them, so the build-time env vars below are the only source. If both are
+// missing the SDK falls back to a null serverUrl, every request becomes a
+// same-origin relative URL, nginx answers it with index.html, and the app renders
+// a blank page — so serverUrl must never be allowed to end up null.
+const DEFAULT_SERVER_URL = "https://base44.app";
+
 const getAppParams = () => {
 	return {
 		appId: getAppParamValue("app_id", { defaultValue: import.meta.env.VITE_BASE44_APP_ID }),
-		serverUrl: getAppParamValue("server_url", { defaultValue: import.meta.env.VITE_BASE44_BACKEND_URL }),
+		serverUrl: getAppParamValue("server_url", { defaultValue: import.meta.env.VITE_BASE44_BACKEND_URL }) || DEFAULT_SERVER_URL,
 		token: getAppParamValue("access_token", { removeFromUrl: true }),
 		fromUrl: getAppParamValue("from_url", { defaultValue: window.location.href }),
 		functionsVersion: getAppParamValue("functions_version"),