create-questpie 1.0.0

package/templates/tanstack-start/README.md

@@ -0,0 +1,94 @@
+# {{projectName}}
+
+A [QUESTPIE CMS](https://questpie.com) project built with TanStack Start.
+
+## Getting Started
+
+### Prerequisites
+
+- [Bun](https://bun.sh) (v1.3+)
+- [Docker](https://docker.com) (for PostgreSQL)
+
+### Setup
+
+```bash
+# Start PostgreSQL
+docker compose up -d
+
+# Run database migrations
+bun questpie migrate
+
+# Start the dev server
+bun dev
+```
+
+The admin panel will be available at [http://localhost:3000/admin](http://localhost:3000/admin).
+
+The API docs (Scalar UI) are at [http://localhost:3000/api/cms/docs](http://localhost:3000/api/cms/docs).
+
+## Project Structure
+
+```
+src/
+  questpie/
+    server/
+      app.ts                        # Main CMS configuration
+      builder.ts                    # Server-side builder
+      rpc.ts                        # RPC router
+      collections/
+        posts.collection.ts         # Posts collection
+      globals/
+        site-settings.global.ts     # Site settings
+    admin/
+      admin.ts                      # Admin UI configuration
+      builder.ts                    # Client-side builder
+  routes/
+    admin.tsx                       # Admin layout
+    admin/                          # Admin routes
+    api/cms/$.ts                    # CMS API handler
+  lib/
+    env.ts                          # Type-safe environment variables
+    cms-client.ts                   # CMS API client
+    auth-client.ts                  # Auth client
+    query-client.ts                 # React Query client
+  migrations/                       # Database migrations
+```
+
+## Scripts
+
+| Command                       | Description              |
+| ----------------------------- | ------------------------ |
+| `bun dev`                     | Start development server |
+| `bun build`                   | Build for production     |
+| `bun start`                   | Start production server  |
+| `bun questpie migrate`        | Run database migrations  |
+| `bun questpie migrate:create` | Create a new migration   |
+
+## Adding Collections
+
+Create a new file following the naming convention:
+
+```
+src/questpie/server/collections/my-collection.collection.ts
+```
+
+Then register it in `app.ts`:
+
+```ts
+import { myCollection } from "./collections/my-collection.collection.js";
+
+// Add to .collections()
+.collections({ posts, myCollection })
+```
+
+## Adding Globals
+
+```
+src/questpie/server/globals/my-global.global.ts
+```
+
+Then register in `app.ts`:
+
+```ts
+.globals({ siteSettings, myGlobal })
+```

package/templates/tanstack-start/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-lyra",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "hugeicons",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/templates/tanstack-start/docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  postgres:
+    image: postgres:17
+    container_name: {{projectName}}-postgres
+    environment:
+      POSTGRES_DB: {{databaseName}}
+      POSTGRES_USER: {{databaseUser}}
+      POSTGRES_PASSWORD: {{databasePassword}}
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U {{databaseUser}}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres_data:

package/templates/tanstack-start/env.example

@@ -0,0 +1,16 @@
+# Database
+DATABASE_URL=postgresql://{{databaseUser}}:{{databasePassword}}@localhost:5432/{{databaseName}}
+
+# Application
+APP_URL=http://localhost:3000
+PORT=3000
+
+# Auth (Better Auth)
+BETTER_AUTH_SECRET=your-secret-key-change-in-production
+
+# Email Adapter (console | smtp)
+MAIL_ADAPTER=console
+
+# SMTP (if using smtp adapter)
+# SMTP_HOST=localhost
+# SMTP_PORT=1025

package/templates/tanstack-start/gitignore

@@ -0,0 +1,12 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+uploads

package/templates/tanstack-start/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "{{projectName}}",
+	"version": "0.0.1",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "bun --bun vite dev --port 3000",
+		"build": "vite build",
+		"start": "bun run .output/server/index.mjs",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@questpie/admin": "latest",
+		"@questpie/openapi": "latest",
+		"@questpie/tanstack-query": "latest",
+		"@t3-oss/env-core": "^0.12.0",
+		"@tanstack/react-query": "^5.62.11",
+		"@tanstack/react-router": "^1.132.0",
+		"@tanstack/react-start": "^1.132.0",
+		"drizzle-orm": "1.0.0-beta.6-4414a19",
+		"questpie": "latest",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"zod": "^4.2.1"
+	},
+	"devDependencies": {
+		"@tailwindcss/vite": "^4.0.0",
+		"@tanstack/devtools-vite": "latest",
+		"@tanstack/react-devtools": "latest",
+		"@tanstack/react-router-devtools": "latest",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^4.4.1",
+		"bun-types": "latest",
+		"drizzle-kit": "1.0.0-beta.6-4414a19",
+		"nitro": "latest",
+		"tailwindcss": "^4.0.0",
+		"tw-animate-css": "^1.0.0",
+		"typescript": "^5.9.2",
+		"vite": "^6.3.0",
+		"vite-tsconfig-paths": "^4.3.2"
+	}
+}

package/templates/tanstack-start/questpie.config.ts

@@ -0,0 +1,12 @@
+import { cms } from "@/questpie/server/app";
+
+export const config = {
+  app: cms,
+  cli: {
+    migrations: {
+      directory: "./src/migrations",
+    },
+  },
+};
+
+export default config;

package/templates/tanstack-start/src/admin.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@questpie/admin/client/styles/index.css";
+
+@source "../node_modules/@questpie/admin/";

package/templates/tanstack-start/src/lib/auth-client.ts

@@ -0,0 +1,12 @@
+import { createAdminAuthClient } from "@questpie/admin/client";
+import type { AppCMS } from "@/questpie/server/app.js";
+
+export const authClient = createAdminAuthClient<AppCMS>({
+	baseURL:
+		typeof window !== "undefined"
+			? window.location.origin
+			: process.env.APP_URL || "http://localhost:3000",
+	basePath: "/api/cms/auth",
+});
+
+export type AuthClient = typeof authClient;

package/templates/tanstack-start/src/lib/cms-client.ts

@@ -0,0 +1,12 @@
+import { createClient } from "questpie/client";
+import type { AppCMS, AppRpc } from "@/questpie/server/app.js";
+
+export const client = createClient<AppCMS, AppRpc>({
+	baseURL:
+		typeof window !== "undefined"
+			? window.location.origin
+			: process.env.APP_URL || "http://localhost:3000",
+	basePath: "/api/cms",
+});
+
+export type CMSClient = typeof client;

package/templates/tanstack-start/src/lib/env.ts

@@ -0,0 +1,27 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    DATABASE_URL: z.string().url(),
+    APP_URL: z.string().url().default("http://localhost:3000"),
+    PORT: z
+      .string()
+      .transform(Number)
+      .pipe(z.number().int().positive())
+      .default("3000"),
+    BETTER_AUTH_SECRET: z
+      .string()
+      .min(1)
+      .default("change-me-in-production"),
+    MAIL_ADAPTER: z.enum(["console", "smtp"]).default("console"),
+    SMTP_HOST: z.string().optional(),
+    SMTP_PORT: z
+      .string()
+      .transform(Number)
+      .pipe(z.number().int().positive())
+      .optional(),
+  },
+  runtimeEnv: process.env,
+  emptyStringAsUndefined: true,
+});

