feat(create-vite): support auto install dependencies and start dev (#20468)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: sapphi-red <[email protected]>
Co-authored-by: ivan <[email protected]>
Co-authored-by: Bjorn Lu <[email protected]>

Author: 4 people

packages/create-vite/__tests__/cli.spec.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import type { SyncOptions, SyncResult } from 'execa'
+import type { SyncOptions } from 'execa'
 import { execaCommandSync } from 'execa'
 import { afterEach, beforeAll, expect, test } from 'vitest'
 
@@ -10,11 +10,11 @@ const projectName = 'test-app'
 const genPath = path.join(__dirname, projectName)
 const genPathWithSubfolder = path.join(__dirname, 'subfolder', projectName)
 
-const run = <SO extends SyncOptions>(
-  args: string[],
-  options?: SO,
-): SyncResult<SO> => {
-  return execaCommandSync(`node ${CLI_PATH} ${args.join(' ')}`, options)
+const run = (args: string[], options?: SyncOptions) => {
+  return execaCommandSync(`node ${CLI_PATH} ${args.join(' ')}`, {
+    env: { ...process.env, _VITE_TEST_CLI: 'true' },
+    ...options,
+  })
 }
 
 // Helper to create a non-empty directory
@@ -111,7 +111,14 @@ test('asks to overwrite non-empty current directory', () => {
 
 test('successfully scaffolds a project based on vue starter template', () => {
   const { stdout } = run(
-    [projectName, '--interactive', '--template', 'vue', '--no-rolldown'],
+    [
+      projectName,
+      '--interactive',
+      '--no-immediate',
+      '--template',
+      'vue',
+      '--no-rolldown',
+    ],
     {
       cwd: __dirname,
     },
@@ -128,6 +135,7 @@ test('successfully scaffolds a project with subfolder based on react starter tem
     [
       `subfolder/${projectName}`,
       '--interactive',
+      '--no-immediate',
       '--template',
       'react',
       '--no-rolldown',
@@ -164,7 +172,14 @@ test('successfully scaffolds a project with subfolder based on react starter tem
 
 test('works with the -t alias', () => {
   const { stdout } = run(
-    [projectName, '--interactive', '-t', 'vue', '--no-rolldown'],
+    [
+      projectName,
+      '--interactive',
+      '--no-immediate',
+      '-t',
+      'vue',
+      '--no-rolldown',
+    ],
     {
       cwd: __dirname,
     },
@@ -214,3 +229,21 @@ test('sets index.html title to project name', () => {
   expect(stdout).toContain(`Scaffolding project in ${genPath}`)
   expect(indexHtmlContent).toContain(`<title>${projectName}</title>`)
 })
+
+test('accepts immediate flag', () => {
+  const { stdout } = run([projectName, '--template', 'vue', '--immediate'], {
+    cwd: __dirname,
+  })
+  expect(stdout).not.toContain('Install and start now?')
+  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+  expect(stdout).toContain('Installing dependencies')
+})
+
+test('accepts immediate flag and skips install prompt', () => {
+  const { stdout } = run([projectName, '--template', 'vue', '--no-immediate'], {
+    cwd: __dirname,
+  })
+  expect(stdout).not.toContain('Install and start now?')
+  expect(stdout).not.toContain('Installing dependencies')
+  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+})

packages/create-vite/src/index.ts

@@ -23,11 +23,12 @@ const argv = mri<{
   template?: string
   help?: boolean
   overwrite?: boolean
+  immediate?: boolean
   rolldown?: boolean
   interactive?: boolean
 }>(process.argv.slice(2), {
-  alias: { h: 'help', t: 'template' },
-  boolean: ['help', 'overwrite', 'rolldown', 'interactive'],
+  boolean: ['help', 'overwrite', 'immediate', 'rolldown', 'interactive'],
+  alias: { h: 'help', t: 'template', i: 'immediate' },
   string: ['template'],
 })
 const cwd = process.cwd()
@@ -41,6 +42,7 @@ When running in TTY, the CLI will start in interactive mode.
 
 Options:
   -t, --template NAME                   use a specific template
+  -i, --immediate                       install dependencies and start dev
   --rolldown / --no-rolldown            use / do not use rolldown-vite (Experimental)
   --interactive / --no-interactive      force interactive / non-interactive mode
 
@@ -344,12 +346,52 @@ const renameFiles: Record<string, string | undefined> = {
 
 const defaultTargetDir = 'vite-project'
 
+function run(...params: Parameters<typeof spawn.sync>) {
+  const { status, error } = spawn.sync(...params)
+  if (status != null && status > 0) {
+    process.exit(status)
+  }
+
+  if (error) {
+    console.error(`\n${params.slice(0, -1).join(' ')} error!`)
+    console.error(error)
+    process.exit(1)
+  }
+}
+
+function install(root: string, agent: string) {
+  if (process.env._VITE_TEST_CLI) {
+    prompts.log.step(
+      `Installing dependencies with ${agent}... (skipped in test)`,
+    )
+    return
+  }
+  prompts.log.step(`Installing dependencies with ${agent}...`)
+  run(agent, agent === 'yarn' ? [] : ['install'], {
+    stdio: 'inherit',
+    cwd: root,
+  })
+}
+
+function start(root: string, agent: string) {
+  if (process.env._VITE_TEST_CLI) {
+    prompts.log.step('Starting dev server... (skipped in test)')
+    return
+  }
+  prompts.log.step('Starting dev server...')
+  run(agent, agent === 'npm' ? ['run', 'dev'] : ['dev'], {
+    stdio: 'inherit',
+    cwd: root,
+  })
+}
+
 async function init() {
   const argTargetDir = argv._[0]
     ? formatTargetDir(String(argv._[0]))
     : undefined
   const argTemplate = argv.template
   const argOverwrite = argv.overwrite
+  const argImmediate = argv.immediate
   const argRolldown = argv.rolldown
   const argInteractive = argv.interactive
 
@@ -499,6 +541,22 @@ async function init() {
     }
   }
 
+  const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
+
+  // 5. Ask about immediate install and package manager
+  let immediate = argImmediate
+  if (immediate === undefined) {
+    if (interactive) {
+      const immediateResult = await prompts.confirm({
+        message: `Install with ${pkgManager} and start now?`,
+      })
+      if (prompts.isCancel(immediateResult)) return cancel()
+      immediate = immediateResult
+    } else {
+      immediate = false
+    }
+  }
+
   const root = path.join(cwd, targetDir)
   fs.mkdirSync(root, { recursive: true })
 
@@ -509,8 +567,6 @@ async function init() {
     template = template.replace('-swc', '')
   }
 
-  const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
-
   const { customCommand } =
     FRAMEWORKS.flatMap((f) => f.variants).find((v) => v.name === template) ?? {}
 
@@ -613,25 +669,30 @@ async function init() {
     setupReactSwc(root, template.endsWith('-ts'))
   }
 
-  let doneMessage = ''
-  const cdProjectName = path.relative(cwd, root)
-  doneMessage += `Done. Now run:\n`
-  if (root !== cwd) {
-    doneMessage += `\n  cd ${
-      cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName
-    }`
-  }
-  switch (pkgManager) {
-    case 'yarn':
-      doneMessage += '\n  yarn'
-      doneMessage += '\n  yarn dev'
-      break
-    default:
-      doneMessage += `\n  ${pkgManager} install`
-      doneMessage += `\n  ${pkgManager} run dev`
-      break
+  if (immediate) {
+    install(root, pkgManager)
+    start(root, pkgManager)
+  } else {
+    let doneMessage = ''
+    const cdProjectName = path.relative(cwd, root)
+    doneMessage += `Done. Now run:\n`
+    if (root !== cwd) {
+      doneMessage += `\n  cd ${
+        cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName
+      }`
+    }
+    switch (pkgManager) {
+      case 'yarn':
+        doneMessage += '\n  yarn'
+        doneMessage += '\n  yarn dev'
+        break
+      default:
+        doneMessage += `\n  ${pkgManager} install`
+        doneMessage += `\n  ${pkgManager} run dev`
+        break
+    }
+    prompts.outro(doneMessage)
   }
-  prompts.outro(doneMessage)
 }
 
 function formatTargetDir(targetDir: string) {