@jtl-software/cloud-app-template-frontend-react 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @jtl/cloud-app-template-frontend-react
 
+## 0.0.13
+
+### Patch Changes
+
+- [#43](https://github.com/jtl-software/cloud-apps-cli/pull/43) [`90cd2f7`](https://github.com/jtl-software/cloud-apps-cli/commit/90cd2f7eb422dcb9e6870cc7ec51015941eeed7b) Thanks [@tobilen](https://github.com/tobilen)! - Warn loudly when CLIENT_ID / CLIENT_SECRET are missing. Backends print a red startup banner pointing at the env/config file, and expose `GET /health` returning `{ status, missing }`. The React frontend polls `/health` and renders a yellow banner across all routes when the backend reports a misconfiguration, so the dev sees the issue in the browser even if they missed the terminal output.
+
+- [#43](https://github.com/jtl-software/cloud-apps-cli/pull/43) [`27055e6`](https://github.com/jtl-software/cloud-apps-cli/commit/27055e6d01e3a30e3a5de97f2e56772dbf4f0dfd) Thanks [@tobilen](https://github.com/tobilen)! - Moved the manifest.json out of the frontend package
+
+- [#43](https://github.com/jtl-software/cloud-apps-cli/pull/43) [`36d1518`](https://github.com/jtl-software/cloud-apps-cli/commit/36d1518f8214fdee56cff202456f6b35f8912346) Thanks [@tobilen](https://github.com/tobilen)! - Add register command to generated project
+
+## 0.0.12
+
+### Patch Changes
+
+- [#36](https://github.com/jtl-software/cloud-apps-cli/pull/36) [`adca670`](https://github.com/jtl-software/cloud-apps-cli/commit/adca670a52296d01b2c153b722cc3b51993125d5) Thanks [@tobilen](https://github.com/tobilen)! - Fix .env file detection & deprecated manifest fields
+
 ## 0.0.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jtl-software/cloud-app-template-frontend-react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/App.tsx

@@ -1,11 +1,12 @@
 import { AppBridge } from '@jtl-software/cloud-apps-core';
 import './App.css';
+import ConfigWarningBanner from './common/ConfigWarningBanner';
 import { ErpPage, GraphqlDemoPage, HubPage, PanePage, SetupPage, WelcomePage } from './pages';
 import { useEffect } from 'react';
 
 type AppMode = 'setup' | 'erp' | 'pane' | 'hub' | 'graphql-demo';
 
-const App: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => {
+const AppRouter: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => {
   const mode: AppMode = location.pathname.substring(1) as AppMode;
 
   useEffect((): void => {
@@ -37,4 +38,11 @@ const App: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => {
   }
 };
 
+const App: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => (
+  <>
+    <ConfigWarningBanner />
+    <AppRouter appBridge={appBridge} />
+  </>
+);
+
 export default App;

package/src/common/ConfigWarningBanner.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { Box, Stack, Text } from '@jtl-software/platform-ui-react';
+import { TriangleAlert } from 'lucide-react';
+import { apiUrl } from './constants';
+
+type HealthResponse = {
+  status: 'ok' | 'misconfigured';
+  missing: string[];
+};
+
+const POLL_INTERVAL_MS = 5000;
+
+const ConfigWarningBanner: React.FC = () => {
+  const [missing, setMissing] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const check = async (): Promise<void> => {
+      try {
+        const res = await fetch(`${apiUrl}/health`);
+        if (!res.ok) return;
+        const data = (await res.json()) as HealthResponse;
+        if (cancelled) return;
+        setMissing(data.status === 'misconfigured' ? data.missing : null);
+      } catch {
+        // Backend not reachable yet (still starting). Try again on the next tick.
+      }
+    };
+
+    void check();
+    const id = window.setInterval(check, POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, []);
+
+  if (!missing || missing.length === 0) return null;
+
+  return (
+    <Box
+      className="border-b border-amber-300 bg-amber-50 px-4 py-3 text-amber-900"
+      role="alert"
+    >
+      <Stack spacing="3" direction="row" itemAlign="start">
+        <TriangleAlert size={20} color="#b45309" strokeWidth={2} />
+        <Stack spacing="1" direction="column">
+          <Text type="small" weight="semibold">
+            Backend is missing credentials: {missing.join(', ')}
+          </Text>
+          <Text type="xs">
+            Every JTL API call will fail until you add these to{' '}
+            <code className="rounded bg-amber-100 px-1 py-0.5">packages/backend/.env</code> (Node) or{' '}
+            <code className="rounded bg-amber-100 px-1 py-0.5">appsettings.Local.json</code> (.NET).
+            Get the values from the{' '}
+            <a
+              href="https://partner.jtl-cloud.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              Partner Portal
+            </a>{' '}
+            under your app's <strong>Client credentials</strong>, then restart the backend.
+          </Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default ConfigWarningBanner;

package/manifest.json

@@ -1,104 +0,0 @@
-{
-  "manifest": {
-    "manifestVersion": "1.0.0",
-    "technicalName": "{{APP_TECHNICAL_NAME}}",
-    "version": "1.0.0",
-    "requirements": {
-      "minCloudApiVersion": "1.0.0"
-    },
-    "lifecycle": {
-      "configurationUrl": "http://localhost:3004/setup"
-    },
-    "capabilities": {
-      "hub": {
-        "appLauncher": {
-          "redirectUrl": "http://localhost:3004/hub",
-          "closedPreviewUrl": "http://localhost:3004/hub"
-        }
-      },
-      "erp": {
-        "menuItems": [
-          {
-            "id": "{{APP_NAME}}-menu",
-            "name": "{{APP_NAME}}",
-            "url": "http://localhost:3004/erp"
-          },
-          {
-            "id": "{{APP_NAME}}-graphql-demo",
-            "name": "GraphQL Demo",
-            "url": "http://localhost:3004/graphql-demo"
-          }
-        ],
-        "api": {
-          "scopes": []
-        },
-        "pane": [
-          {
-            "id": "{{APP_NAME}}-customer-pane",
-            "context": "customers",
-            "matchChildContext": true,
-            "title": "{{APP_NAME}}",
-            "url": "http://localhost:3004/pane",
-            "requiredScopes": []
-          }
-        ]
-      }
-    }
-  },
-  "listing": {
-    "version": "1.0.0",
-    "listingVersion": "1.0.0",
-    "defaultLocale": "de-DE",
-    "name": {
-      "de-DE": {
-        "short": "{{APP_NAME}}",
-        "full": "{{APP_NAME}}"
-      }
-    },
-    "description": {
-      "de-DE": {
-        "short": "{{APP_DESCRIPTION_SHORT}}",
-        "full": "{{APP_DESCRIPTION}}"
-      }
-    },
-    "benefits": {
-      "de-DE": []
-    },
-    "category": {
-      "main": "",
-      "sub": []
-    },
-    "media": {
-      "icons": {
-        "light": "https://hub.jtl-cloud.com/assets/image-placeholder.png",
-        "dark": "https://hub.jtl-cloud.com/assets/image-placeholder.png"
-      },
-      "screenshots": ["https://hub.jtl-cloud.com/assets/image-placeholder.png"],
-      "video": ""
-    },
-    "pricing": {
-      "freePlan": true
-    },
-    "support": {
-      "url": {
-        "de-DE": "https://example.com/support-for-app-xy"
-      },
-      "documentation": {
-        "de-DE": "https://example.com/guide-for-app-xy"
-      }
-    },
-    "legal": {
-      "privacyPolicy": "https://example.com/privacy",
-      "termsOfUse": "https://example.com/terms-of-use",
-      "gdpr": {
-        "request": "https://example.com/gdpr/request",
-        "delete": "https://example.com/gdpr/delete"
-      }
-    },
-    "editorial": {
-      "status": true
-    },
-    "distributionType": "PRIVATE",
-    "listingVersionStatus": "DRAFT"
-  }
-}