package/templates/tanstack-start/src/lib/query-client.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000,
+    },
+  },
+});

package/templates/tanstack-start/src/migrations/index.ts

@@ -0,0 +1,8 @@
+// Migrations will be generated by the QUESTPIE CLI.
+// Run: bun questpie migrate
+//
+// This file exports all migrations for the CMS to apply.
+
+import type { Migration } from "questpie";
+
+export const migrations: Migration[] = [];

package/templates/tanstack-start/src/questpie/admin/admin.ts

@@ -0,0 +1,5 @@
+import { builder } from "./builder.js";
+
+export const admin = builder;
+
+export type AdminConfig = typeof admin;

package/templates/tanstack-start/src/questpie/admin/builder.ts

@@ -0,0 +1,4 @@
+import { adminModule, qa } from "@questpie/admin/client";
+import type { AppCMS } from "@/questpie/server/app.js";
+
+export const builder = qa<AppCMS>().use(adminModule);

package/templates/tanstack-start/src/questpie/server/app.ts

@@ -0,0 +1,52 @@
+import { adminModule, adminRpc } from "@questpie/admin/server";
+import { ConsoleAdapter, q } from "questpie";
+import { env } from "@/lib/env.js";
+import { migrations } from "../../migrations/index.js";
+import { posts } from "./collections/index.js";
+import { configureDashboard } from "./dashboard.js";
+import { siteSettings } from "./globals/index.js";
+import { r } from "./rpc.js";
+import { configureSidebar } from "./sidebar.js";
+
+// ─── CMS Instance ───────────────────────────────────────────────────────────
+// The built CMS application. Standalone — does NOT depend on appRpc.
+
+export const cms = q({ name: "{{projectName}}" })
+	.use(adminModule)
+	.collections({ posts })
+	.globals({ siteSettings })
+	.sidebar(configureSidebar)
+	.branding({ name: "{{projectName}}" })
+	.dashboard(configureDashboard)
+	.auth({
+		emailAndPassword: {
+			enabled: true,
+			requireEmailVerification: false,
+		},
+		baseURL: env.APP_URL,
+		basePath: "/api/cms/auth",
+		secret: env.BETTER_AUTH_SECRET,
+	})
+	.build({
+		app: { url: env.APP_URL },
+		db: { url: env.DATABASE_URL },
+		storage: { basePath: "/api/cms" },
+		migrations,
+		email: {
+			adapter: new ConsoleAdapter({ logHtml: false }),
+		},
+	});
+
+// ─── RPC Router ─────────────────────────────────────────────────────────────
+// Standalone router. Both cms and appRpc are passed to createFetchHandler()
+// in routes/api/cms/$.ts. Add your custom RPC functions here.
+
+export const appRpc = r.router({
+	...adminRpc,
+});
+
+// ─── Type Exports ───────────────────────────────────────────────────────────
+// Used by: rpc.ts (AppCMS for typed handlers), client (AppCMS + AppRpc)
+
+export type AppCMS = typeof cms;
+export type AppRpc = typeof appRpc;

