[cli] add override support for vc build and vc dev (#8451)

### Related Issues

Adds configuration override support to `vc build` and `vc dev` commands.

### 📋 Checklist

<!--
  Please keep your PR as a Draft until the checklist is complete
-->

#### Tests

- [ ] The code changed/added as part of this PR has been covered with tests
- [ ] All tests pass locally with `yarn test-unit`

#### Code Review

- [ ] This PR has a concise title and thorough description useful to a reviewer
- [ ] Issue from task tracker has a link to this PR

packages/cli/src/util/dev/server.ts

@@ -101,6 +101,7 @@ import {
   isError,
   isSpawnError,
 } from '../is-error';
+import { pickOverrides } from '../projects/project-settings';
 
 const frontendRuntimeSet = new Set(
   frameworkList.map(f => f.useRuntime?.use || '@vercel/static-build')
@@ -136,6 +137,7 @@ export default class DevServer {
   public address: string;
   public devCacheDir: string;
 
+  private currentDevCommand?: string;
   private caseSensitive: boolean;
   private apiDir: string | null;
   private apiExtensions: Set<string>;
@@ -149,10 +151,10 @@ export default class DevServer {
   private watchAggregationTimeout: number;
   private filter: (path: string) => boolean;
   private podId: string;
-  private devCommand?: string;
   private devProcess?: ChildProcess;
   private devProcessPort?: number;
   private devServerPids: Set<number>;
+  private originalProjectSettings?: ProjectSettings;
   private projectSettings?: ProjectSettings;
 
   private vercelConfigWarning: boolean;
@@ -173,7 +175,7 @@ export default class DevServer {
     this.projectEnvs = options.projectEnvs || [];
     this.files = {};
     this.address = '';
-    this.devCommand = options.devCommand;
+    this.originalProjectSettings = options.projectSettings;
     this.projectSettings = options.projectSettings;
     this.caseSensitive = false;
     this.apiDir = null;
@@ -549,6 +551,23 @@ export default class DevServer {
     return this.getVercelConfigPromise;
   }
 
+  get devCommand() {
+    if (this.projectSettings?.devCommand) {
+      return this.projectSettings.devCommand;
+    } else if (this.projectSettings?.framework) {
+      const frameworkSlug = this.projectSettings.framework;
+      const framework = frameworkList.find(f => f.slug === frameworkSlug);
+
+      if (framework) {
+        const defaults = framework.settings.devCommand.value;
+        if (defaults) {
+          return defaults;
+        }
+      }
+    }
+    return undefined;
+  }
+
   async _getVercelConfig(): Promise<VercelConfig> {
     const configPath = getVercelConfigPath(this.cwd);
 
@@ -563,6 +582,12 @@ export default class DevServer {
     ]);
 
     await this.validateVercelConfig(vercelConfig);
+
+    this.projectSettings = {
+      ...this.originalProjectSettings,
+      ...pickOverrides(vercelConfig),
+    };
+
     const { error: routeError, routes: maybeRoutes } =
       getTransformedRoutes(vercelConfig);
     if (routeError) {
@@ -703,6 +728,11 @@ export default class DevServer {
     }
 
     this.envConfigs = { buildEnv, runEnv, allEnv };
+
+    // If the `devCommand` was modified via project settings
+    // overrides then the dev process needs to be restarted
+    await this.runDevCommand();
+
     return vercelConfig;
   }
 
@@ -2205,10 +2235,21 @@ export default class DevServer {
   async runDevCommand() {
     const { devCommand, cwd } = this;
 
+    if (devCommand === this.currentDevCommand) {
+      // `devCommand` has not changed, so don't restart frontend dev process
+      return;
+    }
+
+    this.currentDevCommand = devCommand;
+
     if (!devCommand) {
       return;
     }
 
+    if (this.devProcess) {
+      await treeKill(this.devProcess.pid);
+    }
+
     this.output.log(
       `Running Dev Command ${chalk.cyan.bold(`“${devCommand}”`)}`
     );