@polardbx/pxbaas 0.0.0-stage → 0.1.0-beta.1

package/templates/webapp/mpa/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>{{APP_NAME}}</title>
+<!-- RELATIVE asset link: resolves to /functions/v1/{{SLUG}}/style.css -->
+<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <h1>{{APP_NAME}}</h1>
+  <nav class="nav">
+    <a href="index.html">Home</a> · <a href="about.html">About</a>
+  </nav>
+
+  <p class="muted">
+    A multi-page webapp: <code>index.html</code>, <code>about.html</code>,
+    <code>style.css</code> and <code>app.js</code> are served as real static files
+    by the BaaS proxy, reverse-proxied via Kong <code>/functions/v1/</code>.
+  </p>
+
+  <div class="card">
+    <div class="muted">Share URL (opens directly in a browser)</div>
+    <code id="url">loading…</code>
+  </div>
+
+  <div class="card">
+    <div>① Client-side counter (from <code>app.js</code>)</div>
+    <div class="big" id="count">0</div>
+    <button id="inc">+1</button>
+  </div>
+
+  <div class="card">
+    <div>② Call the worker API (computed base + <code>?action=time</code>)</div>
+    <button id="ping">GET ?action=time</button>
+    <pre id="api" class="muted">Click to fetch server time</pre>
+  </div>
+
+  <!-- RELATIVE script src: resolves to /functions/v1/{{SLUG}}/app.js -->
+  <script src="app.js"></script>
+</body>
+</html>

package/templates/webapp/mpa/index.ts

@@ -0,0 +1,60 @@
+// {{APP_NAME}} — multi-page webapp (MPA) Edge Function worker.
+//
+// Spec: follow the `pxbaas-app-spec` skill — `pxbaas app deploy` lints this app against it.
+//
+// Deploy with:  pxbaas app deploy {{SLUG}}
+// Share URL:    {endpoint}/functions/v1/{{SLUG}}/            (serves static index.html)
+//               {endpoint}/functions/v1/{{SLUG}}/about.html  (serves static about.html)
+//               {endpoint}/functions/v1/{{SLUG}}/style.css   (static asset)
+// Built-in API: {endpoint}/functions/v1/{{SLUG}}/?action=time
+//
+// How an MPA works here (Plan B):
+//  - The real static files (index.html / about.html / style.css / app.js) are
+//    served DIRECTLY by the BaaS proxy static branch — they never reach this
+//    worker. That is why they can be linked by relative path from the pages.
+//  - This worker only handles the JSON API (?action=...) and any non-asset path.
+//  - app.json declares `"mode": "mpa"` which is what turns the static branch on
+//    for this function; without it the proxy routes everything to this worker.
+//
+// Guardrails baked into this template (do NOT break them):
+//  - Pages reference assets with RELATIVE links (style.css, app.js, about.html),
+//    never root-absolute ("/style.css") which would escape the /functions/v1/ prefix.
+//  - API calls use a computed base + "?action=..." so they return through
+//    Kong -> proxy -> sandbox on the same path.
+//  - CORS headers are set for browser calls; reflected input is JSON-only here.
+
+function corsHeaders(): Record<string, string> {
+  return {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization, apikey, X-Tenant-Id",
+  };
+}
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json", ...corsHeaders() },
+  });
+}
+
+Deno.serve((req: Request) => {
+  const url = new URL(req.url);
+
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders() });
+  }
+
+  // Built-in JSON API — extend with your own actions here.
+  const action = url.searchParams.get("action");
+  if (action === "time") {
+    return json({ ok: true, now: new Date().toISOString() });
+  }
+  if (action) {
+    return json({ ok: false, error: `unknown action: ${action}` }, 400);
+  }
+
+  // No ?action: static pages/assets are served by the proxy before reaching here,
+  // so anything that lands on the worker is an unknown dynamic path.
+  return json({ ok: false, error: "not found" }, 404);
+});

package/templates/webapp/mpa/style.css

@@ -0,0 +1,42 @@
+/* {{APP_NAME}} — shared stylesheet (MPA). Served as a real static .css file. */
+:root { color-scheme: light dark; }
+
+body {
+  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  max-width: 720px;
+  margin: 40px auto;
+  padding: 0 20px;
+  line-height: 1.6;
+}
+
+h1 { margin-bottom: 4px; }
+
+.nav { margin: 8px 0 20px; font-size: 15px; }
+.nav a { text-decoration: none; color: #0a7; font-weight: 600; }
+.nav a:hover { text-decoration: underline; }
+
+.card {
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin: 16px 0;
+}
+
+code, pre {
+  background: #f4f4f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+pre { padding: 12px; overflow: auto; }
+
+button {
+  font-size: 15px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.big { font-size: 32px; font-weight: 700; }
+.muted { color: #888; font-size: 13px; }

package/templates/webapp/react-vite/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{APP_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>