create-start-app 0.1.2 → 0.2.0

package/.github/workflows/auto.yml

@@ -33,13 +33,13 @@ jobs:
 
       - name: Publish Packages
         run: |
-          bunx gitpick@latest https://github.com/TanStack/create-tsrouter-app . --overwrite
-          bun i
-          bun run build
-          rm -rf bun.lock
           npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+          # ~ alias create-tsrouter-app
+          bunx gitpick@latest https://github.com/TanStack/create-tsrouter-app . --overwrite
+          bun i && bun run build && rm -rf bun.lock
           bunx json -I -f package.json -e 'this.name="create-router-app"'
           npm publish || true
+          # ~ alias create-tsrouter-app
           bunx json -I -f package.json -e 'this.name="create-start-app"'
           npm publish || true
         env:

package/README.md

@@ -1,46 +1,96 @@
 # Create React App for TanStack Router
 
-This CLI applications builds Tanstack Start applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
+This CLI applications builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
 
 To help accelerate the migration away from `create-react-app` we created the `create-tsrouter-app` CLI which is a plug-n-play replacement for CRA.
 
-Instead of:
+## Quick Start
+
+To maintain compatability with `create-react-app` you can build a new application by running:
+
+| Command                                                        | Description                 |
+| -------------------------------------------------------------- | --------------------------- |
+| `npx create-tsrouter-app@latest my-app`                        | Create a new app            |
+| `npx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app |
+| `npx create-tsrouter-app@latest my-app --template typescript`  | Create a new TypeScript app |
+| `npx create-tsrouter-app@latest my-app --template javascript`  | Create a new JavaScript app |
+| `npx create-tsrouter-app@latest my-app --tailwind`             | Add Tailwind CSS support    |
+
+If you don't specify a project name, the CLI will walk you through an interactive setup process:
 
 ```bash
-npx create-react-app my-app
+npx create-tsrouter-app@latest
 ```
 
-You can now run:
+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
+- Git initialization
+
+## Command Line Options
+
+You can also use command line flags to specify your preferences directly:
 
 ```bash
-npx create-tsrouter-app@latest my-app
+npx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
 ```
 
-Instead of using:
+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`, or `bun`)
+- `--no-git`: Do not initialize a git repository
+
+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`.
+
+`create-tsrouter-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).
+
+## Routing Options
+
+### File Based Routing (Recommended)
+
+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
-npx create-react-app my-app --template typescript
+npx create-tsrouter-app@latest my-app --template file-router
 ```
 
-To create a SPA application using TypeScript. You can now run:
+### 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
 npx create-tsrouter-app@latest my-app --template typescript
 ```
 
-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`.
+## Additional Configuration
 
-`create-tsrouter-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).
+### TypeScript
+
+- File Based Routing always uses TypeScript
+- For Code Based Routing, you can choose between TypeScript and JavaScript
+- Enable TypeScript explicitly with `--template typescript`
 
-If you want Tailwind then just add `--tailwind` and that will automatically configure [Tailwind V4](https://tailwindcss.com/).
+### Tailwind CSS
 
-You can also specify your preferred package manager with `--package-manager` such as `npm`, `bun`, `yarn`, or `pnpm`.
+Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
 
-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) be found in the generated `README.md` for your project.
+### Package Manager
 
-## File Based Routing
+Choose your preferred package manager (`npm`, `bun`, `yarn`, or `pnpm`) either through the interactive CLI or using the `--package-manager` flag.
 
-By default `create-tsrouter-app` will create a Code Based Routing application. If you want to use File Based Routing then you can specify `--template file-router`. The location of the home page will be `app/routes/index.tsx`.
+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.
 
 # Contributing
 

package/dist/index.js

@@ -4,10 +4,10 @@ import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Command, InvalidArgumentError } from 'commander';
-import { intro, outro, spinner, log } from '@clack/prompts';
+import { cancel, confirm, intro, isCancel, log, outro, select, spinner, text, } from '@clack/prompts';
 import { execa } from 'execa';
 import { render } from 'ejs';
