fix(vite): move clearScreen and logLevel to the shared options (#14174)

docs/generated/packages/vite/executors/dev-server.json

@@ -15,7 +15,7 @@
     "properties": {
       "buildTarget": {
         "type": "string",
-        "description": "Target which builds the application."
+        "description": "Target which builds the application. Only used to retrieve the configuration as the dev-server does not build the code."
       },
       "proxyConfig": {
         "type": "string",

docs/generated/packages/vite/generators/configuration.json

@@ -51,7 +51,7 @@
         "description": "The test target of the project to be transformed to use the @nrwl/vite:test executor."
       }
     },
-    "examplesFile": "This generator is used for converting an existing React or Web project to use [Vite.js](https://vitejs.dev/) and the [@nrwl/vite executors](/packages/vite#executors).\n\nIt will change the `build` and `serve` targets to use the `@nrwl/vite` executors for serving and building the application. If you choose so, it will also change your `test` target to use the `@nrwl/vite:test` executor. It will create a `vite.config.ts` file at the root of your project with the correct settings, or if there's already a `vite.config.ts` file, it will modify it to include the correct settings.\n\n{% callout type=\"caution\" title=\"Your code will be modified!\" %}\nThis generator will modify your code, so make sure to commit your changes before running it.\n{% /callout %}\n\n```bash\nnx g @nrwl/vite:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `project`, as the name of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `react` and `none`.\n\nYou must provide a `project` and a `uiFramework` for the generator to work.\n\nYou may also pass the `includeVitest` flag. This will also change your `test` target to use the `@nrwl/vite:test` executor, and configure your project for testing with [Vitest](https://vitest.dev/), by adding the `test` configuration in your `vite.config.ts` file.\n\n## Converting custom (specific) targets\n\nBy default, the `@nrwl/vite:configuration` generator will search your project's configuration to find the targets for serving, building, and testing your project, and it will attempt to convert these targets to use the `@nrwl/vite` executors.\n\nYour targets for building, serving and testing may not be named `build`, `serve` and `test`. Nx will try to infer the correct targets to convert, and it will attempt to convert the first one it finds for each of these actions if you have more than one. If you have more than one target for serving, building, or testing your project, you can pass the `--serveTarget`, `--buildTarget`, and `--testTarget` flags to the generator, to tell Nx specifically which targets to convert.\n\nNx will determine if the targets you provided (or the ones it infered) are valid and can be converted to use the `@nrwl/vite` executors. If the targets are not valid, the generator will fail. If no targets are found - or recognized to be either supported or unsupported - Nx will ask you whether you want to convert your project anyway. If you choose to do so, Nx will configure your project to use Vite.js, creating new targets for you, and creating or modifying your `vite.config.ts` file. You can then test on your own if the result works or not, and modify the configuration as needed. It's suggested that if Nx does not recognize your targets automatically, you commit your changes before running the generator, so you can revert the changes if needed.\n\n## Projects that can be converted to use the `@nrwl/vite` executors\n\nUsually, React and Web projects generated with the `@nrwl/react` and the `@nrwl/web` generators can be converted to use the `@nrwl/vite` executors without any issues.\n\nThe list of executors for building, testing and serving that can be converted to use the `@nrwl/vite` executors is:\n\n### Supported `build` executors\n\n- `@nxext/vite:build`\n- `@nrwl/js:babel`\n- `@nrwl/js:swc`\n- `@nrwl/webpack:webpack`\n- `@nrwl/rollup:rollup`\n- `@nrwl/web:rollup`\n\n### Supported `serve` exeutors\n\n- `@nxext/vite:dev`\n- `@nrwl/webpack:dev-server`\n\n### Supported `test` executors\n\n- `@nrwl/jest:jest`\n- `@nxext/vitest:vitest`\n\n### Unsupported executors\n\nWe cannot guarantee that the projects using the following executors for either building, testing or serving will work correctly when converted to use the `@nrwl/vite` executors. If you have a project that uses one of these executors, you can try to [configure it to use the `@nrwl/vite` executors manually](/packages/vite/documents/set-up-vite-manually), but it may not work properly.\n\n- `@nrwl/angular:ng-packagr-lite`\n- `@nrwl/angular:package`\n- `@nrwl/angular:webpack-browser`\n- `@angular-devkit/build-angular:browser`\n- `@angular-devkit/build-angular:dev-server`\n- `@nrwl/esbuild:esbuild`\n- `@nrwl/react-native:start`\n- `@nrwl/next:build`\n- `@nrwl/next:server`\n- `@nrwl/js:tsc`\n\nYou can read more in the [Vite package overview page](/packages/vite).\n\n## Examples\n\n### Change a React app to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest\n```\n\nThis will change the `my-react-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.\n\n### Change a Web app to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-web-app --uiFramework=none --includeVitest\n```\n\nThis will change the `my-web-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.\n\n### Change only my custom provided targets to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest --buildTarget=my-build --serveTarget=my-serve --testTarget=my-test\n```\n\nThis will change the `my-build`, `my-serve` and `my-test` targets to use the `@nrwl/vite` executors for building, serving and testing the application, even if you have other targets for these actions as well.\n",
+    "examplesFile": "This generator is used for converting an existing React or Web project to use [Vite.js](https://vitejs.dev/) and the [@nrwl/vite executors](/packages/vite#executors).\n\nIt will change the `build` and `serve` targets to use the `@nrwl/vite` executors for serving and building the application. If you choose so, it will also change your `test` target to use the `@nrwl/vite:test` executor. It will create a `vite.config.ts` file at the root of your project with the correct settings, or if there's already a `vite.config.ts` file, it will modify it to include the correct settings.\n\n{% callout type=\"caution\" title=\"Your code will be modified!\" %}\nThis generator will modify your code, so make sure to commit your changes before running it.\n{% /callout %}\n\n```bash\nnx g @nrwl/vite:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `project`, as the name of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `react` and `none`.\n\nYou must provide a `project` and a `uiFramework` for the generator to work.\n\nYou may also pass the `includeVitest` flag. This will also change your `test` target to use the `@nrwl/vite:test` executor, and configure your project for testing with [Vitest](https://vitest.dev/), by adding the `test` configuration in your `vite.config.ts` file.\n\n## Converting custom (specific) targets\n\nBy default, the `@nrwl/vite:configuration` generator will search your project's configuration to find the targets for serving, building, and testing your project, and it will attempt to convert these targets to use the `@nrwl/vite` executors.\n\nYour targets for building, serving and testing may not be named `build`, `serve` and `test`. Nx will try to infer the correct targets to convert, and it will attempt to convert the first one it finds for each of these actions if you have more than one. If you have more than one target for serving, building, or testing your project, you can pass the `--serveTarget`, `--buildTarget`, and `--testTarget` flags to the generator, to tell Nx specifically which targets to convert.\n\nNx will determine if the targets you provided (or the ones it inferred) are valid and can be converted to use the `@nrwl/vite` executors. If the targets are not valid, the generator will fail. If no targets are found - or recognized to be either supported or unsupported - Nx will ask you whether you want to convert your project anyway. If you choose to do so, Nx will configure your project to use Vite.js, creating new targets for you, and creating or modifying your `vite.config.ts` file. You can then test on your own if the result works or not, and modify the configuration as needed. It's suggested that if Nx does not recognize your targets automatically, you commit your changes before running the generator, so you can revert the changes if needed.\n\n## Projects that can be converted to use the `@nrwl/vite` executors\n\nUsually, React and Web projects generated with the `@nrwl/react` and the `@nrwl/web` generators can be converted to use the `@nrwl/vite` executors without any issues.\n\nThe list of executors for building, testing and serving that can be converted to use the `@nrwl/vite` executors is:\n\n### Supported `build` executors\n\n- `@nxext/vite:build`\n- `@nrwl/js:babel`\n- `@nrwl/js:swc`\n- `@nrwl/webpack:webpack`\n- `@nrwl/rollup:rollup`\n- `@nrwl/web:rollup`\n\n### Supported `serve` executors\n\n- `@nxext/vite:dev`\n- `@nrwl/webpack:dev-server`\n\n### Supported `test` executors\n\n- `@nrwl/jest:jest`\n- `@nxext/vitest:vitest`\n\n### Unsupported executors\n\nWe cannot guarantee that the projects using the following executors for either building, testing or serving will work correctly when converted to use the `@nrwl/vite` executors. If you have a project that uses one of these executors, you can try to [configure it to use the `@nrwl/vite` executors manually](/packages/vite/documents/set-up-vite-manually), but it may not work properly.\n\n- `@nrwl/angular:ng-packagr-lite`\n- `@nrwl/angular:package`\n- `@nrwl/angular:webpack-browser`\n- `@angular-devkit/build-angular:browser`\n- `@angular-devkit/build-angular:dev-server`\n- `@nrwl/esbuild:esbuild`\n- `@nrwl/react-native:start`\n- `@nrwl/next:build`\n- `@nrwl/next:server`\n- `@nrwl/js:tsc`\n\nYou can read more in the [Vite package overview page](/packages/vite).\n\n## Examples\n\n### Change a React app to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest\n```\n\nThis will change the `my-react-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.\n\n### Change a Web app to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-web-app --uiFramework=none --includeVitest\n```\n\nThis will change the `my-web-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.\n\n### Change only my custom provided targets to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest --buildTarget=my-build --serveTarget=my-serve --testTarget=my-test\n```\n\nThis will change the `my-build`, `my-serve` and `my-test` targets to use the `@nrwl/vite` executors for building, serving and testing the application, even if you have other targets for these actions as well.\n",
     "presets": []
   },
   "description": "Add Vite configuration to an application.",

