diff --git a/.changeset/vast-trains-end.md b/.changeset/vast-trains-end.md new file mode 100644 index 0000000..effa1f7 --- /dev/null +++ b/.changeset/vast-trains-end.md @@ -0,0 +1,5 @@ +--- +"create-better-t-stack": patch +--- + +update readme diff --git a/README.md b/README.md index 38ad7de..3a86588 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,7 @@ A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations -![demo](https://github.com/user-attachments/assets/87f6fffd-750d-43c5-9d00-cefbb644ed92) - -## Sponsors - -

-Sponsors -

+![demo](https://cdn.jsdelivr.net/gh/amanvarshney01/create-better-t-stack@master/demo.gif) ## Quick Start @@ -67,6 +61,12 @@ bun dev:web Just fork the repository and submit a pull request! +## Sponsors + +

+Sponsors +

+ ## Star History diff --git a/apps/cli/README.md b/apps/cli/README.md index f7704dd..6680e4b 100644 --- a/apps/cli/README.md +++ b/apps/cli/README.md @@ -2,11 +2,7 @@ A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations -## Sponsors - -

-Sponsors -

+![demo](https://cdn.jsdelivr.net/gh/amanvarshney01/create-better-t-stack@master/demo.gif) ## Quick Start @@ -27,35 +23,21 @@ Follow the prompts to configure your project or use the `--yes` flag for default ## Features -- **TypeScript**: End-to-end type safety. -- **Monorepo Structure**: Choose between Turborepo for optimized builds or standard pnpm/npm/bun workspaces. -- **Frontend Options**: - - React with Vite: TanStack Router, React Router, or TanStack Start. - - Next.js (Full-stack or frontend-only). - - Nuxt (Vue framework). - - SvelteKit. - - React Native with Expo for mobile apps. - - None. -- **UI**: Tailwind CSS with shadcn/ui components pre-configured. -- **Backend Frameworks**: Choose between Hono, Express, Elysia, or use Next.js API routes. -- **API Layer**: End-to-end type safety with tRPC or oRPC. -- **Runtime Options**: Choose between Bun or Node.js for your server. -- **Database Options**: SQLite, PostgreSQL, MySQL, MongoDB, or no database. -- **ORM Selection**: Choose between Drizzle ORM (TypeScript-first), Prisma (feature-rich), or no ORM. -- **Database Setup**: Optional automated setup for Turso (SQLite), Neon (Postgres), Prisma Postgres (Supabase), or MongoDB Atlas. -- **Authentication**: Optional auth setup using Better-Auth (email/password, OAuth coming soon). -- **Addons**: - - **PWA**: Add Progressive Web App support. - - **Tauri**: Build native desktop applications. - - **Starlight**: Add an Astro-based documentation site. - - **Biome**: Integrated linting and formatting. - - **Husky**: Git hooks for code quality checks (lint-staged). - - **Turborepo**: Optimized monorepo build system. -- **Examples**: Include pre-built examples like a Todo app or an AI Chat interface (using Vercel AI SDK). -- **Developer Experience**: - - Automatic Git initialization. - - Choice of package manager (npm, pnpm, bun). - - Optional automatic dependency installation. +| Category | Options | +|----------|---------| +| **TypeScript** | End-to-end type safety across all parts of your application | +| **Frontend** | • React with TanStack Router
• React with React Router
• React with TanStack Start (SSR)
• Next.js
• SvelteKit
• Nuxt (Vue)
• SolidJS
• React Native with Expo
• None | +| **Backend** | • Hono
• Express
• Elysia
• Next.js API routes
• Convex | +| **API Layer** | • tRPC (type-safe APIs)
• oRPC (OpenAPI-compatible type-safe APIs) | +| **Runtime** | • Bun
• Node.js | +| **Database** | • SQLite
• PostgreSQL
• MySQL
• MongoDB
• None | +| **ORM** | • Drizzle (TypeScript-first)
• Prisma (feature-rich)
• Mongoose (for MongoDB)
• None | +| **Database Setup** | • Turso (SQLite)
• Neon (PostgreSQL)
• Prisma Postgres (via Prisma Accelerate)
• MongoDB Atlas
• None (manual setup) | +| **Authentication** | Better-Auth (email/password, with more options coming soon) | +| **Styling** | Tailwind CSS with shadcn/ui components | +| **Addons** | • PWA support
• Tauri (desktop applications)
• Starlight (documentation site)
• Biome (linting and formatting)
• Husky (Git hooks)
• Turborepo (optimized builds) | +| **Examples** | • Todo app
• AI Chat interface (using Vercel AI SDK) | +| **Developer Experience** | • Automatic Git initialization
• Package manager choice (npm, pnpm, bun)
• Automatic dependency installation | ## Usage @@ -66,10 +48,10 @@ Options: -V, --version Output the version number -y, --yes Use default configuration --database Database type (none, sqlite, postgres, mysql, mongodb) - --orm ORM type (none, drizzle, prisma) + --orm ORM type (none, drizzle, prisma, mongoose) --auth Include authentication --no-auth Exclude authentication - --frontend Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, native, none) + --frontend Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, solid, native, none) --addons Additional addons (pwa, tauri, starlight, biome, husky, turborepo, none) --examples Examples to include (todo, ai, none) --git Initialize git repository @@ -78,9 +60,9 @@ Options: --install Install dependencies --no-install Skip installing dependencies --db-setup Database setup (turso, neon, prisma-postgres, mongodb-atlas, none) - --backend Backend framework (hono, express, elysia) - --runtime Runtime (bun, node) - --api API type (trpc, orpc) + --backend Backend framework (hono, express, elysia, next, convex) + --runtime Runtime (bun, node, none) + --api API type (trpc, orpc, none) -h, --help Display help ``` @@ -98,13 +80,13 @@ Create a project with specific options: npx create-better-t-stack my-app --database postgres --orm drizzle --auth --addons pwa biome ``` -Create a project with Elysia and Node.js runtime: +Create a project with Elysia backend and Node.js runtime: ```bash npx create-better-t-stack my-app --backend elysia --runtime node ``` -Create a project with specific frontend options: +Create a project with multiple frontend options: ```bash npx create-better-t-stack my-app --frontend tanstack-router native @@ -119,7 +101,13 @@ npx create-better-t-stack my-app --examples todo ai Create a project with Turso database setup: ```bash -npx create-better-t-stack my-app --db-setup turso +npx create-better-t-stack my-app --database sqlite --orm drizzle --db-setup turso +``` + +Create a project with Convex backend: + +```bash +npx create-better-t-stack my-app --backend convex --frontend tanstack-router ``` Create a project with documentation site: @@ -127,3 +115,34 @@ Create a project with documentation site: ```bash npx create-better-t-stack my-app --addons starlight ``` + +## Compatibility Notes + +- **Convex backend**: Automatically disables authentication, database, ORM, and API options +- **SvelteKit, Nuxt, and SolidJS** frontends are only compatible with oRPC API layer +- **PWA support** requires React with TanStack Router, React Router, or SolidJS +- **Tauri desktop app** requires React (TanStack Router/React Router), Nuxt, SvelteKit, or SolidJS +- **AI example** is not compatible with Elysia backend or SolidJS frontend + +## Project Structure + +The created project follows a clean monorepo structure: + +``` +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 +``` + +After project creation, you'll receive detailed instructions for next steps and additional setup requirements. + +## Sponsors + +

+Sponsors +

diff --git a/apps/cli/src/helpers/create-readme.ts b/apps/cli/src/helpers/create-readme.ts index 00201c1..fd01e1a 100644 --- a/apps/cli/src/helpers/create-readme.ts +++ b/apps/cli/src/helpers/create-readme.ts @@ -3,6 +3,7 @@ import consola from "consola"; import fs from "fs-extra"; import type { ProjectAddons, + ProjectApi, ProjectConfig, ProjectDatabase, ProjectFrontend, @@ -32,8 +33,10 @@ function generateReadmeContent(options: ProjectConfig): string { runtime = "bun", frontend = ["tanstack-router"], backend = "hono", + api = "trpc", } = options; + const isConvex = backend === "convex"; const hasReactRouter = frontend.includes("react-router"); const hasTanstackRouter = frontend.includes("tanstack-router"); const hasNative = frontend.includes("native"); @@ -53,15 +56,15 @@ function generateReadmeContent(options: ProjectConfig): string { return `# ${projectName} -This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${ +This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines ${ hasTanstackRouter - ? "TanStack Router" + ? "React, TanStack Router" : hasReactRouter - ? "React Router" + ? "React, React Router" : hasNext ? "Next.js" : hasTanstackStart - ? "TanStack Start" + ? "React, TanStack Start" : hasSvelte ? "SvelteKit" : hasNuxt @@ -69,11 +72,13 @@ This project was created with [Better-T-Stack](https://github.com/AmanVarshney01 : hasSolid ? "SolidJS" : "" - }, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more. + }, ${backend[0].toUpperCase() + backend.slice(1)}${ + isConvex ? "" : `, ${api.toUpperCase()}` + }, and more. ## Features -${generateFeaturesList(database, auth, addons, orm, runtime, frontend, backend)} +${generateFeaturesList(database, auth, addons, orm, runtime, frontend, backend, api)} ## Getting Started @@ -82,8 +87,20 @@ First, install the dependencies: \`\`\`bash ${packageManager} install \`\`\` +${ + isConvex + ? ` +## Convex Setup -${generateDatabaseSetup(database, auth, packageManagerRunCmd, orm)} +This project uses Convex as a backend. You'll need to set up Convex before running the app: + +\`\`\`bash +${packageManagerRunCmd} dev:setup +\`\`\` + +Follow the prompts to create a new Convex project and connect it to your application.` + : generateDatabaseSetup(database, auth, packageManagerRunCmd, orm) +} Then, run the development server: @@ -103,7 +120,11 @@ ${ : "" } ${hasNative ? "Use the Expo Go app to run the mobile application.\n" : ""} -The API is running at [http://localhost:3000](http://localhost:3000). +${ + isConvex + ? "Your app will connect to the Convex cloud backend automatically." + : "The API is running at [http://localhost:3000](http://localhost:3000)." +} ${ addons.includes("pwa") && hasReactRouter @@ -150,9 +171,13 @@ ${ addons.includes("starlight") ? "│ ├── docs/ # Documentation site (Astro Starlight)\n" : "" -}│ └── server/ # Backend API (${ - backend[0].toUpperCase() + backend.slice(1) - }, tRPC) +}${ + isConvex + ? "├── packages/\n│ └── backend/ # Convex backend functions and schema\n" + : `│ └── server/ # Backend API (${ + backend[0].toUpperCase() + backend.slice(1) + }, ${api.toUpperCase()})` +} \`\`\` ## Available Scripts @@ -177,7 +202,9 @@ function generateFeaturesList( runtime: ProjectRuntime, frontend: ProjectFrontend[], backend: string, + api: ProjectApi, ): string { + const isConvex = backend === "convex"; const hasTanstackRouter = frontend.includes("tanstack-router"); const hasReactRouter = frontend.includes("react-router"); const hasNative = frontend.includes("native"); @@ -221,25 +248,36 @@ function generateFeaturesList( "- **shadcn/ui** - Reusable UI components", ); - if (backend === "hono") { - addonsList.push("- **Hono** - Lightweight, performant server framework"); - } else if (backend === "express") { - addonsList.push("- **Express** - Fast, unopinionated web framework"); - } else if (backend === "elysia") { - addonsList.push("- **Elysia** - Type-safe, high-performance framework"); - } else if (backend === "next") { - addonsList.push("- **Next.js** - Full-stack React framework"); + if (isConvex) { + addonsList.push("- **Convex** - Reactive backend-as-a-service platform"); + } else { + if (backend === "hono") { + addonsList.push("- **Hono** - Lightweight, performant server framework"); + } else if (backend === "express") { + addonsList.push("- **Express** - Fast, unopinionated web framework"); + } else if (backend === "elysia") { + addonsList.push("- **Elysia** - Type-safe, high-performance framework"); + } else if (backend === "next") { + addonsList.push("- **Next.js** - Full-stack React framework"); + } + + if (api === "trpc") { + addonsList.push("- **tRPC** - End-to-end type-safe APIs"); + } else if (api === "orpc") { + addonsList.push( + "- **oRPC** - End-to-end type-safe APIs with OpenAPI integration", + ); + } + + addonsList.push( + `- **${runtime === "bun" ? "Bun" : "Node.js"}** - Runtime environment`, + ); } - addonsList.push( - "- **tRPC** - End-to-end type-safe APIs", - `- **${runtime === "bun" ? "Bun" : "Node.js"}** - Runtime environment`, - ); - - if (database !== "none") { + if (database !== "none" && !isConvex) { addonsList.push( `- **${ - orm === "drizzle" ? "Drizzle" : "Prisma" + orm === "drizzle" ? "Drizzle" : orm === "prisma" ? "Prisma" : "Mongoose" }** - TypeScript-first ORM`, `- **${ database === "sqlite" @@ -253,7 +291,7 @@ function generateFeaturesList( ); } - if (auth) { + if (auth && !isConvex) { addonsList.push( "- **Authentication** - Email & password authentication with Better Auth", ); @@ -270,6 +308,8 @@ function generateFeaturesList( addonsList.push("- **Husky** - Git hooks for code quality"); } else if (addon === "starlight") { addonsList.push("- **Starlight** - Documentation site with Astro"); + } else if (addon === "turborepo") { + addonsList.push("- **Turborepo** - Optimized monorepo build system"); } } @@ -317,7 +357,9 @@ cd apps/server && ${packageManagerRunCmd} db:local 2. Update your \`apps/server/.env\` file with your MySQL connection details. `; } else if (database === "mongodb") { - setup += `This project uses MongoDB with Prisma ORM. + setup += `This project uses MongoDB ${ + orm === "mongoose" ? "with Mongoose" : "with Prisma ORM" + }. 1. Make sure you have MongoDB set up. 2. Update your \`apps/server/.env\` file with your MongoDB connection URI. @@ -331,7 +373,12 @@ ${auth ? "3" : "3"}. ${ \`\`\`bash ${packageManagerRunCmd} db:push \`\`\`` - : `Apply the schema to your database: + : orm === "drizzle" + ? `Apply the schema to your database: +\`\`\`bash +${packageManagerRunCmd} db:push +\`\`\`` + : `Apply the schema to your database: \`\`\`bash ${packageManagerRunCmd} db:push \`\`\`` @@ -350,10 +397,21 @@ function generateScriptsList( addons: ProjectAddons[], backend: string, ): string { + const isConvex = backend === "convex"; + let scripts = `- \`${packageManagerRunCmd} dev\`: Start all applications in development mode - \`${packageManagerRunCmd} build\`: Build all applications -- \`${packageManagerRunCmd} dev:web\`: Start only the web application -- \`${packageManagerRunCmd} dev:server\`: Start only the server +- \`${packageManagerRunCmd} dev:web\`: Start only the web application`; + + if (isConvex) { + scripts += ` +- \`${packageManagerRunCmd} dev:setup\`: Setup and configure your Convex project`; + } else { + scripts += ` +- \`${packageManagerRunCmd} dev:server\`: Start only the server`; + } + + scripts += ` - \`${packageManagerRunCmd} check-types\`: Check TypeScript types across all apps`; if (hasNative) { @@ -361,7 +419,7 @@ function generateScriptsList( - \`${packageManagerRunCmd} dev:native\`: Start the React Native/Expo development server`; } - if (database !== "none") { + if (database !== "none" && !isConvex) { scripts += ` - \`${packageManagerRunCmd} db:push\`: Push schema changes to database - \`${packageManagerRunCmd} db:studio\`: Open database studio UI`; diff --git a/demo.gif b/demo.gif new file mode 100644 index 0000000..65a7f9f Binary files /dev/null and b/demo.gif differ