package/templates/tanstack-start/src/questpie/server/builder.ts

@@ -0,0 +1,4 @@
+import { adminModule } from "@questpie/admin/server";
+import { q } from "questpie";
+
+export const qb = q.use(adminModule);

package/templates/tanstack-start/src/questpie/server/collections/index.ts

@@ -0,0 +1 @@
+export { posts } from "./posts.collection.js";

package/templates/tanstack-start/src/questpie/server/collections/posts.collection.ts

@@ -0,0 +1,72 @@
+import { qb } from "@/questpie/server/builder.js";
+
+export const posts = qb
+	.collection("posts")
+	.fields((f) => ({
+		title: f.text({
+			label: "Title",
+			required: true,
+			maxLength: 255,
+		}),
+		slug: f.text({
+			label: "Slug",
+			required: true,
+			maxLength: 255,
+			input: "optional",
+			meta: {
+				admin: {
+					compute: {
+						handler: ({
+							data,
+							prev,
+						}: {
+							data: Record<string, unknown>;
+							prev: { data: Record<string, unknown> };
+						}) => {
+							const title = data.title;
+							const currentSlug = data.slug;
+							const prevTitle = prev.data.title;
+
+							if (currentSlug && prevTitle === title) return undefined;
+
+							if (title && typeof title === "string") {
+								return title
+									.toLowerCase()
+									.replace(/[^a-z0-9]+/g, "-")
+									.replace(/^-|-$/g, "");
+							}
+							return undefined;
+						},
+						deps: ({ data }: { data: Record<string, unknown> }) => [
+							data.title,
+							data.slug,
+						],
+						debounce: 300,
+					},
+				},
+			},
+		}),
+		content: f.richText({
+			label: "Content",
+		}),
+		published: f.boolean({
+			label: "Published",
+			default: false,
+			required: true,
+		}),
+	}))
+	.title(({ f }) => f.title)
+	.admin(({ c }) => ({
+		label: "Posts",
+		icon: c.icon("ph:article"),
+	}))
+	.list(({ v }) => v.table({}))
+	.form(({ v, f }) =>
+		v.form({
+			sidebar: {
+				position: "right",
+				fields: [f.slug, f.published],
+			},
+			fields: [f.title, f.content],
+		}),
+	);

package/templates/tanstack-start/src/questpie/server/dashboard.ts

