better-ts-stack 2.0.1 → 2.1.0

package/templates/frontend/nextjs/app/page.tsx.hbs

@@ -1,97 +1,98 @@
-import Link from "next/link";
-
-import { ArrowRight } from "lucide-react";
-
-import { buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-
-const featureList = [
-  "Next.js 16 App Router",
-  "React 19 and TypeScript",
-  "Tailwind CSS v4",
-  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
-  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
-  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
-];
-
-export default function Home() {
-  return (
-    <main className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
-        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
-          <div className="space-y-6">
-            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
-              Created with better-ts-stack
-            </span>
-            <div className="space-y-4">
-              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
-                Ship your stack faster with a polished TypeScript foundation.
-              </h1>
-              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
-                Your project already includes the core app shell, database wiring,
-                and a shadcn-compatible UI foundation so you can keep building
-                instead of setting up boilerplate.
-              </p>
-            </div>
-            <div className="flex flex-col gap-3 sm:flex-row">
-              {{#if useAuth}}
-              <Link
-                href="/sign-up"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Create an account
-                <ArrowRight className="size-4" />
-              </Link>
-              <Link
-                href="/sign-in"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                Login
-              </Link>
-              {{else}}
-              <Link
-                href="https://github.com/Abdullah-dev0/better-ts-stack"
-                target="_blank"
-                rel="noreferrer"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Explore the docs
-                <ArrowRight className="size-4" />
-              </Link>
-              <Link
-                href="https://nextjs.org/docs"
-                target="_blank"
-                rel="noreferrer"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                Next.js guide
-              </Link>
-              {{/if}}
-            </div>
-          </div>
-
-          <Card className="border-border bg-card shadow-sm">
-            <CardHeader>
-              <CardTitle>Included in this starter</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <ul className="space-y-3 text-sm text-muted-foreground">
-                {featureList.map((feature) => (
-                  <li key={feature} className="flex items-center gap-3">
-                    <span className="size-2 rounded-full bg-primary" />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
-                Start editing <code className="font-mono">app/page.tsx</code> and
-                shape the project around your product instead of setup chores.
-              </div>
-            </CardContent>
-          </Card>
-        </section>
-      </div>
-    </main>
-  );
-}
+import Link from "next/link";
+
+import { ArrowRight } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const featureList = [
+  "Next.js 16 App Router",
+  "React 19 and TypeScript",
+  "Tailwind CSS v4",
+  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
+  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
+  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
+  {{#if (eq database "mongoose")}}"Mongoose database tooling",{{/if}}
+];
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
+        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
+              Created with better-ts-stack
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
+                Ship your stack faster with a polished TypeScript foundation.
+              </h1>
+              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
+                Your project already includes the core app shell, database wiring,
+                and a shadcn-compatible UI foundation so you can keep building
+                instead of setting up boilerplate.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              {{#if useAuth}}
+              <Link
+                href="/sign-up"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Create an account
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                href="/sign-in"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Login
+              </Link>
+              {{else}}
+              <Link
+                href="https://better-ts-stack.abdullahtech.me/docs"
+                target="_blank"
+                rel="noreferrer"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Explore the docs
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                href="https://nextjs.org/docs"
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Next.js guide
+              </Link>
+              {{/if}}
+            </div>
+          </div>
+
+          <Card className="border-border bg-card shadow-sm">
+            <CardHeader>
+              <CardTitle>Included in this starter</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                {featureList.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <span className="size-2 rounded-full bg-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+                Start editing <code className="font-mono">app/page.tsx</code> and
+                shape the project around your product instead of setup chores.
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}

package/templates/frontend/tanstack/config.json

@@ -1,45 +1,45 @@
-{
-  "id": "tanstack",
-  "name": "TanStack Start",
-  "description": "TanStack Start with TanStack Router, React 19, and Tailwind CSS v4",
-  "type": "base",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "start": "srvx --prod -s ../client dist/server/server.js",
-    "preview": "vite preview",
-    "type:check": "tsc --noEmit",
-    "lint": "eslint src"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^5.102.8",
-    "@tanstack/react-query-devtools": "^5.102.8",
-    "@tanstack/react-router": "^1.170.36",
-    "@tanstack/react-router-devtools": "^1.167.2",
-    "@tanstack/react-router-ssr-query": "^1.167.2",
-    "@tanstack/react-start": "^1.168.53",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.41.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "srvx": "^1.0.4",
-    "tailwind-merge": "^3.6.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
-    "@vitejs/plugin-react": "^6.1.1",
-    "eslint": "^10.10.0",
-    "tailwindcss": "^4.3.3",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.69.0",
-    "vite": "^8.3.0"
-  },
-  "envVars": {
-    "PORT": "3000"
-  }
-}
+{
+  "id": "tanstack",
+  "name": "TanStack Start",
+  "description": "TanStack Start with TanStack Router, React 19, and Tailwind CSS v4",
+  "type": "base",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node --env-file-if-exists=.env .output/server/index.mjs",
+    "preview": "vite preview",
+    "type:check": "tsc --noEmit",
+    "lint": "eslint src"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.104.3",
+    "@tanstack/react-query-devtools": "^5.104.3",
+    "@tanstack/react-router": "^1.170.45",
+    "@tanstack/react-router-devtools": "^1.167.2",
+    "@tanstack/react-router-ssr-query": "^1.167.3",
+    "@tanstack/react-start": "^1.169.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.41.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.2",
+    "eslint": "^10.10.0",
+    "nitro": "^3.0.260903-beta",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.69.0",
+    "vite": "^8.3.4"
+  },
+  "envVars": {
+    "PORT": "3000"
+  }
+}

package/templates/frontend/tanstack/src/routes/index.tsx.hbs

@@ -1,102 +1,103 @@
-import { createFileRoute{{#if useAuth}}, Link{{/if}} } from "@tanstack/react-router";
-import { ArrowRight } from "lucide-react";
-
-import { buttonVariants } from "~/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { cn } from "~/lib/utils";
-
-export const Route = createFileRoute("/")({
-  component: Home,
-});
-
-const featureList = [
-  "TanStack Start SSR",
-  "TanStack Router and Query",
-  "React 19 and TypeScript",
-  "Tailwind CSS v4",
-  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
-  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
-  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
-];
-
-function Home() {
-  return (
-    <main className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
-        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
-          <div className="space-y-6">
-            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
-              Created with better-ts-stack
-            </span>
-            <div className="space-y-4">
-              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
-                Ship your stack faster with a polished TypeScript foundation.
-              </h1>
-              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
-                Your project already includes the core app shell, database wiring,
-                and a shadcn-compatible UI foundation so you can keep building
-                instead of setting up boilerplate.
-              </p>
-            </div>
-            <div className="flex flex-col gap-3 sm:flex-row">
-              {{#if useAuth}}
-              <Link
-                to="/sign-up"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Create an account
-                <ArrowRight className="size-4" />
-              </Link>
-              <Link
-                to="/sign-in"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                Login
-              </Link>
-              {{else}}
-              <a
-                href="https://github.com/Abdullah-dev0/better-ts-stack"
-                target="_blank"
-                rel="noreferrer"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Explore the docs
-                <ArrowRight className="size-4" />
-              </a>
-              <a
-                href="https://tanstack.com/start/latest"
-                target="_blank"
-                rel="noreferrer"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                TanStack guide
-              </a>
-              {{/if}}
-            </div>
-          </div>
-
-          <Card className="border-border bg-card shadow-sm">
-            <CardHeader>
-              <CardTitle>Included in this starter</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <ul className="space-y-3 text-sm text-muted-foreground">
-                {featureList.map((feature) => (
-                  <li key={feature} className="flex items-center gap-3">
-                    <span className="size-2 rounded-full bg-primary" />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
-                Start editing{" "}
-                <code className="font-mono">src/routes/index.tsx</code> and
-                shape the project around your product instead of setup chores.
-              </div>
-            </CardContent>
-          </Card>
-        </section>
-      </div>
-    </main>
-  );
+import { createFileRoute{{#if useAuth}}, Link{{/if}} } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
+
+import { buttonVariants } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
+
+export const Route = createFileRoute("/")({
+  component: Home,
+});
+
+const featureList = [
+  "TanStack Start SSR",
+  "TanStack Router and Query",
+  "React 19 and TypeScript",
+  "Tailwind CSS v4",
+  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
+  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
+  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
+  {{#if (eq database "mongoose")}}"Mongoose database tooling",{{/if}}
+];
+
+function Home() {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
+        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
+              Created with better-ts-stack
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
+                Ship your stack faster with a polished TypeScript foundation.
+              </h1>
+              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
+                Your project already includes the core app shell, database wiring,
+                and a shadcn-compatible UI foundation so you can keep building
+                instead of setting up boilerplate.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              {{#if useAuth}}
+              <Link
+                to="/sign-up"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Create an account
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                to="/sign-in"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Login
+              </Link>
+              {{else}}
+              <a
+                href="https://better-ts-stack.abdullahtech.me/docs"
+                target="_blank"
+                rel="noreferrer"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Explore the docs
+                <ArrowRight className="size-4" />
+              </a>
+              <a
+                href="https://tanstack.com/start/latest"
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                TanStack guide
+              </a>
+              {{/if}}
+            </div>
+          </div>
+
+          <Card className="border-border bg-card shadow-sm">
+            <CardHeader>
+              <CardTitle>Included in this starter</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                {featureList.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <span className="size-2 rounded-full bg-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+                Start editing{" "}
+                <code className="font-mono">src/routes/index.tsx</code> and
+                shape the project around your product instead of setup chores.
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
 }

package/templates/frontend/tanstack/vite.config.ts

@@ -1,14 +1,22 @@
-import { tanstackStart } from "@tanstack/react-start/plugin/vite";
-import tailwindcss from "@tailwindcss/vite";
-import viteReact from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  server: {
-    port: 3000,
-  },
-  resolve: {
-    tsconfigPaths: true,
-  },
-  plugins: [tanstackStart({ srcDirectory: "src" }), tailwindcss(), viteReact()],
-});
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import tailwindcss from "@tailwindcss/vite";
+import viteReact from "@vitejs/plugin-react";
+import { nitro } from "nitro/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig(({ command }) => ({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    tsconfigPaths: true,
+  },
+  plugins: [
+    tanstackStart({ srcDirectory: "src" }),
+    tailwindcss(),
+    viteReact(),
+    // Nitro builds the production server in .output/ (run with node). It is
+    // left out of `vite dev`, where TanStack Start's own dev server is steadier
+    command === "build" && nitro(),
+  ],
+}));

package/templates/modules/auth/express/config.json

@@ -1,20 +1,20 @@
-{
-  "id": "auth",
-  "name": "JWT Auth",
-  "description": "JWT authentication with bcrypt password hashing",
-  "type": "feature",
-  "dependencies": {
-    "bcrypt": "^6.0.0",
-    "jsonwebtoken": "^9.0.3",
-    "zod": "^4.6.5"
-  },
-  "devDependencies": {
-    "@types/bcrypt": "^6.0.0",
-    "@types/jsonwebtoken": "^9.0.10"
-  },
-  "scripts": {},
-  "envVars": {
-    "JWT_SECRET": "please-change-me",
-    "JWT_EXPIRES_IN": "1h"
-  }
-}
+{
+  "id": "auth",
+  "name": "JWT Auth",
+  "description": "JWT authentication with bcrypt password hashing",
+  "type": "feature",
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "jsonwebtoken": "^9.0.3",
+    "zod": "^4.6.5"
+  },
+  "devDependencies": {
+    "@types/bcrypt": "^6.0.0",
+    "@types/jsonwebtoken": "^9.0.10"
+  },
+  "scripts": {},
+  "envVars": {
+    "JWT_SECRET": "please-change-me",
+    "JWT_EXPIRES_IN": "1h"
+  }
+}

package/templates/modules/auth/express/src/routes/auth.ts.hbs

@@ -1,19 +1,27 @@
-import { Request, Response, NextFunction, Router } from 'express';
-import { login, me, register } from '../controllers/authController';
-import { requireAuth } from '../middleware/requireAuth';
-
-const router: Router = Router();
-
-function asyncHandler(
-  fn: (req: Request, res: Response, next: NextFunction) => Promise<void>
-): (req: Request, res: Response, next: NextFunction) => void {
-  return (req, res, next) => {
-    void fn(req, res, next).catch(next);
-  };
-}
-
-router.post('/register', asyncHandler(register));
-router.post('/login', asyncHandler(login));
-router.get('/me', requireAuth, me);
-
-export default router;
+import { Request, Response, NextFunction, Router } from 'express';
+import { login, me, register } from '../controllers/authController';
+{{#if useRateLimit}}
+import { authLimiter } from '../middleware/rateLimit';
+{{/if}}
+import { requireAuth } from '../middleware/requireAuth';
+
+const router: Router = Router();
+
+function asyncHandler(
+  fn: (req: Request, res: Response, next: NextFunction) => Promise<void>
+): (req: Request, res: Response, next: NextFunction) => void {
+  return (req, res, next) => {
+    void fn(req, res, next).catch(next);
+  };
+}
+
+{{#if useRateLimit}}
+router.post('/register', authLimiter, asyncHandler(register));
+router.post('/login', authLimiter, asyncHandler(login));
+{{else}}
+router.post('/register', asyncHandler(register));
+router.post('/login', asyncHandler(login));
+{{/if}}
+router.get('/me', requireAuth, me);
+
+export default router;