packages/vite/docs/configuration-examples.md

@@ -25,7 +25,7 @@ By default, the `@nrwl/vite:configuration` generator will search your project's
 
 Your targets for building, serving and testing may not be named `build`, `serve` and `test`. Nx will try to infer the correct targets to convert, and it will attempt to convert the first one it finds for each of these actions if you have more than one. If you have more than one target for serving, building, or testing your project, you can pass the `--serveTarget`, `--buildTarget`, and `--testTarget` flags to the generator, to tell Nx specifically which targets to convert.
 
-Nx will determine if the targets you provided (or the ones it infered) are valid and can be converted to use the `@nrwl/vite` executors. If the targets are not valid, the generator will fail. If no targets are found - or recognized to be either supported or unsupported - Nx will ask you whether you want to convert your project anyway. If you choose to do so, Nx will configure your project to use Vite.js, creating new targets for you, and creating or modifying your `vite.config.ts` file. You can then test on your own if the result works or not, and modify the configuration as needed. It's suggested that if Nx does not recognize your targets automatically, you commit your changes before running the generator, so you can revert the changes if needed.
+Nx will determine if the targets you provided (or the ones it inferred) are valid and can be converted to use the `@nrwl/vite` executors. If the targets are not valid, the generator will fail. If no targets are found - or recognized to be either supported or unsupported - Nx will ask you whether you want to convert your project anyway. If you choose to do so, Nx will configure your project to use Vite.js, creating new targets for you, and creating or modifying your `vite.config.ts` file. You can then test on your own if the result works or not, and modify the configuration as needed. It's suggested that if Nx does not recognize your targets automatically, you commit your changes before running the generator, so you can revert the changes if needed.
 
 ## Projects that can be converted to use the `@nrwl/vite` executors
 
