@checkstack/frontend 0.2.16 → 0.2.17

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @checkstack/frontend
 
+## 0.2.17
+
+### Patch Changes
+
+- 0603d39: Fix onboarding flow not appearing on fresh Docker deployments (issue #79)
+
+  The `.env.example` had `BASE_URL` defaulting to `http://localhost:5173`
+  (the Vite dev server port). Users copying this file verbatim for a Docker
+  deployment would get a frontend that silently made all API calls to the
+  wrong origin, causing empty state and extreme sluggishness.
+
+  **Changes:**
+
+  - `.env.example`: Adds clear comments explaining the value must match the
+    container's exposed port.
+  - `frontend-api` (`RuntimeConfigProvider`): Removes the silent fallback when
+    `/api/config` returns an unreachable baseUrl — instead propagates the error
+    so it can be surfaced.
+  - `frontend` (`App.tsx`): Renders an actionable error screen when the backend
+    config cannot be loaded, showing the exact `BASE_URL` fix and the
+    `docker compose` command to recover.
+  - `docs/getting-started/docker.md`: Adds a dedicated troubleshooting section
+    for this exact misconfiguration.
+
+- Updated dependencies [0603d39]
+  - @checkstack/frontend-api@0.3.7
+  - @checkstack/auth-frontend@0.5.12
+  - @checkstack/catalog-frontend@0.5.1
+  - @checkstack/command-frontend@0.2.15
+  - @checkstack/ui@1.1.2
+
 ## 0.2.16
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/frontend",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -23,6 +23,7 @@ import {
   RuntimeConfigProvider,
   useRuntimeConfigLoading,
   useRuntimeConfig,
+  useRuntimeConfigContext,
   OrpcQueryProvider,
 } from "@checkstack/frontend-api";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -185,6 +186,8 @@ function AppContent() {
  */
 function AppWithApis() {
   const isConfigLoading = useRuntimeConfigLoading();
+  const { error: configError, config: runtimeConfig } =
+    useRuntimeConfigContext();
   const { baseUrl } = useRuntimeConfig();
 
   const apiRegistry = useMemo(() => {
@@ -220,7 +223,7 @@ function AppWithApis() {
     return registryBuilder.build();
   }, [baseUrl]);
 
-  // Show loading while fetching runtime config
+  // Show spinner while fetching runtime config and probing baseUrl.
   if (isConfigLoading) {
     return (
       <div className="h-screen flex items-center justify-center bg-background">
@@ -229,6 +232,48 @@ function AppWithApis() {
     );
   }
 
+  // Config probe failed — baseUrl is not reachable (misconfigured BASE_URL).
+  // Surface a clear diagnostic rather than a broken empty dashboard.
+  if (!runtimeConfig || configError) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background p-8">
+        <div className="max-w-lg w-full rounded-xl border border-destructive/50 bg-destructive/10 p-8 space-y-4 text-center">
+          <div className="text-4xl">⚠️</div>
+          <h1 className="text-xl font-bold text-destructive">
+            Cannot connect to Checkstack backend
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            The app loaded but its configured{" "}
+            <code className="bg-muted rounded px-1">BASE_URL</code> is not
+            reachable. Make sure it matches the URL + port your container or
+            reverse proxy exposes.
+          </p>
+          <div className="text-left bg-muted rounded-lg p-4 space-y-1 text-sm font-mono">
+            <p className="text-muted-foreground">
+              # For a default Docker setup:
+            </p>
+            <p className="text-foreground">BASE_URL=http://localhost:3000</p>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            After updating your{" "}
+            <code className="bg-muted rounded px-1">.env</code>, recreate the
+            container:
+          </p>
+          <div className="text-left bg-muted rounded-lg p-4 text-sm font-mono">
+            <p className="text-foreground">
+              docker compose up -d --force-recreate
+            </p>
+          </div>
+          {configError && (
+            <p className="text-xs text-destructive/70 break-all">
+              {configError.message}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <ApiProvider registry={apiRegistry}>