create-tanstack-app 1.1.4 → 1.2.2

package/README.md

@@ -1,93 +1,165 @@
-# Create TanStack App
+# Create React App for TanStack Router
 
-This CLI tool helps you quickly set up a new TanStack app by downloading and initializing the template from [GitHub](https://github.com/SH20RAJ/tanstack-start). It's perfect for building full-stack applications using TanStack's powerful router and full-stack capabilities.
+This CLI application builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
 
-## Features:
-- Full-Document SSR
-- Streaming
-- Server Functions (RPCs)
-- Automatic type-safe routing with TanStack Router
-- Deployment-ready app setup
+To help accelerate the migration away from `create-react-app` we created the `create-tanstack-app` CLI which is a plug-n-play replacement for CRA.
 
-## Getting Started
+## Quick Start
 
-### Install
+To maintain compatability with `create-react-app` you can build a new application by running:
 
-You can use the CLI to set up a new TanStack app directly from GitHub with:
+| Command                                                                           | Description                                       |
+| --------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `pnpx create-tanstack-app@latest my-app`                                          | Create a new app                                  |
+| `pnpx create-tanstack-app@latest my-app --template file-router`                   | Create a new file based app                       |
+| `pnpx create-tanstack-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
+| `pnpx create-tanstack-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `pnpx create-tanstack-app@latest my-app --framework solid`                        | Create a Solid app                                |
+| `pnpx create-tanstack-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
+
+If you don't specify a project name, the CLI will walk you through an interactive setup process:
+
+```bash
+pnpx create-tanstack-app@latest
+```
+
+This will start an interactive CLI that guides you through the setup process, allowing you to choose:
+
+- Project Name
+- Router Type (File-based or Code-based routing)
+- TypeScript support
+- Tailwind CSS integration
+- Package manager
+- Toolchain
+- Git initialization
+
+## Command Line Options
+
+You can also use command line flags to specify your preferences directly:
 
 ```bash
-npx create-tanstack-app@latest
+pnpx create-tanstack-app@latest my-app --template file-router --tailwind --package-manager pnpm
 ```
 
-This will:
-1. Download the starter template from [https://github.com/SH20RAJ/tanstack-start](https://github.com/SH20RAJ/tanstack-start)
-2. Initialize the project with all necessary dependencies and configurations.
+Available options:
+
+- `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
+- `--tailwind`: Enable Tailwind CSS
+- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
+- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint+prettier`)
+- `--no-git`: Do not initialize a git repository
+- `--add-ons`: Enable add-on selection or specify add-ons to install
+
+When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
+
+## Features
+
+What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in `app/main.tsx`.
 
-### Dependencies
+`create-tanstack-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
 
-Your new project will include:
-- **TanStack Router**: A powerful type-safe routing system for React.
-- **Vinxi**: A bundler and deployment tool.
-- **Vite**: For fast build and development.
-- **React**: Frontend library to build the app.
-- **TypeScript**: For type safety throughout the app.
+## Routing Options
 
-### Project Structure
+### File Based Routing (Recommended)
 
-Once the setup is complete, your project will have a structure similar to this:
+File Based Routing is the default option when using the interactive CLI. The location of the home page will be `app/routes/index.tsx`. This approach provides a more intuitive and maintainable way to structure your routes.
 
+To explicitly choose File Based Routing, use:
+
+```bash
+pnpx create-tanstack-app@latest my-app --template file-router
+```
+
+### Code Based Routing
+
+If you prefer traditional code-based routing, you can select it in the interactive CLI or specify it by using either the `typescript` or `javascript` template:
+
+```bash
+pnpx create-tanstack-app@latest my-app --template typescript
 ```
-my-app/
-├── app/
-│   ├── routes/
-│   │   └── __root.tsx
-│   ├── client.tsx
-│   ├── router.tsx
-│   ├── routeTree.gen.ts
-│   └── ssr.tsx
-├── .gitignore
-├── app.config.ts
-├── package.json
-└── tsconfig.json
+
+## Additional Configuration
+
+### TypeScript
+
+- File Based Routing always uses TypeScript
+- For Code Based Routing, you can choose between TypeScript and JavaScript
+- Enable TypeScript explicitly with `--template typescript`
+
+### Tailwind CSS
+
+Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
+
+### Package Manager
+
+Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`) either through the interactive CLI or using the `--package-manager` flag.
+
+Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) can be found in the generated `README.md` for your project.
+
+### Toolchain
+
+Choose your preferred solution for formatting and linting either through the interactive CLI or using the `--toolchain` flag.
+
+Setting this flag to `biome` will configure it as your toolchain of choice, adding a `biome.json` to the root of the project. Consult the [biome documentation](https://biomejs.dev/guides/getting-started/) for further customization.
+
+Setting this flag to `eslint+prettier` will configure it as your toolchain of choice, adding an `eslint.config.js` and `prettier.config.js` to the root of the project, as well as a `.prettierignore` file. Consult the [eslint documentation](https://eslint.org/docs/latest/) and [prettier documentation](https://prettier.io/docs/) for further customization.
+
+## Add-ons (experimental)
+
+You can enable add-on selection:
+
+```bash
+pnpx create-tanstack-app@latest --add-ons
 ```
 
-### Running the App
+This will prompt you to select the add-ons you want to enable during application creation.
 
-Once the setup is complete, run the following command to start the app:
+You can enable specific add-ons directly by adding a comma separated list of add-on names to the `--add-ons` flag. For example:
 
 ```bash
-npm run dev
+pnpx create-tanstack-app@latest my-app --add-ons shadcn,tanstack-query
 ```
 
-This will start the development server, and you can start building your app with TanStack's full-stack routing and SSR features.
+You can get a list of all available add-ons by running:
+
+```bash
+pnpx create-tanstack-app@latest --list-add-ons
+```
 
-For more details on how to configure your app, refer to the official [TanStack Start Docs](https://tanstack.com/start/latest).
+This will display a list of all available add-ons for React that are compatible with the Code Router.
 
----
+```bash
+pnpx create-tanstack-app@latest --list-add-ons --framework solid --template file-router
+```
 
-Make sure that your `index.js` for this npm package initializes the necessary steps to clone the repo from GitHub and set it up locally. You can use Node's `child_process` module to clone the repository and run the initial npm setup commands for users. For example:
+Will get you a list of all available add-ons for Solid that are compatible with the File Router.
 
-```js
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
+## MCP (Model Context Protocol) Support (experimental)
 
-const repoUrl = 'https://github.com/SH20RAJ/tanstack-start.git';
-const targetDir = path.join(process.cwd(), 'tanstack-app');
+You can launch the `create-tanstack-app` CLI with the `--mcp` flag to enable MCP support. Use this in your MCP enabled IDE to allow the Agent model to generate TanStack Router applications.
 
-try {
-  if (!fs.existsSync(targetDir)) {
-    console.log('Cloning TanStack app template...');
-    execSync(`git clone ${repoUrl} ${targetDir}`, { stdio: 'inherit' });
+```bash
+pnpx create-tanstack-app@latest --mcp
+```
 
-    console.log('Installing dependencies...');
-    execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
+Here is the JSON configuration for MCP support in many MCP clients.
 
-    console.log('Setup complete! You can now run "npm run dev" in the project directory.');
-  } else {
-    console.log('Directory already exists.');
+```json
+{
+  "mcpServers": {
+    "create-tanstack-app": {
+      "command": "pnpx",
+      "args": ["create-tanstack-app@latest", "--mcp"]
+    }
   }
-} catch (error) {
-  console.error('Error setting up TanStack app:', error);
 }
-```
+```
+
+# Contributing
+
+Check out the [Contributing](CONTRIBUTING.md) guide.
+
+# License
+
+MIT
+

package/index.js

@@ -1,65 +1,20 @@
 #!/usr/bin/env node
 
 const { execSync } = require("child_process");
-const fs = require("fs");
-const path = require("path");
-const readline = require("readline");
-
-// Prompt the user for input
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
-});
-
-async function getFolderName(defaultName) {
-  return new Promise((resolve) => {
-    rl.question(
-      `Enter the folder name (or use './' for the current directory) [${defaultName}]: `,
-      (input) => {
-        resolve(input || defaultName);
-      }
-    );
-  });
-}
 
 async function initApp() {
   try {
-    // Get the folder name from the user or command-line argument
-    const argFolderName = process.argv[2];
-    const folderName = argFolderName || (await getFolderName("my-tanstack-app"));
-    rl.close();
-
-    const dest =
-      folderName === "./" ? process.cwd() : path.join(process.cwd(), folderName);
-
-    // Check if the destination already exists
-    if (fs.existsSync(dest)) {
-      console.log(
-        "❌ Directory already exists. Please choose another name or delete the existing directory."
-      );
-      return;
-    }
-
-    console.log("📥 Cloning TanStack app template from GitHub...");
-
-    // Clone the repository
-    execSync(
-      `git clone https://github.com/SH20RAJ/tanstack-start.git ${dest}`,
-      {
-        stdio: "inherit",
-      }
-    );
+    // Get all command-line arguments
+    const args = process.argv.slice(2);
 
-    console.log("✅ Template successfully cloned!");
+    console.log("📥 Running create-tsrouter-app...");
 
-    // Install dependencies
-    console.log("📦 Installing dependencies...");
-    execSync("npm install", { cwd: dest, stdio: "inherit" });
+    // Run create-tsrouter-app with forwarded flags
+    execSync(`npx create-tsrouter-app ${args.join(" ")}`, {
+      stdio: "inherit",
+    });
 
-    console.log(`🎉 Setup complete! Navigate to your project folder:\n`);
-    console.log(`   cd ${folderName === "./" ? "." : folderName}`);
-    console.log(`   npm run dev`);
-    console.log("\n🚀 Happy coding with TanStack!");
+    console.log("\n🚀 Happy coding with TanStack Router!");
   } catch (error) {
     console.error("❌ Error during setup:", error.message);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tanstack-app",
-  "version": "1.1.4",
+  "version": "1.2.2",
   "main": "index.js",
   "bin": {
     "create-tanstack-app": "./index.js"

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "ES2020",
+      "module": "ES2020",
+      "outDir": "./dist",
+      "rootDir": "./src",
+      "strict": true,
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "moduleResolution": "node"
+    },
+    "include": ["./src/**/*.ts"],
+    "exclude": ["node_modules", "dist"]
+  }
+