Vite Inferred Targets
In Nx version 17.3, the @nx/vite plugin can create inferred tasks for projects that have a Vite configuration file present. This means you can run nx build my-project, nx serve my-project, nx preview my-project, nx serve-static my-project and nx test my-project for that project, even if there is no build, serve, preview, serve-static or test targets defined in package.json or project.json.
Setup
To enable inferred targets, add @nx/vite/plugin to the plugins array in nx.json.
1{
2 "plugins": [
3 {
4 "plugin": "@nx/vite/plugin",
5 "options": {
6 "buildTargetName": "build",
7 "previewTargetName": "preview",
8 "testTargetName": "test",
9 "serveTargetName": "serve",
10 "serveStaticTargetName": "serve-static"
11 }
12 }
13 ]
14}
15Target Inference Process
Identify Valid Projects
The @nx/vite/plugin plugin will create a target for any project that has a Vite configuration file present. Any of the following files will be recognized as a Vite configuration file:
vite.config.jsvite.config.tsvite.config.mjsvite.config.mtsvite.config.cjsvite.config.ctsvitest.config.jsvitest.config.tsvitest.config.mjsvitest.config.mtsvitest.config.cjsvitest.config.cts
Name the Inferred Target
Once a Vite configuration file has been identified, the targets are created with the name you specify under buildTargetName, serveTargetName, previewTargetName, serveStaticTargetName or testTargetName in the nx.json plugins array. The default names for the inferred targets are build, serve, preview, serve-static and test.
Set Inferred Options
The @nx/vite/plugin plugin will start with any targetDefaults you have set in nx.json, and then apply the following properties:
For build
| Property | Sample Value | Description |
|---|---|---|
command | vite build | Build the project |
cache | true | Automatically cache the task |
inputs | production | Break the cache if non-test files in the project change |
inputs | { externalDependencies: [ "vite" ] } | Break the cache if the version of the vite package changes |
outputs | ["{workspaceRoot}/dist/my-project"] | The output directory of the build - read from the Vite configuration file |
For serve
| Property | Sample Value | Description |
|---|---|---|
command | vite dev | Serve the project |
For test
| Property | Sample Value | Description |
|---|---|---|
command | vitest run | Run vitest for the project |
inputs | default | Break the cache if any file in the project changes |
inputs | { externalDependencies: [ "vitest" ] } | Break the cache if the version of the vitest package changes |
outputs | ["{workspaceRoot}/coverage/my-project"] | The coverage directory - read from the Vite or Vitest configuration file |
For preview
| Property | Sample Value | Description |
|---|---|---|
command | vite preview | Run preview for the project |
For serve-static
| Property | Sample Value | Description |
|---|---|---|
executor | @nx/web:file-server | Serve the build output statically |
Debug Inferred Targets
To view the final output of an inferred target you can use the nx show project my-project command or use Nx Console. The result should look something like this:
1{
2 "targets": {
3 "build": {
4 "cache": true,
5 "dependsOn": ["^build"],
6 "inputs": [
7 "production",
8 "^production",
9 {
10 "externalDependencies": ["vite"]
11 }
12 ],
13 "options": {
14 "cwd": "my-project",
15 "command": "vite build"
16 },
17 "outputs": ["{workspaceRoot}/dist/my-project"],
18 "executor": "nx:run-commands",
19 "configurations": {}
20 },
21 "serve": {
22 "options": {
23 "cwd": "my-project",
24 "command": "vite serve"
25 },
26 "executor": "nx:run-commands",
27 "configurations": {}
28 },
29 "preview": {
30 "options": {
31 "cwd": "my-project",
32 "command": "vite preview"
33 },
34 "executor": "nx:run-commands",
35 "configurations": {}
36 },
37 "test": {
38 "options": {
39 "cwd": "my-project",
40 "command": "vitest run"
41 },
42 "cache": true,
43 "inputs": [
44 "default",
45 "^production",
46 {
47 "externalDependencies": ["vitest"]
48 }
49 ],
50 "outputs": ["{workspaceRoot}/coverage/my-project"],
51 "executor": "nx:run-commands",
52 "configurations": {}
53 },
54 "serve-static": {
55 "executor": "@nx/web:file-server",
56 "options": {
57 "buildTarget": "build"
58 },
59 "configurations": {}
60 }
61 }
62}
63You can also use the nx show project my-project command with the --json false flag to see a concise output of the inferred targets:
1Name: my-project
2Root: my-project
3Source Root: my-project/src
4Tags:
5Implicit Dependencies:
6Targets:
7- build: nx:run-commands
8- serve: nx:run-commands
9- preview: nx:run-commands
10- test: nx:run-commands
11- serve-static: @nx/web:file-server
12