@@ -42,7 +42,7 @@ The list of executors for building, testing and serving that can be converted to
 - `@nrwl/rollup:rollup`
 - `@nrwl/web:rollup`
 
-### Supported `serve` exeutors
+### Supported `serve` executors
 
 - `@nxext/vite:dev`
 - `@nrwl/webpack:dev-server`

packages/vite/src/executors/build/build.impl.ts

@@ -1,7 +1,10 @@
 import 'dotenv/config';
 import { ExecutorContext, logger } from '@nrwl/devkit';
-import { build, InlineConfig } from 'vite';
-import { getBuildAndSharedConfig } from '../../utils/options-utils';
+import { build, InlineConfig, mergeConfig } from 'vite';
+import {
+  getViteBuildOptions,
+  getViteSharedConfig,
+} from '../../utils/options-utils';
 import { ViteBuildExecutorOptions } from './schema';
 import { copyAssets } from '@nrwl/js';
 import { existsSync } from 'fs';
@@ -14,7 +17,14 @@ export default async function viteBuildExecutor(
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
 
-  await runInstance(await getBuildAndSharedConfig(options, context));
+  const buildConfig = mergeConfig(
+    getViteSharedConfig(options, false, context),
+    {
+      build: getViteBuildOptions(options, context),
+    }
+  );
+
+  await runInstance(buildConfig);
 
   const libraryPackageJson = resolve(projectRoot, 'package.json');
   const rootPackageJson = resolve(context.root, 'package.json');

packages/vite/src/executors/dev-server/dev-server.impl.ts

@@ -3,9 +3,10 @@ import { ExecutorContext } from '@nrwl/devkit';
 import { createServer, InlineConfig, mergeConfig, ViteDevServer } from 'vite';
 
 import {
-  getBuildAndSharedConfig,
-  getBuildTargetOptions,
-  getServerOptions,
+  getViteSharedConfig,
+  getNxTargetOptions,
+  getViteServerOptions,
+  getViteBuildOptions,
 } from '../../utils/options-utils';
 
 import { ViteDevServerExecutorOptions } from './schema';
@@ -15,53 +16,68 @@ export default async function* viteDevServerExecutor(
   options: ViteDevServerExecutorOptions,
   context: ExecutorContext
 ): AsyncGenerator<{ success: boolean; baseUrl: string }> {
+  // Retrieve the option for the configured buildTarget.
+  const buildTargetOptions: ViteBuildExecutorOptions = getNxTargetOptions(
+    options.buildTarget,
+    context
+  );
+
+  // Merge the options from the build and dev-serve targets.
+  // The latter takes precedence.
   const mergedOptions = {
-    ...getBuildTargetOptions(options.buildTarget, context),
+    ...buildTargetOptions,
     ...options,
-  } as ViteDevServerExecutorOptions & ViteBuildExecutorOptions;
+  };
+
+  const projectRoot = context.workspace.projects[context.projectName].root;
 
+  // Add the server specific configuration.
   const serverConfig: InlineConfig = mergeConfig(
-    await getBuildAndSharedConfig(mergedOptions, context),
+    getViteSharedConfig(mergedOptions, options.clearScreen, context),
     {
-      server: getServerOptions(mergedOptions, context),
-    } as InlineConfig
+      build: getViteBuildOptions(mergedOptions, context),
+      server: getViteServerOptions(mergedOptions, context),
+    }
   );
 
   if (serverConfig.mode === 'production') {
     console.warn('WARNING: serve is not meant to be run in production!');
   }
 
