feat(vite): nodes for build, serve, test, preview targets

docs/generated/manifests/menus.json

@@ -9018,6 +9018,14 @@
                 "isExternal": false,
                 "children": [],
                 "disableCollapsible": false
+              },
+              {
+                "name": "Overview of the @nx/vite/plugin",
+                "path": "/nx-api/vite/documents/vite-nodes-plugin",
+                "id": "vite-nodes-plugin",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
               }
             ],
             "isExternal": false,

docs/generated/manifests/nx-api.json

@@ -2524,6 +2524,17 @@
         "path": "/nx-api/vite/documents/overview",
         "tags": [],
         "originalFilePath": "shared/packages/vite/vite-plugin"
+      },
+      "/nx-api/vite/documents/vite-nodes-plugin": {
+        "id": "vite-nodes-plugin",
+        "name": "Overview of the @nx/vite/plugin",
+        "description": "The @nx/vite/plugin adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.",
+        "file": "generated/packages/vite/documents/vite-nodes-plugin",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/nx-api/vite/documents/vite-nodes-plugin",
+        "tags": [],
+        "originalFilePath": "shared/packages/vite/vite-nodes-plugin"
       }
     },
     "root": "/packages/vite",

docs/generated/packages-metadata.json

@@ -2497,6 +2497,17 @@
         "path": "vite/documents/overview",
         "tags": [],
         "originalFilePath": "shared/packages/vite/vite-plugin"
+      },
+      {
+        "id": "vite-nodes-plugin",
+        "name": "Overview of the @nx/vite/plugin",
+        "description": "The @nx/vite/plugin adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.",
+        "file": "generated/packages/vite/documents/vite-nodes-plugin",
+        "itemList": [],
+        "isExternal": false,
+        "path": "vite/documents/vite-nodes-plugin",
+        "tags": [],
+        "originalFilePath": "shared/packages/vite/vite-nodes-plugin"
       }
     ],
     "executors": [

docs/generated/packages/vite/documents/vite-nodes-plugin.md

@@ -0,0 +1,64 @@
+---
+title: Overview of the @nx/vite/plugin
+description: The @nx/vite/plugin adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.
+---
+
+{% callout type="note" title="Still in beta" %}
+This feature is still in beta. To use it you must have the `NX_PCV3` environment variable set to `"true"`.
+{% /callout %}
+
+## What is the @nx/vite/plugin?
+
+The `@nx/vite/plugin` adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a `vite.config.ts` file without creating a `project.json` file.
+
+This is an effort to reduce duplicate code and configurations for your projects that use Vite.
+
+## How it works
+
+The `@nx/vite:init` generator (which is called through the `@nx/vite:configuration` generator, and the `@nx/react:app|lib`, `@nx/vue:app|lib` and `@nx/web:app|lib` generators) the following entry is added in the `plugins` array of your `nx.json`:
+
+```json
+...
+plugins: [
+  {
+    "plugin": "@nx/vite/plugin",
+    "options": {
+      "buildTargetName": "build",
+      "previewTargetName": "preview",
+      "serveTargetName": "serve",
+      "testTargetName": "test",
+      "serveStaticTargetName": "static-serve",
+    },
+  },
+  ...
+]
+```
+
+This will create targets for `build`, `preview`, `test` and `serve` in your project graph, so that you can run `nx build my-app`, `nx test my-app` etc, without manually defining these targets in each of your projects' `project.json` files. This will work for every single project in your workspace that has a `vite.config.ts|js` file.
+
+## How to configure
+
+The plugin generates these targets with bare minimum (no extra) options configuration. Any options you need for your Vite app, you can add in your project's `vite.config.ts`.
+
+If you want to add some universal options for all your `build` targets, for example, you can still do so in the [`targetDefaults`](/recipes/running-tasks/reduce-repetitive-configuration#reduce-configuration-with-targetdefaults).
+
+You can edit the name of your targets if you want to use a different name. For example, you can have this configuration:
+
+```json
+...
+plugins: [
+  {
+    "plugin": "@nx/vite/plugin",
+    "options": {
+      "buildTargetName": "build-core",
+      "previewTargetName": "preview",
+      "serveTargetName": "serve",
+      "testTargetName": "test",
+      "serveStaticTargetName": "static-serve",
+    },
+  },
+  ...
+]
+```
+
+and this will create `build-core`, `preview`, `test` and `serve` targets in your project graph. You can then call `nx build-core my-app` for all your projects that have a `vite.config.ts|js` file.

docs/map.json

@@ -2145,6 +2145,13 @@
               "name": "Overview of the Nx Vite Plugin",
               "description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.",
               "file": "shared/packages/vite/vite-plugin"
+            },
+            {
+              "id": "vite-nodes-plugin",
+              "path": "/nx-api/vite-nodes-plugin",
+              "name": "Overview of the @nx/vite/plugin",
+              "description": "The @nx/vite/plugin adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.",
+              "file": "shared/packages/vite/vite-nodes-plugin"
             }
           ]
         },

