/
vite.json
385 lines (385 loc) · 33.3 KB
/
vite.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
{
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "vite",
"packageName": "@nrwl/vite",
"description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
"root": "/packages/vite",
"source": "/packages/vite/src",
"documentation": [
{
"name": "Overview",
"id": "overview",
"path": "/packages/vite",
"file": "shared/vite-plugin",
"content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n{% callout type=\"warning\" title=\"Early release plugin\" %}\nThis Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.\n{% /callout %}\n\n[Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\nRead more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).\n\n## Setting up Vite\n\nYou can create a new workspace that uses Vite with one of the following commands:\n\n- Generate a new monorepo with a Web Components app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=web-components\n```\n\n- Generate a new standalone React app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=react-standalone\n```\n\n### Add Vite to an existing workspace\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Initialize Vite.js\n\nAfter you install the plugin, you need to initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.\n\n```bash\nnx g @nrwl/vite:init\n```\n\n{% callout type=\"note\" title=\"Choosing a framework\" %}\nYou will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.\n{% /callout %}\n\n## Generate an application using Vite\n\nYou can generate a React or a Web application that uses Vite.js. The `@nrwl/react:app` and `@nrwl/web:app` generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies.\n\nTo generate a React application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\nTo generate a Web application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/web:app my-app --bundler=vite\n```\n\n## Modify an existing React or Web application to use Vite.js\n\nYou can use the `@nrwl/vite:configuration` generator to change your React or Web application to use Vite.js. This generator will modify your application's configuration to use Vite.js, and it will also install all the necessary dependencies.\n\nYou can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.\n\n## Set up your apps to use Vite.js manually\n\nYou can use the `@nrwl/vite:dev-server` and the `@nrwl/vite:build` executors to serve and build your applications using Vite.js. To do this, you need to make a few adjustments to your application.\n\n{% github-repository url=\"https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example\" /%}\n\n### 1. Change the executors in your `project.json`\n\n#### The `serve` target\n\nIn your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"port\": 4200,\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou do not have to set the `port` here, necessarily. You can also specify the port in the `vite.config.ts` file (see **Step 2** below).\nThe same goes for all other Vite.js options that you can find the [Vite.js documentation](https://vitejs.dev/config/). All these can be added in your `vite.config.ts` file.\n{% /callout %}\n\n#### The `build` target\n\nIn your app's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n ...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou can specify more options in the `vite.config.ts` file (see **Step 2** below).\n{% /callout %}\n\n### 2. Configure Vite.js\n\n#### TypeScript paths\n\nYou need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package/vite-tsconfig-paths) to make sure that your TypeScript paths are resolved correctly in your monorepo.\n\n#### React plugin\n\nIf you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).\n\n#### How your `vite.config.ts` looks like\n\nAdd a `vite.config.ts` file to the root of your app. If you are not using React, you can skip adding the `react` plugin, of course.\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default defineConfig({\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n{% callout type=\"note\" title=\"The `root` path\" %}\nMake sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.\n{% /callout %}\n\nIn that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).\n\n#### Creating a root `vite.config.ts` file\n\nYou can create a `vite.config.ts` file to the root of your workspace, as well as at the root of each of your applications. This file is used to configure Vite. You can read more about the configuration options in the [Vite documentation](https://vitejs.dev/config/).\n\nThe root `vite.config.ts` file can be used for all applications, and you can place in there general configurations that would apply for all your apps using Vite in your workspace. The application-specific `vite.config.ts` files can be used to override the root configuration, or, for example, import framework-specific plugins (eg. the `'@vitejs/plugin-react'` for React apps). The application-specific configuration files extend (using [`mergeConfig`](https://vitejs.dev/guide/api-javascript.html#mergeconfig)) the root configuration file. You can adjust this behavior to your needs.\n\nSo, if you are using a root `vite.config.ts` file, you should adjust your code as follows:\n\n```ts\n// <workspace-root>vite.config.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n plugins: [],\n});\n```\n\nand then in your app's `vite.config.ts` file:\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { mergeConfig } from 'vite';\nimport baseConfig from '../../vite.config';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default mergeConfig(baseConfig, {\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n### 3. Move `index.html` and point it to your app's entrypoint\n\nFirst of all, move your `index.html` file to the root of your app (eg. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).\n\nThen, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:\n\n```html\n...\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"src/main.tsx\"></script>\n </body>\n</html>\n```\n\n### 4. Add a `public` folder\n\nYou can add a `public` folder to the root of your app. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory). Use that folder as you would normally do.\n\n```treeview\nmyorg/\n├── apps/\n│ ├── my-app/\n│ │ ├── src/\n│ │ │ ├── app/\n│ │ │ ├── assets/\n│ │ │ ├── ...\n│ │ │ └── main.tsx\n│ │ ├── index.html\n│ │ ├── public/\n│ │ │ └── my-page.md\n│ │ ├── project.json\n│ │ ├── ...\n│ │ ├── tsconfig.app.json\n│ │ ├── tsconfig.json\n│ │ └── tsconfig.spec.json\n```\n\n### 5. Adjust your app's tsconfig.json\n\nChange your app's `tsconfig.json` (eg. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:\n\n#### For React apps\n\n```json\n...\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"allowJs\": false,\n \"esModuleInterop\": false,\n \"allowSyntheticDefaultImports\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"isolatedModules\": true,\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Node\",\n \"noEmit\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"target\": \"ESNext\",\n \"types\": [\"vite/client\"],\n \"useDefineForClassFields\": true\n },\n...\n```\n\n#### For Web apps\n\n```json\n...\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"useDefineForClassFields\": true,\n \"module\": \"ESNext\",\n \"lib\": [\"ESNext\", \"DOM\"],\n \"moduleResolution\": \"Node\",\n \"strict\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"esModuleInterop\": true,\n \"noEmit\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noImplicitReturns\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"include\": [\"src\"],\n...\n```\n\nYou can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).\n\n### 6. Use Vite.js!\n\nNow you can finally serve and build your app using Vite.js:\n\n#### Serve the app\n\n```\nnx serve my-app\n```\n\nor\n\n```\nnx run my-app:serve\n```\n\nNow, visit [http://localhost:4200](http://localhost:4200) to see your app running!\n\n#### Build the app\n\n```\nnx build my-app\n```\n\nor\n\n```\nnx run my-app:build\n```\n"
}
],
"generators": [
{
"name": "init",
"factory": "./src/generators/init/init",
"schema": {
"cli": "nx",
"title": "Initialize Vite in the workspace.",
"description": "Initialize Vite in the workspace.",
"$id": "init-vite-plugin",
"type": "object",
"properties": {
"uiFramework": {
"type": "string",
"description": "UI Framework to use for Vite.",
"enum": ["react", "none"],
"default": "react",
"x-prompt": "What UI framework plugin should Vite use?"
},
"includeLib": {
"type": "boolean",
"description": "Add dependencies needed to build libraries.",
"default": false
}
},
"examplesFile": "This is a generator will initialize Vite.js in your workspace. It will install all the necessary dependencies. You can read more about how this generator works, in the [Vite package overview page](/packages/vite).\n\nYou can use it on its own like this:\n\n```bash\nnx g @nrwl/vite:configuration\n```\n\nHowever, this generator will be called when you are either converting an existing React or Web app to use Vite, using the [`@nrwl/vite:configuration` generator](/packages/vite/generators/configuration), or when you are creating a new React or Web app using the [`@nrwl/react:app`](/packages/react/generators/application) or [`@nrwl/web:app`](<(/packages/web/generators/application)>) generators, if you choose `vite` as the `bundler`.\n\n## Examples\n\n### Install all the necessary dependencies for Vite and the React plugin\n\n```bash\nnx g @nrwl/vite:init --uiFramework=react\n```\n\n### Install all the necessary dependencies for Vite\n\n```bash\nnx g @nrwl/vite:init --uiFramework=none\n```\n",
"presets": []
},
"description": "Initialize Vite in the workspace.",
"aliases": ["ng-add"],
"hidden": true,
"implementation": "/packages/vite/src/generators/init/init.ts",
"path": "/packages/vite/src/generators/init/schema.json"
},
{
"name": "configuration",
"factory": "./src/generators/configuration/configuration",
"schema": {
"cli": "nx",
"title": "Add Vite Configuration to an application.",
"description": "Add Vite Configuration to an application.",
"$id": "configure-vite-app",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"$default": { "$source": "argv", "index": 0 },
"aliases": ["name", "projectName"],
"x-dropdown": "project",
"x-prompt": "What is the name of the project to set up a webpack for?"
},
"includeLib": {
"type": "boolean",
"description": "Add a library build option and skip the server option.",
"hidden": true
},
"uiFramework": {
"type": "string",
"description": "UI Framework to use for Vite.",
"enum": ["react", "none"],
"default": "none",
"x-prompt": "What UI framework plugin should Vite use?"
},
"newProject": {
"type": "boolean",
"description": "Is this a new project?",
"default": false
}
},
"examplesFile": "This is a generator for setting up Vite configuration for an existing React or Web application. It will change the build and serve targets to use the `@nrwl/vite` executors for serving and building the application. This generator will modify your code, so make sure to commit your changes before running it.\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 can read more about how this generator works, 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-app --uiFramework=react\n```\n\nThis will change the `my-app` project to use Vite instead of the default Webpack configuration. The changes this generator will do are described in the [Vite package overview page](/packages/vite).\n\n### Change a Web app to use Vite\n\n```bash\nnx g @nrwl/vite:configuration --project=my-app --uiFramework=none\n```\n\nThis will change the `my-app` project to use Vite instead of the existing bundler configuration.\n",
"presets": []
},
"description": "Add Vite configuration to an application.",
"aliases": ["ng-add"],
"hidden": false,
"implementation": "/packages/vite/src/generators/configuration/configuration.ts",
"path": "/packages/vite/src/generators/configuration/schema.json"
},
{
"name": "vitest",
"factory": "./src/generators/vitest/vitest-generator",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "Vitest",
"title": "",
"type": "object",
"description": "Generate a vitest setup for a project.",
"properties": {
"project": {
"type": "string",
"description": "The name of the project to test.",
"$default": { "$source": "projectName" }
},
"uiFramework": {
"type": "string",
"enum": ["react", "none"],
"default": "none",
"description": "UI framework to use with vitest"
},
"inSourceTests": {
"type": "boolean",
"default": false,
"description": "Do not generate separate spec files and set up in-source testing"
},
"skipViteConfig": {
"type": "boolean",
"default": false,
"description": "Skip generating a vite config file"
}
},
"required": ["project"],
"presets": []
},
"description": "Generate a vitest configuration",
"implementation": "/packages/vite/src/generators/vitest/vitest-generator.ts",
"aliases": [],
"hidden": false,
"path": "/packages/vite/src/generators/vitest/schema.json"
}
],
"executors": [
{
"name": "dev-server",
"implementation": "/packages/vite/src/executors/dev-server/dev-server.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Vite Dev Server",
"cli": "nx",
"description": "Dev server for Vite.",
"type": "object",
"presets": [
{ "name": "Default minimum setup", "keys": ["buildTarget"] },
{ "name": "Using a Different Port", "keys": ["buildTarget", "port"] }
],
"properties": {
"buildTarget": {
"type": "string",
"description": "Target which builds the application."
},
"proxyConfig": {
"type": "string",
"description": "Path to the proxy configuration file.",
"x-completion-type": "file"
},
"port": { "type": "number", "description": "Port to listen on." },
"host": {
"description": "Specify which IP addresses the server should listen on.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"https": { "type": "boolean", "description": "Serve using HTTPS." },
"hmr": {
"description": "Enable hot module replacement. For more options, use the 'hmr' option in the Vite configuration file.",
"type": "boolean"
},
"open": {
"description": "Automatically open the app in the browser on server start. When the value is a string, it will be used as the URL's pathname.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"cors": {
"description": "Configure CORS for the dev server.",
"type": "boolean"
},
"logLevel": {
"type": "string",
"description": "Adjust console output verbosity.",
"enum": ["info", "warn", "error", "silent"]
},
"mode": {
"type": "string",
"description": "Mode to run the server in.",
"enum": ["production", "development"]
},
"clearScreen": {
"description": "Set to false to prevent Vite from clearing the terminal screen when logging certain messages.",
"type": "boolean"
}
},
"definitions": {},
"required": ["buildTarget"],
"examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n```bash\nnx serve my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Set up a custom port\" %}\n\nYou can always set the port in your `vite.config.ts` file. However, you can also set it directly in your `project.json` file, in the `serve` target options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"port\": 4200,\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Set a custom path for vite.config.ts\" %}\n\nNx will automatically look in the root of your application for a `vite.config.ts` (or a `vite.config.js`) file. If you want to use a different path, you can set it in your `project.json` file, in the `serve` target options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"configFile\": \"apps/my-app/vite.config.other-path.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\nor even\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"configFile\": \"vite.config.base.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Specify a proxyConfig\" %}\n\nYou can specify a proxy config by pointing to the path of your proxy configuration file:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"proxyConfig\": \"apps/my-app/proxy.conf.json\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Vite dev server.",
"aliases": [],
"hidden": false,
"path": "/packages/vite/src/executors/dev-server/schema.json"
},
{
"name": "build",
"implementation": "/packages/vite/src/executors/build/build.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Vite Prod Builder",
"cli": "nx",
"description": "Build using Vite.",
"type": "object",
"presets": [{ "name": "Default minimum setup", "keys": [] }],
"properties": {
"outputPath": {
"type": "string",
"description": "The output path of the generated files.",
"x-completion-type": "directory"
},
"base": {
"type": "string",
"description": "Base public path when served in development or production.",
"alias": "baseHref"
},
"configFile": {
"type": "string",
"description": "The name of the Vite.js configuration file.",
"x-completion-type": "file",
"x-completion-glob": "vite.config.@(js|ts)"
},
"fileReplacements": {
"description": "Replace files with other files in the build.",
"type": "array",
"items": {
"type": "object",
"properties": {
"replace": {
"type": "string",
"description": "The file to be replaced.",
"x-completion-type": "file"
},
"with": {
"type": "string",
"description": "The file to replace with.",
"x-completion-type": "file"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
},
"default": []
},
"sourcemap": {
"description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"minify": {
"description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"manifest": {
"description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"ssrManifest": {
"description": "When set to true, the build will also generate an SSR manifest for determining style links and asset preload directives in production. When the value is a string, it will be used as the manifest file name.",
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"logLevel": {
"type": "string",
"description": "Adjust console output verbosity.",
"enum": ["info", "warn", "error", "silent"]
},
"mode": {
"type": "string",
"description": "Mode to run the build in.",
"enum": ["production", "development"]
}
},
"definitions": {
"assetPattern": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply 'glob'. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": { "type": "string" }
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
}
},
"required": [],
"examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n //...\n }\n },\n }\n}\n```\n\n```bash\nnx serve my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Set a custom path for vite.config.ts\" %}\n\nNx will automatically look in the root of your application for a `vite.config.ts` (or a `vite.config.js`) file. If you want to use a different path, you can set it in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"apps/my-app/vite.config.other-path.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\nor even\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"vite.config.base.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding assets\" %}\n\nAssets are non-JS and non-TS files, such as images, CSS, etc. You can add them to the project configuration as follows.\n\n```jsonc\n\"serve\": {\n \"executor\": \"@nrwl/vite:build\",\n \"options\": {\n //...\n \"assets\": [\n { \"input\": \"apps/my-app\", \"glob\": \"README.md\", \"output\": \"/\" },\n { \"input\": \"apps/my-app\", \"glob\": \"logo.png\", \"output\": \"/\" },\n { \"input\": \"apps/my-app\", \"glob\": \"docs/**/*.md\", \"output\": \"/docs\" },\n //...\n ]\n }\n}\n```\n\nRunning `nx build my-app` outputs something like this.\n\n```text\ndist/apps/my-app/\n├── README.md\n├── docs\n│ ├── CONTRIBUTING.md\n│ └── TESTING.md\n├── index.js\n├── logo.png\n└── package.json\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Build with Vite.",
"aliases": [],
"hidden": false,
"path": "/packages/vite/src/executors/build/schema.json"
},
{
"name": "test",
"implementation": "/packages/vite/src/executors/test/vitest.impl.ts",
"schema": {
"$schema": "http://json-schema.org/schema",
"version": 2,
"cli": "nx",
"title": "Vitest executor",
"description": "Test using Vitest.",
"type": "object",
"properties": {
"config": {
"type": "string",
"description": "The path to the local vitest config",
"x-completion-type": "file",
"x-completion-glob": "@(vitest|vite).config@(.js|.ts)"
},
"passWithNoTests": {
"type": "boolean",
"default": true,
"description": "Pass the test even if no tests are found"
},
"testNamePattern": {
"type": "string",
"description": "Run tests with full names matching the pattern"
},
"mode": {
"type": "string",
"enum": ["test", "benchmark", "typecheck"],
"default": "test",
"description": "The mode that vitest will run on"
},
"watch": {
"type": "boolean",
"default": false,
"description": "Enable watch mode"
},
"reporters": {
"type": "array",
"items": { "type": "string" },
"description": "An array of reporters to pass to vitest"
},
"update": {
"type": "boolean",
"default": false,
"alias": "u",
"description": "Update snapshots"
},
"coverage": {
"type": "boolean",
"default": false,
"description": "Enable coverage report"
}
},
"required": [],
"examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"test\": {\n \"executor\": \"@nrwl/vite:test\",\n //...\n //...\n \"options\": {\n \"config\": \"apps/my-app/vite.config.ts\"\n }\n //...\n }\n }\n}\n```\n\n```bash\nnx test my-app\n```\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Running in watch mode\" %}\nTo run testing in watch mode, you can create a new configuration within your test target, and have watch set to true. For example:\n\n```json\n\"my-app\": {\n \"targets\": {\n //...\n \"test\": {\n \"executor\": \"@nrwl/vite:test\",\n //...\n //...\n \"options\": {\n \"config\": \"apps/my-app/vite.config.ts\"\n },\n \"configurations\": {\n \"watch\": {\n \"watch\": true\n }\n }\n }\n }\n}\n```\n\nAnd then run `nx run my-app:test:watch`.\n\nAlternatively, you can just run the default test target with the `--watch` flag preset, like so:\n\n```bash\nnx run my-app:test --watch\n```\n\n{% /tab %}\n{% tab label=\"Updating snapshots\" %}\nWhenever a test fails because of an outdated snapshot, you can tell vitest to update them with the following:\n\n```bash\nnx run my-app:test -u\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Test with Vitest",
"aliases": [],
"hidden": false,
"path": "/packages/vite/src/executors/test/schema.json"
}
]
}