@tanstack/cli 0.59.8 → 0.60.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @tanstack/cli
 
+## 0.60.0
+
+### Minor Changes
+
+- This release pulls together a large batch of improvements across the CLI and scaffolding engine since the last versioning pass. ([`154b25e`](https://github.com/TanStack/cli/commit/154b25eec9a13b9718c44cbed6cb3c8566f2fb11))
+
+  - Modernizes and refreshes the generated React/Solid template experience, including updated starter content and stronger defaults.
+  - Improves create flows with better option normalization, stronger guardrails around target directories, and clearer compatibility behavior in router-only mode.
+  - Expands scaffolding ergonomics with examples toggles, improved add-on/config handling, and reliability fixes across package-manager and cross-platform paths.
+  - Strengthens test and release confidence via e2e/release workflow hardening and broader smoke coverage.
+  - Streamlines product surface area by removing the local `create-ui` package and `--ui` command paths from the CLI; visual setup now lives at `https://tanstack.com/builder`.
+  - Cleans up docs and custom CLI examples to match the current terminal-first workflow and Builder guidance.
+
+### Patch Changes
+
+- Updated dependencies [[`154b25e`](https://github.com/TanStack/cli/commit/154b25eec9a13b9718c44cbed6cb3c8566f2fb11)]:
+  - @tanstack/create@0.62.0
+
 ## 0.59.8
 
 ### Patch Changes

package/dist/bin.js

@@ -1,6 +1,11 @@
 #!/usr/bin/env node
 import { cli } from './cli.js';
+import { createReactFrameworkDefinition, createSolidFrameworkDefinition, } from '@tanstack/create';
 cli({
     name: 'tanstack',
     appName: 'TanStack',
+    frameworkDefinitionInitializers: [
+        createReactFrameworkDefinition,
+        createSolidFrameworkDefinition,
+    ],
 });

package/dist/cli.js

@@ -4,8 +4,7 @@ import { Command, InvalidArgumentError } from 'commander';
 import { cancel, confirm, intro, isCancel, log } from '@clack/prompts';
 import chalk from 'chalk';
 import semver from 'semver';
-import { SUPPORTED_PACKAGE_MANAGERS, addToApp, compileAddOn, devAddOn, compileStarter, createApp, createSerializedOptions, getAllAddOns, getFrameworkByName, getFrameworks, initAddOn, initStarter, } from '@tanstack/create';
-import { launchUI } from '@tanstack/create-ui';
+import { SUPPORTED_PACKAGE_MANAGERS, addToApp, compileAddOn, compileStarter, createApp, devAddOn, getAllAddOns, getFrameworkByName, getFrameworks, initAddOn, initStarter, } from '@tanstack/create';
 import { runMCPServer } from './mcp.js';
 import { promptForAddOns, promptForCreateOptions } from './options.js';
 import { normalizeOptions, validateDevWatchOptions, validateLegacyCreateFlags, } from './command-line.js';
@@ -15,7 +14,7 @@ import { DevWatchManager } from './dev-watch.js';
 const packageJsonPath = new URL('../package.json', import.meta.url);
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 const VERSION = packageJson.version;
-export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaultFramework, webBase, frameworkDefinitionInitializers, showDeploymentOptions = false, legacyAutoCreate = false, defaultRouterOnly = false, }) {
+export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaultFramework, frameworkDefinitionInitializers, showDeploymentOptions = false, legacyAutoCreate = false, defaultRouterOnly = false, }) {
     const environment = createUIEnvironment(appName, false);
     const program = new Command();
     async function confirmTargetDirectorySafety(targetDir, forced) {
@@ -41,6 +40,73 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
         }
     }
     const availableFrameworks = getFrameworks().map((f) => f.name);
+    function resolveBuiltInDevWatchPath(frameworkId) {
+        const candidates = [
+            resolve(process.cwd(), 'packages/create/src/frameworks', frameworkId),
+            resolve(process.cwd(), '../create/src/frameworks', frameworkId),
+        ];
+        for (const candidate of candidates) {
+            if (fs.existsSync(candidate)) {
+                return candidate;
+            }
+        }
+        return candidates[0];
+    }
+    async function startDevWatchMode(projectName, options) {
+        // Validate dev watch options
+        const validation = validateDevWatchOptions({ ...options, projectName });
+        if (!validation.valid) {
+            console.error(validation.error);
+            process.exit(1);
+        }
+        // Enter dev watch mode
+        if (!projectName && !options.targetDir) {
+            console.error('Project name/target directory is required for dev watch mode');
+            process.exit(1);
+        }
+        if (!options.framework) {
+            console.error('Failed to detect framework');
+            process.exit(1);
+        }
+        const framework = getFrameworkByName(options.framework);
+        if (!framework) {
+            console.error('Failed to detect framework');
+            process.exit(1);
+        }
+        // First, create the app normally using the standard flow
+        const normalizedOpts = await normalizeOptions({
+            ...options,
+            projectName,
+            framework: framework.id,
+        }, forcedAddOns);
+        if (!normalizedOpts) {
+            throw new Error('Failed to normalize options');
+        }
+        normalizedOpts.targetDir =
+            options.targetDir || resolve(process.cwd(), projectName);
+        // Create the initial app with minimal output for dev watch mode
+        console.log(chalk.bold('\ndev-watch'));
+        console.log(chalk.gray('├─') + ' ' + `creating initial ${appName} app...`);
+        if (normalizedOpts.install !== false) {
+            console.log(chalk.gray('├─') + ' ' + chalk.yellow('⟳') + ' installing packages...');
+        }
+        const silentEnvironment = createUIEnvironment(appName, true);
+        await confirmTargetDirectorySafety(normalizedOpts.targetDir, options.force);
+        await createApp(silentEnvironment, normalizedOpts);
+        console.log(chalk.gray('└─') + ' ' + chalk.green('✓') + ` app created`);
+        // Now start the dev watch mode
+        const manager = new DevWatchManager({
+            watchPath: options.devWatch,
+            targetDir: normalizedOpts.targetDir,
+            framework,
+            cliOptions: normalizedOpts,
+            packageManager: normalizedOpts.packageManager,
+            runDevCommand: options.runDev,
+            environment,
+            frameworkDefinitionInitializers,
+        });
+        await manager.start();
+    }
     const toolchains = new Set();
     for (const framework of getFrameworks()) {
         for (const addOn of framework.getAddOns()) {
@@ -142,58 +208,7 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             return;
         }
         if (options.devWatch) {
-            // Validate dev watch options
-            const validation = validateDevWatchOptions({ ...options, projectName });
-            if (!validation.valid) {
-                console.error(validation.error);
-                process.exit(1);
-            }
-            // Enter dev watch mode
-            if (!projectName && !options.targetDir) {
-                console.error('Project name/target directory is required for dev watch mode');
-                process.exit(1);
-            }
-            if (!options.framework) {
-                console.error('Failed to detect framework');
-                process.exit(1);
-            }
-            const framework = getFrameworkByName(options.framework);
-            if (!framework) {
-                console.error('Failed to detect framework');
-                process.exit(1);
-            }
-            // First, create the app normally using the standard flow
-            const normalizedOpts = await normalizeOptions({
-                ...options,
-                projectName,
-                framework: framework.id,
-            }, forcedAddOns);
-            if (!normalizedOpts) {
-                throw new Error('Failed to normalize options');
-            }
-            normalizedOpts.targetDir =
-                options.targetDir || resolve(process.cwd(), projectName);
-            // Create the initial app with minimal output for dev watch mode
-            console.log(chalk.bold('\ndev-watch'));
-            console.log(chalk.gray('├─') + ' ' + `creating initial ${appName} app...`);
-            if (normalizedOpts.install !== false) {
-                console.log(chalk.gray('├─') + ' ' + chalk.yellow('⟳') + ' installing packages...');
-            }
-            const silentEnvironment = createUIEnvironment(appName, true);
-            await confirmTargetDirectorySafety(normalizedOpts.targetDir, options.force);
-            await createApp(silentEnvironment, normalizedOpts);
-            console.log(chalk.gray('└─') + ' ' + chalk.green('✓') + ` app created`);
-            // Now start the dev watch mode
-            const manager = new DevWatchManager({
-                watchPath: options.devWatch,
-                targetDir: normalizedOpts.targetDir,
-                framework,
-                cliOptions: normalizedOpts,
-                packageManager: normalizedOpts.packageManager,
-                environment,
-                frameworkDefinitionInitializers,
-            });
-            await manager.start();
+            await startDevWatchMode(projectName, options);
             return;
         }
         try {
@@ -206,6 +221,7 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             }
             if (cliOptions.routerOnly !== true &&
                 cliOptions.template &&
+                ['file-router', 'typescript', 'tsx', 'javascript', 'js', 'jsx'].includes(cliOptions.template.toLowerCase()) &&
                 cliOptions.template.toLowerCase() !== 'file-router') {
                 cliOptions.routerOnly = true;
             }
@@ -217,24 +233,6 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             else {
                 finalOptions = await normalizeOptions(cliOptions, forcedAddOns, { forcedDeployment });
             }
-            if (options.ui) {
-                const optionsFromCLI = await normalizeOptions(cliOptions, forcedAddOns, { disableNameCheck: true, forcedDeployment });
-                const uiOptions = {
-                    ...createSerializedOptions(optionsFromCLI),
-                    projectName: 'my-app',
-                    targetDir: resolve(process.cwd(), 'my-app'),
-                };
-                launchUI({
-                    mode: 'setup',
-                    options: uiOptions,
-                    forcedRouterMode: defaultMode,
-                    forcedAddOns,
-                    environmentFactory: () => createUIEnvironment(appName, false),
-                    webBase,
-                    showDeploymentOptions,
-                });
-                return;
-            }
             if (finalOptions) {
                 intro(`Creating a new ${appName} app in ${projectName}...`);
             }
@@ -281,6 +279,9 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
         cmd.argument('[project-name]', 'name of the project');
         if (!defaultFramework) {
             cmd.option('--framework <type>', `project framework (${availableFrameworks.join(', ')})`, (value) => {
+                if (value.toLowerCase() === 'react-cra') {
+                    return 'react';
+                }
                 if (!availableFrameworks.some((f) => f.toLowerCase() === value.toLowerCase())) {
                     throw new InvalidArgumentError(`Invalid framework: ${value}. Only the following are allowed: ${availableFrameworks.join(', ')}`);
                 }
@@ -288,7 +289,9 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             }, defaultFramework || 'React');
         }
         cmd
-            .option('--starter [url]', 'initialize this project from a starter URL', false)
+            .option('--starter [url-or-id]', 'DEPRECATED: use --template. Initializes from a template URL or built-in id', false)
+            .option('--template-id <id>', 'initialize using a built-in template id')
+            .option('--template [url-or-id]', 'initialize this project from a template URL or built-in template id')
             .option('--no-install', 'skip installing dependencies')
             .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
             if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
@@ -297,8 +300,8 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             return value;
         })
             .option('--dev-watch <path>', 'Watch a framework directory for changes and auto-rebuild')
