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

package/templates/webapp/react-vite/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "pxbaas-react-vite-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "typescript": "5.6.3",
+    "vite": "5.4.21"
+  }
+}

package/templates/webapp/react-vite/frontend/src/App.tsx

@@ -0,0 +1,34 @@
+import { Link, Route, Routes } from 'react-router-dom';
+
+function Home() {
+  return (
+    <section>
+      <p className="eyebrow">PolarDB-X BaaS</p>
+      <h1>{{APP_NAME}}</h1>
+      <p>A React + Vite app using a mount-safe HashRouter and plain CSS.</p>
+      <Link className="button" to="/about">About this template</Link>
+    </section>
+  );
+}
+
+function About() {
+  return (
+    <section>
+      <p className="eyebrow">Route</p>
+      <h1>HashRouter works</h1>
+      <p>Refreshes stay on the static index without server-side SPA fallback.</p>
+      <Link className="button" to="/">Back home</Link>
+    </section>
+  );
+}
+
+export default function App() {
+  return (
+    <main>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </main>
+  );
+}

package/templates/webapp/react-vite/frontend/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import App from './App';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </React.StrictMode>,
+);

package/templates/webapp/react-vite/frontend/src/style.css

@@ -0,0 +1,46 @@
+:root {
+  color: #17212b;
+  background: #f4f7fa;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  display: grid;
+  place-items: center;
+}
+
+main {
+  width: min(42rem, calc(100vw - 3rem));
+}
+
+section {
+  padding: 3rem;
+  border: 1px solid #d7e0e8;
+  border-radius: 1rem;
+  background: #fff;
+  box-shadow: 0 1rem 3rem rgb(23 33 43 / 10%);
+}
+
+.eyebrow {
+  color: #087f5b;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.button {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.7rem 1rem;
+  border-radius: 0.5rem;
+  color: #fff;
+  background: #087f5b;
+  text-decoration: none;
+}

package/templates/webapp/react-vite/frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/webapp/react-vite/frontend/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  build: {
+    sourcemap: false,
+  },
+});

package/templates/webapp/react-vite-hono/backend/index.ts

@@ -0,0 +1,38 @@
+import { Hono } from "npm:hono@{{HONO_VERSION}}";
+
+const app = new Hono();
+
+app.use("*", async (context, next) => {
+  await next();
+  context.header("Access-Control-Allow-Origin", "*");
+  context.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  context.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
+});
+
+app.options("*", (context) => context.body(null, 204));
+
+// Path contract (APP_WORKER_PATH_REWRITE off = current default): the proxy
+// forwards /apps/{mount}/api/<x> to the worker as /<candidateSlug>/<x>, so a
+// literal app.get("/health") never matches at runtime. Normalize the candidate
+// slug prefix away and dispatch on the logical path (same convention as the
+// ssr-shop / ssr-blog / csr-bff templates).
+function norm(path: string): string {
+  return path.replace(/^\/app_[^/]+/, "") || path;
+}
+
+app.get("*", (context) => {
+  const p = norm(new URL(context.req.url).pathname);
+  if (p === "/health" || p === "/api/health") {
+    return context.json({ ok: true, app: "{{SLUG}}" });
+  }
+  if (p === "/hello" || p === "/api/hello") {
+    return context.json({ message: "Hello from {{APP_NAME}}" });
+  }
+  return context.json({ code: "NOT_FOUND", message: "Route not found", path: p }, 404);
+});
+
+app.notFound((context) =>
+  context.json({ code: "NOT_FOUND", message: "Route not found" }, 404),
+);
+
+Deno.serve(app.fetch);

package/templates/webapp/react-vite-hono/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>