@@ -0,0 +1,68 @@
+export function configureDashboard({ d }: any) {
+  return d.dashboard({
+    title: "Dashboard",
+    description: "Overview of your content",
+    columns: 4,
+    items: [
+      {
+        type: "section",
+        label: "Content",
+        layout: "grid",
+        columns: 2,
+        items: [
+          {
+            id: "total-posts",
+            type: "stats",
+            collection: "posts",
+            label: "Total Posts",
+            span: 1,
+          },
+          {
+            id: "published-posts",
+            type: "stats",
+            collection: "posts",
+            label: "Published",
+            filter: { published: true },
+            variant: "primary",
+            span: 1,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Recent",
+        layout: "grid",
+        columns: 4,
+        items: [
+          {
+            id: "recent-posts",
+            type: "recentItems",
+            collection: "posts",
+            label: "Recent Posts",
+            limit: 5,
+            span: 2,
+          },
+          {
+            id: "quick-actions",
+            type: "quickActions",
+            label: "Quick Actions",
+            actions: [
+              {
+                label: "New Post",
+                action: { type: "create", collection: "posts" },
+              },
+              {
+                label: "Site Settings",
+                action: {
+                  type: "link",
+                  href: "/admin/globals/siteSettings",
+                },
+              },
+            ],
+            span: 2,
+          },
+        ],
+      },
+    ],
+  });
+}

package/templates/tanstack-start/src/questpie/server/globals/index.ts

@@ -0,0 +1 @@
+export { siteSettings } from "./site-settings.global.js";

package/templates/tanstack-start/src/questpie/server/globals/site-settings.global.ts

@@ -0,0 +1,24 @@
+import { qb } from "@/questpie/server/builder.js";
+
+export const siteSettings = qb
+	.global("site_settings")
+	.fields((f) => ({
+		siteName: f.text({
+			label: "Site Name",
+			required: true,
+			default: "{{projectName}}",
+		}),
+		description: f.textarea({
+			label: "Site Description",
+			default: "A QUESTPIE CMS powered site",
+		}),
+	}))
+	.admin(({ c }) => ({
+		label: "Site Settings",
+		icon: c.icon("ph:gear"),
+	}))
+	.form(({ v, f }) =>
+		v.form({
+			fields: [f.siteName, f.description],
+		}),
+	);

package/templates/tanstack-start/src/questpie/server/rpc.ts

@@ -0,0 +1,4 @@
+import { rpc } from "questpie";
+import type { AppCMS } from "./app.js";
+
+export const r = rpc<AppCMS>();

package/templates/tanstack-start/src/questpie/server/sidebar.ts

@@ -0,0 +1,26 @@
+import type { qb } from "./builder.js";
+
+type SidebarBuilder = Parameters<
+  Parameters<ReturnType<typeof qb.collection>["sidebar"]>[0]
+>[0];
+
+export function configureSidebar({ s, c }: any) {
+  return s.sidebar({
+    sections: [
+      s.section({
+        id: "main",
+        title: "Content",
+        items: [
+          {
+            type: "link",
+            label: "Dashboard",
+            href: "/admin",
+            icon: c.icon("ph:house"),
+          },
+          { type: "collection", collection: "posts" },
+          { type: "global", global: "siteSettings" },
+        ],
+      }),
+    ],
+  });
+}

package/templates/tanstack-start/src/router.tsx

@@ -0,0 +1,10 @@
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  return createRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  });
+}

package/templates/tanstack-start/src/routes/__root.tsx

@@ -0,0 +1,16 @@
+import { createRootRoute } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "{{projectName}}" },
+    ],
+  }),
+  shellComponent: RootDocument,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/tanstack-start/src/routes/admin/$.tsx

@@ -0,0 +1,21 @@
+import { AdminRouter } from "@questpie/admin/client";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+
+function AdminCatchAll() {
+  const navigate = useNavigate();
+  const params = Route.useParams();
+  const splat = params._splat as string;
+  const segments = splat ? splat.split("/").filter(Boolean) : [];
+
+  return (
+    <AdminRouter
+      segments={segments}
+      navigate={(path) => navigate({ to: path })}
+      basePath="/admin"
+    />
+  );
+}
+
+export const Route = createFileRoute("/admin/$")({
+  component: AdminCatchAll,
+});

package/templates/tanstack-start/src/routes/admin/index.tsx

@@ -0,0 +1,18 @@
+import { AdminRouter } from "@questpie/admin/client";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+
+function AdminDashboard() {
+  const navigate = useNavigate();
+
+  return (
+    <AdminRouter
+      segments={[]}
+      navigate={(path) => navigate({ to: path })}
+      basePath="/admin"
+    />
+  );
+}
+
+export const Route = createFileRoute("/admin/")({
+  component: AdminDashboard,
+});

package/templates/tanstack-start/src/routes/admin/login.tsx

@@ -0,0 +1,17 @@
+import { LoginPage } from "@questpie/admin/client";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/login")({
+  component: AdminLoginPage,
+});
+
+function AdminLoginPage() {
+  return (
+    <LoginPage
+      title="Welcome back"
+      description="Sign in to access admin panel"
+      showForgotPassword={false}
+      showSignUp={false}
+    />
+  );
+}