+            .option('--run-dev', 'Run the app dev server alongside dev-watch', false)
             .option('--router-only', 'Use router-only compatibility mode (file-based routing without TanStack Start)')
-            .option('--template <type>', 'Deprecated: compatibility flag from create-tsrouter-app')
             .option('--tailwind', 'Deprecated: compatibility flag; Tailwind is always enabled')
             .option('--no-tailwind', 'Deprecated: compatibility flag; Tailwind opt-out is ignored')
             .option('--examples', 'include demo/example pages')
@@ -335,7 +338,6 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
             .option('--git', 'create a git repository')
             .option('--no-git', 'do not create a git repository')
             .option('--target-dir <path>', 'the target directory for the application root')
-            .option('--ui', 'Launch the UI for project creation')
             .option('--add-on-config <config>', 'JSON string with add-on configuration options')
             .option('-f, --force', 'force project creation even if the target directory is not empty', false);
         return cmd;
@@ -347,6 +349,28 @@ export function cli({ name, appName, forcedAddOns = [], forcedDeployment, defaul
         .description(`Create a new TanStack Start application`);
     configureCreateCommand(createCommand);
     createCommand.action(handleCreate);
+    // === DEV SUBCOMMAND ===
+    const devCommand = program
+        .command('dev')
+        .description('Create a sandbox app and watch built-in framework templates/add-ons');
+    configureCreateCommand(devCommand);
+    devCommand.action(async (projectName, options) => {
+        const frameworkName = options.framework || defaultFramework || 'React';
+        const framework = getFrameworkByName(frameworkName);
+        if (!framework) {
+            console.error(`Unknown framework: ${frameworkName}`);
+            process.exit(1);
+        }
+        const watchPath = resolveBuiltInDevWatchPath(framework.id);
+        const devOptions = {
+            ...options,
+            framework: framework.name,
+            devWatch: watchPath,
+            runDev: true,
+            install: options.install ?? true,
+        };
+        await startDevWatchMode(projectName, devOptions);
+    });
     // === MCP SUBCOMMAND ===
     program
         .command('mcp')
@@ -424,7 +448,6 @@ Remove your node_modules directory and package lock file and re-install.`);
         .command('add')
         .argument('[add-on...]', 'Name of the add-ons (or add-ons separated by spaces or commas)')
         .option('--forced', 'Force the add-on to be added', false)
-        .option('--ui', 'Add with the UI')
         .action(async (addOns, options) => {
         const parsedAddOns = [];
         for (const addOn of addOns) {
@@ -435,19 +458,7 @@ Remove your node_modules directory and package lock file and re-install.`);
                 parsedAddOns.push(addOn.trim());
             }
         }
