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,5 +1,6 @@
 import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version';
 import {
+  getProjects,
   readNxJson,
   readProjectConfiguration,
   Tree,
@@ -33,6 +34,7 @@ describe('react app generator (PCv3)', () => {
     const nxJson = readNxJson(appTree);
     nxJson.plugins ??= [];
     nxJson.plugins.push('@nx/webpack/plugin');
+    nxJson.plugins.push('@nx/vite/plugin');
     updateNxJson(appTree, nxJson);
   });
 
@@ -57,4 +59,17 @@ describe('react app generator (PCv3)', () => {
       `assets: ['./src/favicon.ico', './src/assets']`
     );
   });
+
+  it('should not add targets for vite', async () => {
+    await applicationGenerator(appTree, {
+      ...schema,
+      name: 'my-vite-app',
+      bundler: 'vite',
+    });
+    const projects = getProjects(appTree);
+    expect(projects.get('my-vite-app').targets.build).toBeUndefined();
+    expect(projects.get('my-vite-app').targets.serve).toBeUndefined();
+    expect(projects.get('my-vite-app').targets.preview).toBeUndefined();
+    expect(projects.get('my-vite-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": {

packages/vite/migrations.spec.ts

@@ -3,6 +3,16 @@ import json = require('./migrations.json');
 import { assertValidMigrationPaths } from '@nx/devkit/internal-testing-utils';
 import { MigrationsJson } from '@nx/devkit';
 
+jest.mock('vite', () => ({
+  loadConfigFromFile: jest.fn().mockImplementation(() => {
+    return Promise.resolve({
+      path: 'vite.config.ts',
+      config: {},
+      dependencies: [],
+    });
+  }),
+}));
+
 describe('vite migrations', () => {
   assertValidMigrationPaths(json as MigrationsJson, __dirname);
 });

packages/vite/package.json

@@ -29,10 +29,10 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
+    "@nx/devkit": "file:../devkit",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@swc/helpers": "~0.5.0",
     "enquirer": "~2.3.6",
-    "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
     "tsconfig-paths": "^4.1.2"
   },
@@ -45,6 +45,7 @@
   },
   "exports": {
     ".": "./index.js",
+    "./plugin": "./plugin.js",
     "./package.json": "./package.json",
     "./migrations.json": "./migrations.json",
     "./generators.json": "./generators.json",

packages/vite/plugin.ts

@@ -0,0 +1,5 @@
+export {
+  createNodes,
+  VitePluginOptions,
+  createDependencies,
+} from './src/plugins/plugin';

packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -44,6 +44,7 @@ export default defineConfig({
       // External packages that should not be bundled into your library.
       external: ['react', 'react-dom', 'react/jsx-runtime'],
     },
+    outDir: 'dist/react-lib-nonb-jest',
   },
 });
 "
@@ -93,6 +94,7 @@ export default defineConfig({
       // External packages that should not be bundled into your library.
       external: ['react', 'react-dom', 'react/jsx-runtime'],
     },
+    outDir: 'dist/react-lib-nonb-jest',
   },
 
   test: {
@@ -168,6 +170,7 @@ export default defineConfig({
       // External packages that should not be bundled into your library.
       external: ['react', 'react-dom', 'react/jsx-runtime'],
     },
+    outDir: 'dist/react-lib-nonb-vitest',
   },
   plugins: [
     nxViteTsPaths(),