-import { SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './utils/getPackageManager.js';
+import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './utils/getPackageManager.js';
 const program = new Command();
 const CODE_ROUTER = 'code-router';
 const FILE_ROUTER = 'file-router';
@@ -82,16 +82,16 @@ async function createPackageJSON(projectName, options, templateDir, routerDir, t
     packageJSON.devDependencies = sortObject(packageJSON.devDependencies);
     await writeFile(resolve(targetDir, 'package.json'), JSON.stringify(packageJSON, null, 2));
 }
-async function createApp(projectName, options) {
+async function createApp(options) {
     const templateDirBase = fileURLToPath(new URL('../templates/base', import.meta.url));
     const templateDirRouter = fileURLToPath(new URL(`../templates/${options.mode}`, import.meta.url));
-    const targetDir = resolve(process.cwd(), projectName);
+    const targetDir = resolve(process.cwd(), options.projectName);
     if (existsSync(targetDir)) {
-        log.error(`Directory "${projectName}" already exists`);
+        log.error(`Directory "${options.projectName}" already exists`);
         return;
     }
     const copyFiles = createCopyFile(targetDir);
-    const templateFile = createTemplateFile(projectName, options, targetDir);
+    const templateFile = createTemplateFile(options.projectName, options, targetDir);
     intro(`Creating a new TanStack app in ${targetDir}...`);
     // Make the root directory
     await mkdir(targetDir, { recursive: true });
@@ -148,7 +148,7 @@ async function createApp(projectName, options) {
         await copyFiles(templateDirBase, ['./tsconfig.json']);
     }
     // Setup the package.json file, optionally with typescript and tailwind
-    await createPackageJSON(projectName, options, templateDirBase, templateDirRouter, targetDir);
+    await createPackageJSON(options.projectName, options, templateDirBase, templateDirRouter, targetDir);
     // Add .gitignore
     await copyFile(resolve(templateDirBase, 'gitignore'), resolve(targetDir, '.gitignore'));
     // Create the README.md
@@ -158,20 +158,161 @@ async function createApp(projectName, options) {
     s.start(`Installing dependencies via ${options.packageManager}...`);
     await execa(options.packageManager, ['install'], { cwd: targetDir });
     s.stop(`Installed dependencies`);
+    if (options.git) {
+        s.start(`Initializing git repository...`);
+        await execa('git', ['init'], { cwd: targetDir });
+        s.stop(`Initialized git repository`);
+    }
     outro(`Created your new TanStack app in ${targetDir}.
 
 Use the following commands to start your app:
 
-% cd ${projectName}
+% cd ${options.projectName}
 % ${options.packageManager} start
 
 Please read README.md for more information on testing, styling, adding routes, react-query, etc.
 `);
 }
+// If all CLI options are provided, use them directly
+function normalizeOptions(cliOptions) {
+    if (cliOptions.projectName) {
+        const typescript = cliOptions.template === 'typescript' ||
+            cliOptions.template === 'file-router';
+        return {
+            projectName: cliOptions.projectName,
+            typescript,
+            tailwind: !!cliOptions.tailwind,
+            packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+            mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+            git: !!cliOptions.git,
+        };
+    }
+}
+async function promptForOptions(cliOptions) {
+    const options = {};
+    if (!cliOptions.projectName) {
+        const value = await text({
+            message: 'What would you like to name your project?',
+            defaultValue: 'my-app',
+            validate(value) {
+                if (!value) {
+                    return 'Please enter a name';
+                }
+            },
+        });
+        if (isCancel(value)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.projectName = value;
+    }
+    // Router type selection
+    if (!cliOptions.template) {
+        const routerType = await select({
+            message: 'Select the router type:',
+            options: [
+                {
+                    value: FILE_ROUTER,
+                    label: 'File Router - File-based routing structure',
+                },
+                {
+                    value: CODE_ROUTER,
+                    label: 'Code Router - Traditional code-based routing',
+                },
+            ],
+            initialValue: FILE_ROUTER,
+        });
+        if (isCancel(routerType)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.mode = routerType;
+    }
+    else {
+        options.mode = cliOptions.template;
+        if (options.mode === FILE_ROUTER) {
+            options.typescript = true;
+        }
+    }
+    // TypeScript selection (if using Code Router)
+    if (!options.typescript) {
+        if (options.mode === CODE_ROUTER) {
+            const typescriptEnable = await confirm({
+                message: 'Would you like to use TypeScript?',
+                initialValue: true,
+            });
+            if (isCancel(typescriptEnable)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.typescript = typescriptEnable;
+        }
+        else {
+            options.typescript = true;
+        }
+    }
+    // Tailwind selection
+    if (cliOptions.tailwind === undefined) {
+        const tailwind = await confirm({
+            message: 'Would you like to use Tailwind CSS?',
+            initialValue: true,
+        });
+        if (isCancel(tailwind)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.tailwind = tailwind;
+    }
+    else {
+        options.tailwind = cliOptions.tailwind;
+    }
+    // Package manager selection
+    if (cliOptions.packageManager === undefined) {
+        const detectedPackageManager = getPackageManager();
+        if (!detectedPackageManager) {
+            const pm = await select({
+                message: 'Select package manager:',
+                options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+                    value: pm,
+                    label: pm,
+                })),
+                initialValue: DEFAULT_PACKAGE_MANAGER,
+            });
+            if (isCancel(pm)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.packageManager = pm;
+        }
+        else {
+            options.packageManager = detectedPackageManager;
+        }
+    }
+    else {
+        options.packageManager = cliOptions.packageManager;
+    }
+    // Git selection
+    if (cliOptions.git === undefined) {
+        const git = await confirm({
+            message: 'Would you like to initialize a new git repository?',
+            initialValue: true,
+        });
+        if (isCancel(git)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.git = git;
+    }
+    else {
+        options.git = !!cliOptions.git;
+    }
+    return options;
+}
 program
     .name('create-tsrouter-app')
     .description('CLI to create a new TanStack application')
-    .argument('<project-name>', 'name of the project')
+    .argument('[project-name]', 'name of the project')
+    .option('--no-git', 'do not create a git repository')
     .option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
     if (value !== 'typescript' &&
         value !== 'javascript' &&
@@ -179,21 +320,29 @@ program
         throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`);
     }
     return value;
-}, 'javascript')
+})
     .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
     if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
         throw new InvalidArgumentError(`Invalid package manager: ${value}. Only the following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
     }
     return value;
-}, getPackageManager())
-    .option('--tailwind', 'add Tailwind CSS', false)
-    .action((projectName, options) => {
-    const typescript = options.template === 'typescript' || options.template === 'file-router';
-    createApp(projectName, {
-        typescript,
-        tailwind: options.tailwind,
-        packageManager: options.packageManager,
-        mode: options.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
-    });
+})
+    .option('--tailwind', 'add Tailwind CSS')
+    .action(async (projectName, options) => {
+    try {
+        const cliOptions = {
+            projectName,
+            ...options,
+        };
+        let finalOptions = normalizeOptions(cliOptions);
+        if (!finalOptions) {
+            finalOptions = await promptForOptions(cliOptions);
+        }
+        await createApp(finalOptions);
+    }
+    catch (error) {
+        log.error(error instanceof Error ? error.message : 'An unknown error occurred');
+        process.exit(1);
+    }
 });
 program.parse();

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-start-app",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
   "scripts": {
     "build": "tsc",
     "start": "tsc && node dist/index.js",
-    "test": "echo \"Error: no test specified\" && exit 0",
+    "test": "npm run test:lint",
     "cipublish": "node scripts/publish.js",
     "test:lint": "eslint ./src"
   },

package/src/index.ts

@@ -5,11 +5,22 @@ import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Command, InvalidArgumentError } from 'commander'
-import { intro, outro, spinner, log } from '@clack/prompts'
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  log,
+  outro,
+  select,
+  spinner,
+  text,
+} from '@clack/prompts'
 import { execa } from 'execa'
 import { render } from 'ejs'
 
 import {
+  DEFAULT_PACKAGE_MANAGER,
   SUPPORTED_PACKAGE_MANAGERS,
   getPackageManager,
 } from './utils/getPackageManager.js'
@@ -22,10 +33,20 @@ const CODE_ROUTER = 'code-router'
 const FILE_ROUTER = 'file-router'
 
 interface Options {
+  projectName: string
   typescript: boolean
   tailwind: boolean
   packageManager: PackageManager
   mode: typeof CODE_ROUTER | typeof FILE_ROUTER
+  git: boolean
+}
+
+interface CliOptions {
+  template?: 'typescript' | 'javascript' | 'file-router'
+  tailwind?: boolean
+  packageManager?: PackageManager
+  projectName?: string
+  git?: boolean
 }
 
 function sortObject(obj: Record<string, string>): Record<string, string> {
@@ -136,22 +157,26 @@ async function createPackageJSON(
   )
 }
 
-async function createApp(projectName: string, options: Required<Options>) {
+async function createApp(options: Required<Options>) {
   const templateDirBase = fileURLToPath(
     new URL('../templates/base', import.meta.url),
   )
   const templateDirRouter = fileURLToPath(
     new URL(`../templates/${options.mode}`, import.meta.url),
   )
-  const targetDir = resolve(process.cwd(), projectName)
+  const targetDir = resolve(process.cwd(), options.projectName)
 
   if (existsSync(targetDir)) {
-    log.error(`Directory "${projectName}" already exists`)
+    log.error(`Directory "${options.projectName}" already exists`)
     return
   }
 
   const copyFiles = createCopyFile(targetDir)
-  const templateFile = createTemplateFile(projectName, options, targetDir)
+  const templateFile = createTemplateFile(
+    options.projectName,
+    options,
+    targetDir,
+  )
 
   intro(`Creating a new TanStack app in ${targetDir}...`)
 
@@ -241,7 +266,7 @@ async function createApp(projectName: string, options: Required<Options>) {
 
   // Setup the package.json file, optionally with typescript and tailwind
   await createPackageJSON(
-    projectName,
+    options.projectName,
     options,
     templateDirBase,
     templateDirRouter,
@@ -263,21 +288,174 @@ async function createApp(projectName: string, options: Required<Options>) {
   await execa(options.packageManager, ['install'], { cwd: targetDir })
   s.stop(`Installed dependencies`)
 
+  if (options.git) {
+    s.start(`Initializing git repository...`)
+    await execa('git', ['init'], { cwd: targetDir })
+    s.stop(`Initialized git repository`)
+  }
+
   outro(`Created your new TanStack app in ${targetDir}.
 
 Use the following commands to start your app:
 
-% cd ${projectName}
+% cd ${options.projectName}
 % ${options.packageManager} start
 
 Please read README.md for more information on testing, styling, adding routes, react-query, etc.
 `)
 }
 
+// If all CLI options are provided, use them directly
+function normalizeOptions(
+  cliOptions: CliOptions,
+): Required<Options> | undefined {
+  if (cliOptions.projectName) {
+    const typescript =
+      cliOptions.template === 'typescript' ||
+      cliOptions.template === 'file-router'
+
+    return {
+      projectName: cliOptions.projectName,
+      typescript,
+      tailwind: !!cliOptions.tailwind,
+      packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+      mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+      git: !!cliOptions.git,
+    }
+  }
+}
+
+async function promptForOptions(
+  cliOptions: CliOptions,
+): Promise<Required<Options>> {
+  const options = {} as Required<Options>
+
+  if (!cliOptions.projectName) {
+    const value = await text({
+      message: 'What would you like to name your project?',
+      defaultValue: 'my-app',
+      validate(value) {
+        if (!value) {
+          return 'Please enter a name'
+        }
+      },
+    })
+    if (isCancel(value)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.projectName = value
+  }
+
+  // Router type selection
+  if (!cliOptions.template) {
+    const routerType = await select({
+      message: 'Select the router type:',
+      options: [
+        {
+          value: FILE_ROUTER,
+          label: 'File Router - File-based routing structure',
+        },
+        {
+          value: CODE_ROUTER,
+          label: 'Code Router - Traditional code-based routing',
+        },
+      ],
+      initialValue: FILE_ROUTER,
+    })
+    if (isCancel(routerType)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.mode = routerType as typeof CODE_ROUTER | typeof FILE_ROUTER
+  } else {
+    options.mode = cliOptions.template as
+      | typeof CODE_ROUTER
+      | typeof FILE_ROUTER
+    if (options.mode === FILE_ROUTER) {
+      options.typescript = true
+    }
+  }
+
+  // TypeScript selection (if using Code Router)
+  if (!options.typescript) {
+    if (options.mode === CODE_ROUTER) {
+      const typescriptEnable = await confirm({
+        message: 'Would you like to use TypeScript?',
+        initialValue: true,
+      })
+      if (isCancel(typescriptEnable)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      options.typescript = typescriptEnable
+    } else {
+      options.typescript = true
+    }
+  }
+
+  // Tailwind selection
+  if (cliOptions.tailwind === undefined) {
+    const tailwind = await confirm({
+      message: 'Would you like to use Tailwind CSS?',
+      initialValue: true,
+    })
+    if (isCancel(tailwind)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.tailwind = tailwind
+  } else {
+    options.tailwind = cliOptions.tailwind
+  }
+
+  // Package manager selection
+  if (cliOptions.packageManager === undefined) {
+    const detectedPackageManager = getPackageManager()
+    if (!detectedPackageManager) {
+      const pm = await select({
+        message: 'Select package manager:',
+        options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+          value: pm,
+          label: pm,
+        })),
+        initialValue: DEFAULT_PACKAGE_MANAGER,
+      })
+      if (isCancel(pm)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      options.packageManager = pm
+    } else {
+      options.packageManager = detectedPackageManager
+    }
+  } else {
+    options.packageManager = cliOptions.packageManager
+  }
+
+  // Git selection
+  if (cliOptions.git === undefined) {
+    const git = await confirm({
+      message: 'Would you like to initialize a new git repository?',
+      initialValue: true,
+    })
+    if (isCancel(git)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.git = git
+  } else {
+    options.git = !!cliOptions.git
+  }
+
+  return options
+}
+
 program
   .name('create-tsrouter-app')
   .description('CLI to create a new TanStack application')
-  .argument('<project-name>', 'name of the project')
+  .argument('[project-name]', 'name of the project')
+  .option('--no-git', 'do not create a git repository')
   .option<'typescript' | 'javascript' | 'file-router'>(
     '--template <type>',
     'project template (typescript, javascript, file-router)',
@@ -293,7 +471,6 @@ program
       }
       return value
     },
-    'javascript',
   )
   .option<PackageManager>(
     `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
@@ -308,28 +485,25 @@ program
       }
       return value as PackageManager
     },
-    getPackageManager(),
-  )
-  .option('--tailwind', 'add Tailwind CSS', false)
-  .action(
-    (
-      projectName: string,
-      options: {
-        template: 'typescript' | 'javascript' | 'file-router'
-        tailwind: boolean
-        packageManager: PackageManager
-      },
-    ) => {
-      const typescript =
-        options.template === 'typescript' || options.template === 'file-router'
-
-      createApp(projectName, {
-        typescript,
-        tailwind: options.tailwind,
-        packageManager: options.packageManager,
-        mode: options.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
-      })
-    },
   )
+  .option('--tailwind', 'add Tailwind CSS')
+  .action(async (projectName: string, options: CliOptions) => {
+    try {
+      const cliOptions = {
+        projectName,
+        ...options,
+      } as CliOptions
+      let finalOptions = normalizeOptions(cliOptions)
+      if (!finalOptions) {
+        finalOptions = await promptForOptions(cliOptions)
+      }
+      await createApp(finalOptions)
+    } catch (error) {
+      log.error(
+        error instanceof Error ? error.message : 'An unknown error occurred',
+      )
+      process.exit(1)
+    }
+  })
 
 program.parse()

package/templates/base/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

package/templates/base/src/logo.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 841.9 595.3">
+<svg id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 841.9 595.3">
   <!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146)  -->
   <defs>
     <style>
@@ -13,7 +14,7 @@
     </style>
   </defs>
   <g>
-    <path class="st1" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4,14.4-63.6,8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6,0,8.3.9,11.4,2.6,13.6,7.8,19.5,37.5,14.9,75.7-1.1,9.4-2.9,19.3-5.1,29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50,32.6-30.3,63.2-46.9,84-46.9v-22.3c-27.5,0-63.5,19.6-99.9,53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6-14,14.7-28,31.4-41.3,49.9-22.6,2.4-44,6.1-63.6,11-2.3-10-4-19.7-5.2-29-4.7-38.2,1.1-67.9,14.6-75.8,3-1.8,6.9-2.6,11.5-2.6v-22.3c-8.4,0-16,1.8-22.6,5.6-28.1,16.2-34.4,66.7-19.9,130.1-62.2,19.2-102.7,49.9-102.7,82.3s40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4,6.5,3.8,14.1,5.6,22.5,5.6,27.5,0,63.5-19.6,99.9-53.6,36.4,33.8,72.4,53.2,99.9,53.2s16-1.8,22.6-5.6c28.1-16.2,34.4-66.7,19.9-130.1,62-19.1,102.5-49.9,102.5-82.3h0ZM536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4,14.2,2.1,27.9,4.7,41,7.9h0ZM490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2-14.9,1.3-30,2-45.2,2s-30.2-.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8,6.2-13.4,13.2-26.8,20.7-39.9,7.8-13.5,15.8-26.3,24.1-38.2,14.9-1.3,30-2,45.2-2s30.2.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38,7.6,13.1,14.5,26.4,20.8,39.8-6.3,13.4-13.2,26.8-20.7,39.9h0ZM522.6,323.3c5.4,13.4,10,26.8,13.8,39.8-13.1,3.2-26.9,5.9-41.2,8,4.9-7.7,9.8-15.6,14.4-23.7,4.6-8,8.9-16.1,13-24.1h0ZM421.2,430c-9.3-9.6-18.6-20.3-27.8-32,9,.4,18.2.7,27.5.7s18.7-.2,27.8-.7c-9,11.7-18.3,22.4-27.5,32ZM346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9,3.7-12.9,8.3-26.2,13.5-39.5,4.1,8,8.4,16,13.1,24s9.5,15.8,14.4,23.4ZM420.7,163c9.3,9.6,18.6,20.3,27.8,32-9-.4-18.2-.7-27.5-.7s-18.7.2-27.8.7c9-11.7,18.3-22.4,27.5-32ZM346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7-4.6,8-8.9,16-13,24-5.4-13.4-10-26.8-13.8-39.8,13.1-3.1,26.9-5.8,41.2-7.9h0ZM256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1,5.7,19.6,13.2,40,22.5,60.9-9.2,20.8-16.6,41.1-22.2,60.6-9.9-3.1-19.3-6.5-28-10.2h0ZM310,490c-13.6-7.8-19.5-37.5-14.9-75.7,1.1-9.4,2.9-19.3,5.1-29.4,19.6,4.8,41,8.5,63.5,10.9,13.5,18.5,27.5,35.3,41.6,50-32.6,30.3-63.2,46.9-84,46.9-4.5-.1-8.3-1-11.3-2.7h0ZM547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8-3,1.8-6.9,2.6-11.5,2.6-20.7,0-51.4-16.5-84-46.6,14-14.7,28-31.4,41.3-49.9,22.6-2.4,44-6.1,63.6-11,2.3,10.1,4.1,19.8,5.2,29.1ZM585.7,347.1c-8.6,3.7-18,7-27.7,10.1-5.7-19.6-13.2-40-22.5-60.9,9.2-20.8,16.6-41.1,22.2-60.6,9.9,3.1,19.3,6.5,28.1,10.2,35.4,15.1,58.3,34.9,58.3,50.6,0,15.7-23,35.6-58.4,50.6h0Z"/>
+    <path class="st1" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4,14.4-63.6,8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6,0,8.3.9,11.4,2.6,13.6,7.8,19.5,37.5,14.9,75.7-1.1,9.4-2.9,19.3-5.1,29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50,32.6-30.3,63.2-46.9,84-46.9v-22.3c-27.5,0-63.5,19.6-99.9,53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6-14,14.7-28,31.4-41.3,49.9-22.6,2.4-44,6.1-63.6,11-2.3-10-4-19.7-5.2-29-4.7-38.2,1.1-67.9,14.6-75.8,3-1.8,6.9-2.6,11.5-2.6v-22.3c-8.4,0-16,1.8-22.6,5.6-28.1,16.2-34.4,66.7-19.9,130.1-62.2,19.2-102.7,49.9-102.7,82.3s40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4,6.5,3.8,14.1,5.6,22.5,5.6,27.5,0,63.5-19.6,99.9-53.6,36.4,33.8,72.4,53.2,99.9,53.2,8.4,0,16-1.8,22.6-5.6,28.1-16.2,34.4-66.7,19.9-130.1,62-19.1,102.5-49.9,102.5-82.3zm-130.2-66.7c-3.7,12.9-8.3,26.2-13.5,39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4,14.2,2.1,27.9,4.7,41,7.9zm-45.8,106.5c-7.8,13.5-15.8,26.3-24.1,38.2-14.9,1.3-30,2-45.2,2s-30.2-.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8,6.2-13.4,13.2-26.8,20.7-39.9,7.8-13.5,15.8-26.3,24.1-38.2,14.9-1.3,30-2,45.2-2s30.2.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38,7.6,13.1,14.5,26.4,20.8,39.8-6.3,13.4-13.2,26.8-20.7,39.9zm32.3-13c5.4,13.4,10,26.8,13.8,39.8-13.1,3.2-26.9,5.9-41.2,8,4.9-7.7,9.8-15.6,14.4-23.7,4.6-8,8.9-16.1,13-24.1zm-101.4,106.7c-9.3-9.6-18.6-20.3-27.8-32,9,.4,18.2.7,27.5.7s18.7-.2,27.8-.7c-9,11.7-18.3,22.4-27.5,32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9,3.7-12.9,8.3-26.2,13.5-39.5,4.1,8,8.4,16,13.1,24s9.5,15.8,14.4,23.4zm73.9-208.1c9.3,9.6,18.6,20.3,27.8,32-9-.4-18.2-.7-27.5-.7s-18.7.2-27.8.7c9-11.7,18.3-22.4,27.5-32zm-74,58.9c-4.9,7.7-9.8,15.6-14.4,23.7-4.6,8-8.9,16-13,24-5.4-13.4-10-26.8-13.8-39.8,13.1-3.1,26.9-5.8,41.2-7.9zm-90.5,125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1,5.7,19.6,13.2,40,22.5,60.9-9.2,20.8-16.6,41.1-22.2,60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8,142.9c-13.6-7.8-19.5-37.5-14.9-75.7,1.1-9.4,2.9-19.3,5.1-29.4,19.6,4.8,41,8.5,63.5,10.9,13.5,18.5,27.5,35.3,41.6,50-32.6,30.3-63.2,46.9-84,46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7,38.2-1.1,67.9-14.6,75.8-3,1.8-6.9,2.6-11.5,2.6-20.7,0-51.4-16.5-84-46.6,14-14.7,28-31.4,41.3-49.9,22.6-2.4,44-6.1,63.6-11,2.3,10.1,4.1,19.8,5.2,29.1zm38.5-66.7c-8.6,3.7-18,7-27.7,10.1-5.7-19.6-13.2-40-22.5-60.9,9.2-20.8,16.6-41.1,22.2-60.6,9.9,3.1,19.3,6.5,28.1,10.2,35.4,15.1,58.3,34.9,58.3,50.6,0,15.7-23,35.6-58.4,50.6zm-264.9-268.7z"/>
     <circle class="st1" cx="420.9" cy="296.5" r="45.7"/>
     <path class="st1" d="M520.5,78.1"/>
   </g>