-        if (options.ui) {
-            launchUI({
-                mode: 'add',
-                addOns: parsedAddOns,
-                projectPath: resolve(process.cwd()),
-                forcedRouterMode: defaultMode,
-                forcedAddOns,
-                environmentFactory: () => createUIEnvironment(appName, false),
-                webBase,
-                showDeploymentOptions,
-            });
-        }
-        else if (parsedAddOns.length < 1) {
+        if (parsedAddOns.length < 1) {
             const selectedAddOns = await promptForAddOns();
             if (selectedAddOns.length) {
                 await addToApp(environment, selectedAddOns, resolve(process.cwd()), {
@@ -481,17 +492,31 @@ Remove your node_modules directory and package lock file and re-install.`);
         .action(async () => {
         await devAddOn(environment);
     });
-    // === STARTER SUBCOMMAND ===
+    // === TEMPLATE SUBCOMMAND ===
+    const templateCommand = program.command('template');
+    templateCommand
+        .command('init')
+        .description('Initialize a project template from the current project')
+        .action(async () => {
+        await initStarter(environment);
+    });
+    templateCommand
+        .command('compile')
+        .description('Compile the template JSON file for the current project')
+        .action(async () => {
+        await compileStarter(environment);
+    });
+    // Legacy alias for template command
     const starterCommand = program.command('starter');
     starterCommand
         .command('init')
-        .description('Initialize a project starter from the current project')
+        .description('Deprecated alias: initialize a project template')
         .action(async () => {
         await initStarter(environment);
     });
     starterCommand
         .command('compile')
-        .description('Compile the starter JSON file for the current project')
+        .description('Deprecated alias: compile the template JSON file')
         .action(async () => {
         await compileStarter(environment);
     });

package/dist/command-line.js

@@ -1,16 +1,136 @@
 import { resolve } from 'node:path';
 import fs from 'node:fs';
-import { DEFAULT_PACKAGE_MANAGER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, populateAddOnOptionsDefaults, } from '@tanstack/create';
+import { DEFAULT_PACKAGE_MANAGER, finalizeAddOns, getFrameworkById, getPackageManager, getRawRegistry, loadStarter, populateAddOnOptionsDefaults, } from '@tanstack/create';
 import { getCurrentDirectoryName, sanitizePackageName, validateProjectName, } from './utils.js';
 const SUPPORTED_LEGACY_TEMPLATES = new Set([
     'file-router',
     'typescript',
     'tsx',
 ]);
+const LEGACY_TEMPLATE_ALIASES = new Set(['javascript', 'js', 'jsx']);
+function getLegacyTemplateValue(templateValue) {
+    if (!templateValue) {
+        return undefined;
+    }
+    const normalized = templateValue.toLowerCase().trim();
+    if (SUPPORTED_LEGACY_TEMPLATES.has(normalized) ||
+        LEGACY_TEMPLATE_ALIASES.has(normalized)) {
+        return normalized;
+    }
+    return undefined;
+}
+function slugifyStarterName(value) {
+    return value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function isLikelyStarterUrlOrPath(value) {
+    return (/^https?:\/\//i.test(value) ||
+        /^file:\/\//i.test(value) ||
+        value.startsWith('./') ||
+        value.startsWith('../') ||
+        value.startsWith('/') ||
+        /^[a-zA-Z]:[\\/]/.test(value));
+}
+function getStarterIdsFromUrl(starterUrl) {
+    const ids = new Set();
+    try {
+        const pathname = new URL(starterUrl).pathname;
+        const parts = pathname.split('/').filter(Boolean);
+        const lastPart = parts.at(-1)?.toLowerCase();
+        if (lastPart) {
+            ids.add(lastPart.replace(/\.json$/i, ''));
+        }
+        if ((lastPart === 'starter.json' || lastPart === 'template.json') &&
+            parts.length >= 2) {
+            ids.add(parts.at(-2).toLowerCase());
+        }
+    }
+    catch {
+        // Ignore URL parse errors and rely on other id heuristics.
+    }
+    return ids;
+}
+function resolveMonorepoStarterById(starterId) {
+    const normalized = starterId.toLowerCase().trim();
+    const idVariants = Array.from(new Set([
+        normalized,
+        normalized.replace(/-template$/i, ''),
+        normalized.replace(/-starter$/i, ''),
+    ])).filter(Boolean);
+    const cwd = process.cwd();
+    const rootCandidates = [
+        cwd,
+        resolve(cwd, '..'),
+        resolve(cwd, '../..'),
+        resolve(cwd, '../../..'),
+    ];
+    for (const root of rootCandidates) {
+        for (const framework of ['react', 'solid']) {
+            for (const id of idVariants) {
+                const templatePath = resolve(root, 'examples', framework, id, 'template.json');
+                if (fs.existsSync(templatePath)) {
+                    return templatePath;
+                }
+                const starterPath = resolve(root, 'examples', framework, id, 'starter.json');
+                if (fs.existsSync(starterPath)) {
+                    return starterPath;
+                }
+            }
+        }
+    }
+    return undefined;
+}
+async function resolveStarterSpecifier(starterSpecifier) {
+    const normalized = starterSpecifier.trim();
+    if (!normalized || isLikelyStarterUrlOrPath(normalized)) {
+        return normalized;
+    }
+    const registry = await getRawRegistry();
+    if (registry && registry.starters?.length) {
+        const lookup = normalized.toLowerCase();
+        const match = registry.starters.find((starter) => {
+            const candidateIds = new Set();
+            candidateIds.add(starter.name.toLowerCase());
+            candidateIds.add(slugifyStarterName(starter.name));
+            for (const id of getStarterIdsFromUrl(starter.url)) {
+                candidateIds.add(id);
+            }
+            return candidateIds.has(lookup);
+        });
+        if (match) {
+            return match.url;
+        }
+    }
+    const monorepoStarterPath = resolveMonorepoStarterById(normalized);
+    if (monorepoStarterPath) {
+        return monorepoStarterPath;
+    }
+    if (!registry || !registry.starters?.length) {
+        throw new Error(`Could not resolve template id "${normalized}" because no template registry is configured. Pass a template URL (or set CTA_REGISTRY).`);
+    }
+    const availableIds = Array.from(new Set(registry.starters.flatMap((starter) => {
+        const ids = [slugifyStarterName(starter.name)];
+        ids.push(...Array.from(getStarterIdsFromUrl(starter.url)));
+        return ids;
+    })))
+        .filter(Boolean)
+        .sort();
+    throw new Error(`Unknown template id "${normalized}". Available built-in templates: ${availableIds.join(', ')}`);
+}
 export function validateLegacyCreateFlags(cliOptions) {
     const warnings = [];
+    const legacyTemplate = getLegacyTemplateValue(cliOptions.template);
+    if (cliOptions.starter) {
+        warnings.push('The --starter flag is deprecated; prefer --template instead. Backward compatibility remains for now.');
+    }
+    if (cliOptions.starter && cliOptions.template && !legacyTemplate) {
+        warnings.push('Both --starter and --template were provided. --template takes precedence.');
+    }
     if (cliOptions.routerOnly) {
-        warnings.push('The --router-only flag enables router-only compatibility mode. Start-dependent add-ons, deployment adapters, and starters are disabled; only the base template and optional toolchain are supported.');
+        warnings.push('The --router-only flag enables router-only compatibility mode. Start-dependent add-ons, deployment adapters, and templates are disabled; only the base template and optional toolchain are supported.');
     }
     if (cliOptions.routerOnly && cliOptions.addOns) {
         warnings.push('Ignoring --add-ons in router-only compatibility mode.');
@@ -19,7 +139,10 @@ export function validateLegacyCreateFlags(cliOptions) {
         warnings.push('Ignoring --deployment in router-only compatibility mode.');
     }
     if (cliOptions.routerOnly && cliOptions.starter) {
-        warnings.push('Ignoring --starter in router-only compatibility mode.');
+        warnings.push('Ignoring --starter/--template in router-only compatibility mode.');
+    }
+    if (cliOptions.routerOnly && cliOptions.templateId) {
+        warnings.push('Ignoring --template-id in router-only compatibility mode.');
     }
     if (cliOptions.tailwind === true) {
         warnings.push('The --tailwind flag is deprecated and ignored. Tailwind is always enabled in TanStack Start scaffolds.');
@@ -27,10 +150,10 @@ export function validateLegacyCreateFlags(cliOptions) {
     if (cliOptions.tailwind === false) {
         warnings.push('The --no-tailwind flag is deprecated and ignored. Tailwind opt-out is intentionally unsupported to keep add-on permutations maintainable; remove Tailwind after scaffolding if needed.');
     }
-    if (!cliOptions.template) {
+    if (!legacyTemplate) {
         return { warnings };
     }
-    const template = cliOptions.template.toLowerCase().trim();
+    const template = legacyTemplate;
     if (template === 'javascript' || template === 'js' || template === 'jsx') {
         return {
             warnings,
@@ -70,12 +193,24 @@ export async function normalizeOptions(cliOptions, forcedAddOns, opts) {
     // Mode is always file-router (TanStack Start)
     let mode = 'file-router';
     let routerOnly = !!cliOptions.routerOnly;
-    const template = cliOptions.template?.toLowerCase().trim();
+    const legacyTemplate = getLegacyTemplateValue(cliOptions.template);
+    if (!cliOptions.starter) {
+        if (cliOptions.template && !legacyTemplate) {
+            cliOptions.starter = cliOptions.template;
+        }
+        else if (cliOptions.templateId) {
+            cliOptions.starter = cliOptions.templateId;
+        }
+    }
+    const template = legacyTemplate;
     if (template && template !== 'file-router') {
         routerOnly = true;
     }
+    if (!cliOptions.starter && cliOptions.templateId) {
+        cliOptions.starter = cliOptions.templateId;
+    }
     const starter = !routerOnly && cliOptions.starter
-        ? await loadStarter(cliOptions.starter)
+        ? await loadStarter(await resolveStarterSpecifier(cliOptions.starter))
         : undefined;
     // TypeScript and Tailwind are always enabled with TanStack Start
     const typescript = true;
@@ -84,7 +219,7 @@ export async function normalizeOptions(cliOptions, forcedAddOns, opts) {
         cliOptions.framework = starter.framework;
         mode = starter.mode;
     }
-    const framework = getFrameworkById(cliOptions.framework || 'react-cra');
+    const framework = getFrameworkById(cliOptions.framework || 'react');
     async function selectAddOns() {
         // Edge case for Windows Powershell
         if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {