Better-T-Stack

repository·main·Indexed 26 days ago

https://github.com/amanvarshney01/create-better-t-stack

A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects. It allows developers to customize their stack by selecting specific frontend frameworks, backend frameworks, databases, ORMs, and authentication providers. The tool includes support for AI agents via JSON input, schema introspection, and a local stdio MCP server.

Tokens
62.8K
Snippets
115
Records
416
Agent score
91%

What's inside better-t-stack

  1. Understand the Better-T-Stack Monorepo Structure

    main
    Better-T-Stack scaffolds a monorepo using apps/* for applications and packages/* for shared logic. The root directory contains configuration files like bts.jsonc (used by the CLI for project enhancement), turbo.json (if Turborepo is selected), and nx.json (if Nx is selected). Package manager specific files like pnpm-workspace.yaml, bunfig.toml, or .npmrc are included based on your choice during setup.
  2. Understand the bts.jsonc configuration file

    main

    bts.jsonc is a JSONC (JSON with comments) configuration file located at your project root (./bts.jsonc). It captures the specific stack choices made during project creation, such as frontend, backend, API, DB/ORM, auth, and addons.

    Crucial Note: While the generated code in apps/* and packages/* is the source of truth for your application, you must keep bts.jsonc if you intend to use the add command. If this file is missing, the add command will fail because it cannot detect your current stack to validate compatibility or pre-fill defaults.

  3. Project structure of a created Better-T-Stack app

    main

    The CLI generates a monorepo structure as follows:

    my-better-t-app/
    ├── apps/
    │   ├── web/          # Frontend application
    │   ├── server/       # Backend API
    │   ├── native/       # (optional) Mobile application
    │   └── docs/         # (optional) Documentation site
    ├── packages/         # Shared packages
    └── README.md         # Auto-generated project documentation
  4. Understand the Better T Stack project scaffolding

    main

    Better T Stack is a project scaffolding CLI designed to transform a specific stack selection into a reproducible TypeScript starter project. It provides two primary workflows:

    1. Create Path: The CLI workflow used to turn a project configuration into a brand-new scaffolded project.
    2. Add Path: The CLI workflow used to add new capabilities (Addons) to an existing Better T Stack project.

    Additionally, the project exposes an MCP Surface (Model Context Protocol server) that allows AI agents to access planning, creation, addon, guidance, and schema operations.

  5. Develop the Documentation site

    main

    To develop the documentation site (apps/web), you must first set up the backend.

    1. From the repo root, run bun install.
    2. Navigate to packages/backend and run bun dev:setup (follow the prompts to choose local development).
    3. Copy the CONVEX_URL from packages/backend/.env.local to apps/web/.env using the key NEXT_PUBLIC_CONVEX_URL.
    4. Set the required Convex environment variables in packages/backend using the Convex CLI:
      • GITHUB_ACCESS_TOKEN
      • GITHUB_WEBHOOK_SECRET
    5. Run bun dev from the repo root.
  6. Configure cross-subdomain cookies for Better-Auth

    main

    When the Web and Server components are deployed as separate Cloudflare Workers, they reside on different subdomains. To allow authentication to work across these subdomains, you must enable crossSubDomainCookies in your betterAuth configuration. Replace the placeholder domain with your actual workers subdomain (e.g., .your-subdomain.workers.dev).

    // packages/auth/src/auth.ts
    export const auth = betterAuth({
      // ... other config
      session: {
        cookieCache: {
          enabled: true,
          maxAge: 5 * 60, // 5 minutes
        },
      },
      advanced: {
        crossSubDomainCookies: {
          enabled: true,
          domain: ".workers.dev", // Shared domain for cookies
        },
      },
    });
  7. Use bts_plan_project and bts_create_project for scaffolding

    main

    The scaffolding process is split into two distinct phases to prevent accidental file generation and ensure user confirmation.

    1. Plan Phase: Call bts_plan_project with your full configuration. This is a dry run that performs no file writes. Review the output to ensure it matches your intended stack.
    2. Create Phase: Once the plan is confirmed, call bts_create_project.

    Important: When calling bts_create_project, set install: false. This prevents MCP request timeouts. You should run the installation command (e.g., bun install or npm install) manually in the project directory after the creation is complete.

  8. Configure Database and ORM combinations

    main

    When using the create-better-t-stack CLI, you must select compatible Database and ORM pairs.

    Supported Combinations:

    • sqlite: Use with drizzle or prisma.
    • postgres: Use with drizzle or prisma.
    • mysql: Use with drizzle or prisma.
    • mongodb: Use with mongoose or prisma.
    • none: No database or ORM required.

    Restrictions:

    • mongodb is not compatible with drizzle.
    • You cannot select a database without an ORM, or an ORM without a database.
    # ❌ Invalid - MongoDB with Drizzle
    create-better-t-stack --database mongodb --orm drizzle
    
    # ✅ Valid - MongoDB with Mongoose
    create-better-t-stack --database mongodb --orm mongoose
  9. Configure Codex with Better-T-Stack

    main

    You can use Better-T-Stack in Codex either via the plugin or by wiring the MCP server directly.

    Option 1: Plugin Add the marketplace from the Codex plugins screen and install Better-T-Stack.

    Option 2: MCP (via add-mcp)

    npx -y add-mcp@latest "npx -y create-better-t-stack@latest mcp"   # choose "codex"

    Option 3: Direct Config (~/.codex/config.toml)

    [mcp_servers.better-t-stack]
    command = "npx"
    args = ["-y", "create-better-t-stack@latest", "mcp"]
  10. Configure infrastructure in alchemy.run.ts

    main

    The alchemy.run.ts file defines your infrastructure using Alchemy (an Infrastructure-as-Code library). You can define D1 databases, web frontends (using framework-specific resources), and server workers.

    Supported Framework Resources:

    • Nextjs: Uses OpenNext adapter
    • Nuxt: Uses Nitro Cloudflare preset
    • SvelteKit: Uses Alchemy SvelteKit adapter
    • TanStackStart: Full SSR support
    • ReactRouter: Uses React Router Cloudflare adapter
    • Vite: Used for static sites (TanStack Router, SolidJS)

    Example Configuration:

    // packages/infra/alchemy.run.ts
    import alchemy from "alchemy";
    import { TanStackStart } from "alchemy/cloudflare";
    import { Worker } from "alchemy/cloudflare";
    import { D1Database } from "alchemy/cloudflare";
    import { config } from "dotenv";
    
    config({ path: "./.env" });
    config({ path: "../../apps/web/.env" });
    config({ path: "../../apps/server/.env" });
    
    const app = await alchemy("my-app");
    
    const db = await D1Database("database", {
      migrationsDir: "../../packages/db/prisma/migrations",
    });
    
    export const web = await TanStackStart("web", {
      cwd: "../../apps/web",
      bindings: {
        VITE_SERVER_URL: alchemy.env.VITE_SERVER_URL!,
      },
    });
    
    export const server = await Worker("server", {
      cwd: "../../apps/server",
      entrypoint: "src/index.ts",
      compatibility: "node",
      bindings: {
        DB: db,
        CORS_ORIGIN: alchemy.env.CORS_ORIGIN!,
        BETTER_AUTH_SECRET: alchemy.secret.env.BETTER_AUTH_SECRET!,
        BETTER_AUTH_URL: alchemy.env.BETTER_AUTH_URL!,
      },
      dev: {
        port: 3000,
      },
    });
    
    await app.finalize();
  11. Perform a Dry Run to validate inputs

    main

    Use the --dry-run flag to validate your inputs and target directories without actually writing any files. This is useful for planning, CI validation, or agent reasoning loops.

    CLI usage:

    create-better-t-stack --yes --dry-run

    JSON usage: Include "dryRun": true in your input payload for create-json or add-json commands.

    create-better-t-stack --yes --dry-run
    create-better-t-stack create-json --input '{"projectName":"my-app","yes":true,"dryRun":true}'
    create-better-t-stack add-json --input '{"projectDir":"./my-app","addons":["mcp"],"dryRun":true}'