-  const server = await createServer(serverConfig);
-
-  const baseUrl = await runViteDevServer(server);
+  try {
+    const server = await createServer(serverConfig);
+    const baseUrl = await runViteDevServer(server);
 
-  yield {
-    success: true,
-    baseUrl: baseUrl,
-  };
+    yield {
+      success: true,
+      baseUrl,
+    };
+  } catch (e) {
+    console.error(e);
+    yield {
+      success: false,
+      baseUrl: '',
+    };
+  }
 
   // This Promise intentionally never resolves, leaving the process running
   await new Promise<{ success: boolean }>(() => {});
 }
 
 async function runViteDevServer(server: ViteDevServer): Promise<string> {
-  try {
-    await server.listen();
-    server.printUrls();
+  await server.listen();
+  server.printUrls();
 
-    const processOnExit = () => {
-      process.off('SIGINT', processOnExit);
-      process.off('SIGTERM', processOnExit);
-      process.off('exit', processOnExit);
-    };
+  const processOnExit = () => {
+    process.off('SIGINT', processOnExit);
+    process.off('SIGTERM', processOnExit);
+    process.off('exit', processOnExit);
+  };
 
-    process.on('SIGINT', processOnExit);
-    process.on('SIGTERM', processOnExit);
-    process.on('exit', processOnExit);
-    return `${server.config?.server?.https ? 'https' : 'http'}://${
-      server.config?.server?.host
-    }:${server.config?.server?.port}`;
-  } catch (err) {
-    console.log(err);
-  }
+  process.on('SIGINT', processOnExit);
+  process.on('SIGTERM', processOnExit);
+  process.on('exit', processOnExit);
+  return `${server.config.server.https ? 'https' : 'http'}://${
+    server.config.server.host
+  }:${server.config.server.port}`;
 }

packages/vite/src/executors/dev-server/schema.json

@@ -18,7 +18,7 @@
   "properties": {
     "buildTarget": {
       "type": "string",
-      "description": "Target which builds the application."
+      "description": "Target which builds the application. Only used to retrieve the configuration as the dev-server does not build the code."
     },
     "proxyConfig": {
       "type": "string",