docs/shared/packages/vite/vite-nodes-plugin.md

@@ -0,0 +1,64 @@
+---
+title: Overview of the @nx/vite/plugin
+description: The @nx/vite/plugin adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.
+---
+
+{% callout type="note" title="Still in beta" %}
+This feature is still in beta. To use it you must have the `NX_PCV3` environment variable set to `"true"`.
+{% /callout %}
+
+## What is the @nx/vite/plugin?
+
+The `@nx/vite/plugin` adds Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a `vite.config.ts` file without creating a `project.json` file.
+
+This is an effort to reduce duplicate code and configurations for your projects that use Vite.
+
+## How it works
+
+The `@nx/vite:init` generator (which is called through the `@nx/vite:configuration` generator, and the `@nx/react:app|lib`, `@nx/vue:app|lib` and `@nx/web:app|lib` generators) the following entry is added in the `plugins` array of your `nx.json`:
+
+```json
+...
+plugins: [
+  {
+    "plugin": "@nx/vite/plugin",
+    "options": {
+      "buildTargetName": "build",
+      "previewTargetName": "preview",
+      "serveTargetName": "serve",
+      "testTargetName": "test",
+      "serveStaticTargetName": "static-serve",
+    },
+  },
+  ...
+]
+```
+
+This will create targets for `build`, `preview`, `test` and `serve` in your project graph, so that you can run `nx build my-app`, `nx test my-app` etc, without manually defining these targets in each of your projects' `project.json` files. This will work for every single project in your workspace that has a `vite.config.ts|js` file.
+
+## How to configure
+
+The plugin generates these targets with bare minimum (no extra) options configuration. Any options you need for your Vite app, you can add in your project's `vite.config.ts`.
+
+If you want to add some universal options for all your `build` targets, for example, you can still do so in the [`targetDefaults`](/recipes/running-tasks/reduce-repetitive-configuration#reduce-configuration-with-targetdefaults).
+
+You can edit the name of your targets if you want to use a different name. For example, you can have this configuration:
+
+```json
+...
+plugins: [
+  {
+    "plugin": "@nx/vite/plugin",
+    "options": {
+      "buildTargetName": "build-core",
+      "previewTargetName": "preview",
+      "serveTargetName": "serve",
+      "testTargetName": "test",
+      "serveStaticTargetName": "static-serve",
+    },
+  },
+  ...
+]
+```
+
+and this will create `build-core`, `preview`, `test` and `serve` targets in your project graph. You can then call `nx build-core my-app` for all your projects that have a `vite.config.ts|js` file.

docs/shared/reference/sitemap.md

@@ -625,6 +625,7 @@
   - [vite](/nx-api/vite)
     - [documents](/nx-api/vite/documents)
       - [Overview of the Nx Vite Plugin](/nx-api/vite/documents/overview)
+      - [Overview of the @nx/vite/plugin](/nx-api/vite/documents/vite-nodes-plugin)
     - [executors](/nx-api/vite/executors)
       - [dev-server](/nx-api/vite/executors/dev-server)
       - [build](/nx-api/vite/executors/build)

e2e/vite/src/vite-pcv3.test.ts

@@ -0,0 +1,59 @@
+import { cleanupProject, newProject, runCLI, uniq } from '@nx/e2e/utils';
+
+const myApp = uniq('my-app');
+
+describe('@nx/vite/plugin', () => {
+  let proj: string;
+  let originalEnv: string;
+
+  beforeAll(() => {
+    originalEnv = process.env.NX_PCV3;
+    process.env.NX_PCV3 = 'true';
+  });
+
+  afterAll(() => {
+    process.env.NODE_ENV = originalEnv;
+  });
+
+  describe('build and test React Vite app', () => {
+    beforeAll(() => {
+      proj = newProject();
+      runCLI(
+        `generate @nx/react:app ${myApp} --bundler=vite --unitTestRunner=vitest`
+      );
+    });
+
+    afterAll(() => cleanupProject());
+
+    it('should build application', () => {
+      const result = runCLI(`build ${myApp}`);
+      expect(result).toContain('Successfully ran target build');
+    }, 200_000);
+
+    it('should test application', () => {
+      const result = runCLI(`test ${myApp}`);
+      expect(result).toContain('Successfully ran target test');
+    }, 200_000);
+  });
+
+  describe('build and test Vue app', () => {
+    beforeAll(() => {
+      proj = newProject();
+      runCLI(`generate @nx/vue:app ${myApp} --unitTestRunner=vitest`);
+    });
+
+    afterAll(() => {
+      cleanupProject();
+    });
+
+    it('should build application', () => {
+      const result = runCLI(`build ${myApp}`);
+      expect(result).toContain('Successfully ran target build');
+    }, 200_000);
+
+    it('should test application', () => {
+      const result = runCLI(`test ${myApp}`);
+      expect(result).toContain('Successfully ran target test');
+    }, 200_000);
+  });
+});

packages/react/src/generators/application/application.pcv3.spec.ts

@@ -1,60 +1,44 @@
-import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version';
-import {
-  readNxJson,
-  readProjectConfiguration,
-  Tree,
-  updateNxJson,
-} from '@nx/devkit';
+import { getProjects, Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/eslint';
 import { applicationGenerator } from './application';
 import { Schema } from './schema';
-// need to mock cypress otherwise it'll use the nx installed version from package.json
-//  which is v9 while we are testing for the new v10 version
-jest.mock('@nx/cypress/src/utils/cypress-version');
-describe('react app generator (PCv3)', () => {
+
+describe('app generated with Project Configuration v3', () => {
+  let originalValue;
   let appTree: Tree;
-  let schema: Schema = {
-    compiler: 'babel',
-    e2eTestRunner: 'cypress',
+  const schema: Schema = {
+    e2eTestRunner: 'none',
     skipFormat: false,
     name: 'my-app',
     linter: Linter.EsLint,
     style: 'css',
     strict: true,
+    bundler: 'vite',
+    unitTestRunner: 'vitest',
     projectNameAndRootFormat: 'as-provided',
   };
-  let mockedInstalledCypressVersion: jest.Mock<
-    ReturnType<typeof installedCypressVersion>
-  > = installedCypressVersion as never;
+
   beforeEach(() => {
-    mockedInstalledCypressVersion.mockReturnValue(10);
     appTree = createTreeWithEmptyWorkspace();
-    const nxJson = readNxJson(appTree);
-    nxJson.plugins ??= [];
-    nxJson.plugins.push('@nx/webpack/plugin');
-    updateNxJson(appTree, nxJson);
+    originalValue = process.env['NX_PCV3'];
+    process.env['NX_PCV3'] = 'true';
   });
 
-  it('should setup webpack config that is compatible without project targets', async () => {
-    await applicationGenerator(appTree, {
-      ...schema,
-      name: 'my-app',
-      bundler: 'webpack',
-    });
-
-    const targets = readProjectConfiguration(appTree, 'my-app').targets;
-    expect(targets.build).toBeUndefined();
-    expect(targets.serve).toBeUndefined();
+  afterEach(() => {
+    if (originalValue) {
+      process.env['NX_PCV3'] = originalValue;
+    } else {
+      delete process.env['NX_PCV3'];
+    }
+  });
 
-    const webpackConfig = appTree.read('my-app/webpack.config.js', 'utf-8');
-    expect(webpackConfig).toContain(`new NxWebpackPlugin`);
-    expect(webpackConfig).toContain(`'../dist/my-app'`);
-    expect(webpackConfig).toContain(`main: './src/main.tsx'`);
-    expect(webpackConfig).toContain(`tsConfig: './tsconfig.app.json'`);
-    expect(webpackConfig).toContain(`styles: ['./src/styles.css']`);
-    expect(webpackConfig).toContain(
-      `assets: ['./src/favicon.ico', './src/assets']`
-    );
+  it('should not add targets', async () => {
+    await applicationGenerator(appTree, schema);
+    const projects = getProjects(appTree);
+    expect(projects.get('my-app').targets.build).toBeUndefined();
+    expect(projects.get('my-app').targets.serve).toBeUndefined();
+    expect(projects.get('my-app').targets.preview).toBeUndefined();
+    expect(projects.get('my-app').targets.test).toBeUndefined();
   });
 });

packages/react/src/generators/application/lib/add-e2e.ts

@@ -4,6 +4,7 @@ import {
   ensurePackage,
   getPackageManagerCommand,
   joinPathFragments,
+  readNxJson,
 } from '@nx/devkit';
 import { webStaticServeGenerator } from '@nx/web';
 

packages/react/src/generators/library/__snapshots__/library.spec.ts.snap

@@ -17,6 +17,7 @@ export default defineConfig({
   // },
 
   test: {
+    reportsDirectory: '../coverage/my-lib',
     globals: true,
     cache: { dir: '../node_modules/.vitest' },
     environment: 'jsdom',
@@ -71,6 +72,7 @@ export default defineConfig({
       // External packages that should not be bundled into your library.
       external: ['react', 'react-dom', 'react/jsx-runtime'],
     },
+    outDir: 'dist/my-lib',
   },
 
   test: {

packages/vite/migrations.json

@@ -45,6 +45,11 @@
       "version": "17.2.0-beta.10",
       "description": "Update vite config.",
       "implementation": "./src/migrations/update-17-2-0/update-vite-config"
+    },
+    "add-vite-plugin": {
+      "version": "17.3.0-beta.0",
+      "description": "Add @nx/vite/plugin",
+      "implementation": "./src/migrations/update-17-2-0/add-vite-plugin"
     }
   },
   "packageJsonUpdates": {