From e50c8ccc41488245fdda34b41bac135d6cc32589 Mon Sep 17 00:00:00 2001
From: Katerina Skroumpelou <mandarini@users.noreply.github.com>
Date: Thu, 22 Dec 2022 22:05:31 +0200
Subject: [PATCH] docs(vite): enhancing vite docs (#13984)

---
 docs/generated/manifests/menus.json           |   8 +
 docs/generated/manifests/packages.json        |  15 +-
 docs/generated/packages-metadata.json         |  15 +-
 .../packages/vite/documents/overview.md       | 331 +++---------------
 .../vite/documents/set-up-vite-manually.md    | 276 +++++++++++++++
 .../vite/generators/configuration.json        |  10 +-
 .../packages/vite/generators/init.json        |   2 +-
 docs/map.json                                 |   6 +
 .../packages/vite/set-up-vite-manually.md     | 276 +++++++++++++++
 docs/shared/packages/vite/vite-plugin.md      | 331 +++---------------
 packages/vite/docs/configuration-examples.md  |  76 +++-
 packages/vite/docs/init-examples.md           |  12 +-
 packages/vite/generators.json                 |   6 +-
 packages/vite/package.json                    |   2 +-
 .../src/generators/configuration/schema.json  |   6 +-
 15 files changed, 763 insertions(+), 609 deletions(-)
 create mode 100644 docs/generated/packages/vite/documents/set-up-vite-manually.md
 create mode 100644 docs/shared/packages/vite/set-up-vite-manually.md

diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
index 840d94125f..05f47e0eac 100644
--- a/docs/generated/manifests/menus.json
+++ b/docs/generated/manifests/menus.json
@@ -5911,6 +5911,14 @@
                 "isExternal": false,
                 "children": [],
                 "disableCollapsible": false
+              },
+              {
+                "name": "Manually set up your project to use Vite.js",
+                "path": "/packages/vite/documents/set-up-vite-manually",
+                "id": "set-up-vite-manually",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
               }
             ],
             "isExternal": false,
diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json
index 4866cb9a63..6f57880294 100644
--- a/docs/generated/manifests/packages.json
+++ b/docs/generated/manifests/packages.json
@@ -2579,18 +2579,29 @@
     "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)",
+    "description": "The Nx Plugin for building and testing applications using Vite",
     "documents": {
       "/packages/vite/documents/overview": {
         "id": "overview",
         "name": "Overview",
-        "description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
+        "description": "The Nx Plugin for building and testing applications using Vite",
         "file": "generated/packages/vite/documents/overview",
         "itemList": [],
         "isExternal": false,
         "path": "/packages/vite/documents/overview",
         "tags": [],
         "originalFilePath": "shared/packages/vite/vite-plugin"
+      },
+      "/packages/vite/documents/set-up-vite-manually": {
+        "id": "set-up-vite-manually",
+        "name": "Manually set up your project to use Vite.js",
+        "description": "Manually set up your project to use Vite.js",
+        "file": "generated/packages/vite/documents/set-up-vite-manually",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/packages/vite/documents/set-up-vite-manually",
+        "tags": [],
+        "originalFilePath": "shared/packages/vite/set-up-vite-manually"
       }
     },
     "root": "/packages/vite",
diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json
index d68bfecf7c..ac4c0e486d 100644
--- a/docs/generated/packages-metadata.json
+++ b/docs/generated/packages-metadata.json
@@ -2550,18 +2550,29 @@
     "source": "/packages/tao/src"
   },
   {
-    "description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
+    "description": "The Nx Plugin for building and testing applications using Vite",
     "documents": [
       {
         "id": "overview",
         "name": "Overview",
-        "description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
+        "description": "The Nx Plugin for building and testing applications using Vite",
         "file": "generated/packages/vite/documents/overview",
         "itemList": [],
         "isExternal": false,
         "path": "vite/documents/overview",
         "tags": [],
         "originalFilePath": "shared/packages/vite/vite-plugin"
+      },
+      {
+        "id": "set-up-vite-manually",
+        "name": "Manually set up your project to use Vite.js",
+        "description": "Manually set up your project to use Vite.js",
+        "file": "generated/packages/vite/documents/set-up-vite-manually",
+        "itemList": [],
+        "isExternal": false,
+        "path": "vite/documents/set-up-vite-manually",
+        "tags": [],
+        "originalFilePath": "shared/packages/vite/set-up-vite-manually"
       }
     ],
     "executors": [
diff --git a/docs/generated/packages/vite/documents/overview.md b/docs/generated/packages/vite/documents/overview.md
index 838a578e08..a4c8b8d267 100644
--- a/docs/generated/packages/vite/documents/overview.md
+++ b/docs/generated/packages/vite/documents/overview.md
@@ -11,7 +11,7 @@ Why should you use this plugin?
 
 Read more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).
 
-## Setting up Vite
+## Setting up a new Nx workspace with Vite
 
 You can create a new workspace that uses Vite with one of the following commands:
 
@@ -27,9 +27,43 @@ npx create-nx-workspace@latest --preset=web-components
 npx create-nx-workspace@latest --preset=react-standalone
 ```
 
-### Add Vite to an existing workspace
+## Add Vite to an existing workspace
 
-To add the Vite plugin to an existing workspace, run the following:
+There is a number of ways to use Vite in your existing workspace.
+
+### Generate a new project using Vite
+
+You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Vite.js. The [`@nrwl/react:app`](/packages/react/generators/application), [`@nrwl/react:lib`](/packages/react/generators/library) and [`@nrwl/web:app`](/packages/web/generators/application) 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, including the `@nrwl/vite` plugin.
+
+To generate a React application using Vite.js, run the following:
+
+```bash
+nx g @nrwl/react:app my-app --bundler=vite
+```
+
+To generate a React library using Vite.js, run the following:
+
+```bash
+nx g @nrwl/react:lib my-lib --bundler=vite
+```
+
+To generate a Web application using Vite.js, run the following:
+
+```bash
+nx g @nrwl/web:app my-app --bundler=vite
+```
+
+### Modify an existing React or Web project to use Vite.js
+
+You can use the `@nrwl/vite:configuration` generator to change your React or Web project to use Vite.js. This generator will modify your project's configuration to use Vite.js, and it will also install all the necessary dependencies, including the `@nrwl/vite` plugin..
+
+You can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.
+
+### Initialize Vite.js
+
+If you do not want to create any new projects or convert any existing projects yet, you can still use Nx to install all the necessary dependencies for Vite.js. This, for example, could be useful if you want to set up Vite.js manually for a project.
+
+#### Install the `@nrwl/vite` plugin
 
 {% tabs %}
 {% tab label="npm" %}
@@ -55,299 +89,14 @@ pnpm install -D @nrwl/vite
 {% /tab %}
 {% /tabs %}
 
-### Initialize Vite.js
+#### Ask Nx to install the necessary dependencies
 
-After 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.
+After you install the plugin, you can initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.
 
 ```bash
 nx g @nrwl/vite:init
 ```
 
 {% callout type="note" title="Choosing a framework" %}
-You 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.
+You will notice that the generator 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.
 {% /callout %}
-
-## Generate an application using Vite
-
-You 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.
-
-To generate a React application using Vite.js, run the following:
-
-```bash
-nx g @nrwl/react:app my-app --bundler=vite
-```
-
-To generate a Web application using Vite.js, run the following:
-
-```bash
-nx g @nrwl/web:app my-app --bundler=vite
-```
-
-## Modify an existing React or Web application to use Vite.js
-
-You 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.
-
-You can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.
-
-## Set up your apps to use Vite.js manually
-
-You 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.
-
-{% github-repository url="https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example" /%}
-
-### 1. Change the executors in your `project.json`
-
-#### The `serve` target
-
-In 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:
-
-```json
-//...
-"my-app": {
-    "targets": {
-        //...
-        "serve": {
-            "executor": "@nrwl/vite:dev-server",
-            "defaultConfiguration": "development",
-            "options": {
-                "buildTarget": "my-app:build",
-                "port": 4200,
-            },
-            "configurations": {
-                ...
-            }
-        },
-    }
-}
-```
-
-{% callout type="note" title="Other options" %}
-You 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).
-The 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.
-{% /callout %}
-
-#### The `build` target
-
-In 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:
-
-```json
-//...
-"my-app": {
-    "targets": {
-        //...
-        "build": {
-        "executor": "@nrwl/vite:build",
-        ...
-        "options": {
-            "outputPath": "dist/apps/my-app"
-        },
-        "configurations": {
-                ...
-            }
-        },
-    }
-}
-```
-
-{% callout type="note" title="Other options" %}
-You can specify more options in the `vite.config.ts` file (see **Step 2** below).
-{% /callout %}
-
-### 2. Configure Vite.js
-
-#### TypeScript paths
-
-You 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.
-
-#### React plugin
-
-If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).
-
-#### How your `vite.config.ts` looks like
-
-Add 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.
-
-```ts
-// e.g. apps/my-app/vite.config.ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    ViteTsConfigPathsPlugin({
-      root: '../../',
-    }),
-  ],
-});
-```
-
-{% callout type="note" title="The `root` path" %}
-Make sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.
-{% /callout %}
-
-In 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/).
-
-#### Creating a root `vite.config.ts` file
-
-You 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/).
-
-The root `vite.config.ts` file can be used for all applications, and you can place in here 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 (e.g. 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.
-
-So, if you are using a root `vite.config.ts` file, you should adjust your code as follows:
-
-```ts
-// <workspace-root>vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  plugins: [],
-});
-```
-
-and then in your app's `vite.config.ts` file:
-
-```ts
-// e.g. apps/my-app/vite.config.ts
-import { mergeConfig } from 'vite';
-import baseConfig from '../../vite.config';
-import react from '@vitejs/plugin-react';
-import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
-
-export default mergeConfig(baseConfig, {
-  plugins: [
-    react(),
-    ViteTsConfigPathsPlugin({
-      root: '../../',
-    }),
-  ],
-});
-```
-
-### 3. Move `index.html` and point it to your app's entrypoint
-
-First of all, move your `index.html` file to the root of your app (e.g. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).
-
-Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
-
-```html
-...
-  <body>
-    <div id="root"></div>
-    <script type="module" src="src/main.tsx"></script>
-  </body>
-</html>
-```
-
-### 4. Add a `public` folder
-
-You 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).
-
-```treeview
-myorg/
-├── apps/
-│   ├── my-app/
-│   │   ├── src/
-│   │   │   ├── app/
-│   │   │   ├── assets/
-│   │   │   ├── ...
-│   │   │   └── main.tsx
-│   │   ├── index.html
-│   │   ├── public/
-| . | . |   ├── favicon.ico
-│   │   │   └── my-page.md
-│   │   ├── project.json
-│   │   ├── ...
-│   │   ├── tsconfig.app.json
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-```
-
-You can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.
-
-### 5. Adjust your app's tsconfig.json
-
-Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:
-
-#### For React apps
-
-```json
-...
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "ESNext",
-    "types": ["vite/client"],
-    "useDefineForClassFields": true
-  },
-...
-```
-
-#### For Web apps
-
-```json
-...
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "types": ["vite/client"]
-  },
-  "include": ["src"],
-...
-```
-
-You can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).
-
-### 6. Use Vite.js!
-
-Now you can finally serve and build your app using Vite.js:
-
-#### Serve the app
-
-```
-nx serve my-app
-```
-
-or
-
-```
-nx run my-app:serve
-```
-
-Now, visit [http://localhost:4200](http://localhost:4200) to see your app running!
-
-#### Build the app
-
-```
-nx build my-app
-```
-
-or
-
-```
-nx run my-app:build
-```
diff --git a/docs/generated/packages/vite/documents/set-up-vite-manually.md b/docs/generated/packages/vite/documents/set-up-vite-manually.md
new file mode 100644
index 0000000000..5981f94837
--- /dev/null
+++ b/docs/generated/packages/vite/documents/set-up-vite-manually.md
@@ -0,0 +1,276 @@
+# Manually set up your project to use Vite.js
+
+{% callout type="note" title="Use our generator!" %}
+It is recommended that you use the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
+{% /callout %}
+
+You can use the `@nrwl/vite:dev-server`,`@nrwl/vite:build` and `@nrwl/vite:test` executors to serve, build and test your project using [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). To do this, you need to make a few adjustments to your project. It is recommended that you use the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator to do this, but you can also do it manually.
+
+A reason you may need to do this manually, is if our generator does not support conversion for your project, or if you want to experiment with custom options.
+
+The list of steps below assumes that your project can be converted to use the `@nrwl/vite` executors. However, if it's not supported by the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator, it's likely that your project will not work as expected when converted. So, proceed with caution and always commit your code before making any changes.
+
+## 1. Change the executors in your `project.json`
+
+### The `serve` target
+
+This applies to applications, not libraries.
+
+In 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:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "serve": {
+            "executor": "@nrwl/vite:dev-server",
+            "defaultConfiguration": "development",
+            "options": {
+                "buildTarget": "my-app:build",
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+{% callout type="note" title="Other options" %}
+Any extra options that you may need to add to your server's configuration can be added in your project's `vite.config.ts` file. You can find all the options that are supported in the [Vite.js documentation](https://vitejs.dev/config/). You can see which of these options you can add in your `project.json` in the [`@nrwl/vite:dev-server`](/packages/vite/executors/dev-server#options) documentation.
+{% /callout %}
+
+### The `build` target
+
+In your project's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+        "executor": "@nrwl/vite:build",
+        ...
+        "options": {
+            "outputPath": "dist/apps/my-app"
+        },
+        "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+{% callout type="note" title="Other options" %}
+You can specify more options in the `vite.config.ts` file (see **Step 2** below).
+{% /callout %}
+
+## 2. Configure Vite.js
+
+### TypeScript paths
+
+You 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.
+
+### React plugin
+
+If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).
+
+### How your `vite.config.ts` looks like
+
+Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course.
+
+```ts
+// e.g. apps/my-app/vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    ViteTsConfigPathsPlugin({
+      root: '../../',
+    }),
+  ],
+});
+```
+
+If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join } from 'path';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'pure-libs-rlv1',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
+```
+
+{% callout type="note" title="The `root` path" %}
+Make sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.
+{% /callout %}
+
+In 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/).
+
+## 3. Move `index.html` and point it to your app's entrypoint
+
+This applies to applications, not libraries.
+
+First of all, move your `index.html` file to the root of your app (e.g. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).
+
+Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
+
+```html
+...
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+  </body>
+</html>
+```
+
+## 4. Add a `public` folder
+
+You can add a `public` folder to the root of your project. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory).
+
+```treeview
+myorg/
+├── apps/
+│   ├── my-app/
+│   │   ├── src/
+│   │   │   ├── app/
+│   │   │   ├── assets/
+│   │   │   ├── ...
+│   │   │   └── main.tsx
+│   │   ├── index.html
+│   │   ├── public/
+| . | . |   ├── favicon.ico
+│   │   │   └── my-page.md
+│   │   ├── project.json
+│   │   ├── ...
+│   │   ├── tsconfig.app.json
+│   │   ├── tsconfig.json
+│   │   └── tsconfig.spec.json
+```
+
+You can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.
+
+## 5. Adjust your project's tsconfig.json
+
+Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:
+
+### For React apps
+
+```json
+...
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "types": ["vite/client"],
+    "useDefineForClassFields": true
+  },
+...
+```
+
+### For Web apps
+
+```json
+...
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+...
+```
+
+You can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).
+
+## 6. Use Vite.js
+
+Now you can finally serve and build your app using Vite.js:
+
+### Serve the app
+
+```bash
+nx serve my-app
+```
+
+or
+
+```bash
+nx run my-app:serve
+```
+
+Now, visit [http://localhost:4200](http://localhost:4200) to see your app running!
+
+### Build the app
+
+```bash
+nx build my-app
+```
+
+or
+
+```bash
+nx run my-app:build
+```
diff --git a/docs/generated/packages/vite/generators/configuration.json b/docs/generated/packages/vite/generators/configuration.json
index 9b9ab7e0dc..d997de7994 100644
--- a/docs/generated/packages/vite/generators/configuration.json
+++ b/docs/generated/packages/vite/generators/configuration.json
@@ -3,9 +3,9 @@
   "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",
+    "title": "Configure a project to use Vite.js.",
+    "description": "Configure a project to use Vite.js.",
+    "$id": "configure-vite-project",
     "type": "object",
     "properties": {
       "project": {
@@ -51,11 +51,11 @@
         "description": "The test target of the project to be transformed to use the @nrwl/vite:test executor."
       }
     },
-    "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",
+    "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",
     "presets": []
   },
   "description": "Add Vite configuration to an application.",
-  "aliases": ["ng-add"],
+  "aliases": ["config"],
   "hidden": false,
   "implementation": "/packages/vite/src/generators/configuration/configuration.ts",
   "path": "/packages/vite/src/generators/configuration/schema.json",
diff --git a/docs/generated/packages/vite/generators/init.json b/docs/generated/packages/vite/generators/init.json
index 22a94666bf..c736b617d2 100644
--- a/docs/generated/packages/vite/generators/init.json
+++ b/docs/generated/packages/vite/generators/init.json
@@ -21,7 +21,7 @@
         "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",
+    "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\n{% callout type=\"note\" title=\"string\" %}\nYou don't need to use this generator on its own.\n{% /callout %}\n\nThis generator will be called automatically 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\nIf you need to for some reason, you can use it on its own like this:\n\n```bash\nnx g @nrwl/vite:init\n```\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.",
diff --git a/docs/map.json b/docs/map.json
index 18ca0f74e2..ce32360f7a 100644
--- a/docs/map.json
+++ b/docs/map.json
@@ -1555,6 +1555,12 @@
               "id": "overview",
               "path": "/packages/vite",
               "file": "shared/packages/vite/vite-plugin"
+            },
+            {
+              "name": "Manually set up your project to use Vite.js",
+              "id": "set-up-vite-manually",
+              "description": "Manually set up your project to use Vite.js",
+              "file": "shared/packages/vite/set-up-vite-manually"
             }
           ]
         },
diff --git a/docs/shared/packages/vite/set-up-vite-manually.md b/docs/shared/packages/vite/set-up-vite-manually.md
new file mode 100644
index 0000000000..5981f94837
--- /dev/null
+++ b/docs/shared/packages/vite/set-up-vite-manually.md
@@ -0,0 +1,276 @@
+# Manually set up your project to use Vite.js
+
+{% callout type="note" title="Use our generator!" %}
+It is recommended that you use the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
+{% /callout %}
+
+You can use the `@nrwl/vite:dev-server`,`@nrwl/vite:build` and `@nrwl/vite:test` executors to serve, build and test your project using [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). To do this, you need to make a few adjustments to your project. It is recommended that you use the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator to do this, but you can also do it manually.
+
+A reason you may need to do this manually, is if our generator does not support conversion for your project, or if you want to experiment with custom options.
+
+The list of steps below assumes that your project can be converted to use the `@nrwl/vite` executors. However, if it's not supported by the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator, it's likely that your project will not work as expected when converted. So, proceed with caution and always commit your code before making any changes.
+
+## 1. Change the executors in your `project.json`
+
+### The `serve` target
+
+This applies to applications, not libraries.
+
+In 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:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "serve": {
+            "executor": "@nrwl/vite:dev-server",
+            "defaultConfiguration": "development",
+            "options": {
+                "buildTarget": "my-app:build",
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+{% callout type="note" title="Other options" %}
+Any extra options that you may need to add to your server's configuration can be added in your project's `vite.config.ts` file. You can find all the options that are supported in the [Vite.js documentation](https://vitejs.dev/config/). You can see which of these options you can add in your `project.json` in the [`@nrwl/vite:dev-server`](/packages/vite/executors/dev-server#options) documentation.
+{% /callout %}
+
+### The `build` target
+
+In your project's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+        "executor": "@nrwl/vite:build",
+        ...
+        "options": {
+            "outputPath": "dist/apps/my-app"
+        },
+        "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+{% callout type="note" title="Other options" %}
+You can specify more options in the `vite.config.ts` file (see **Step 2** below).
+{% /callout %}
+
+## 2. Configure Vite.js
+
+### TypeScript paths
+
+You 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.
+
+### React plugin
+
+If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).
+
+### How your `vite.config.ts` looks like
+
+Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course.
+
+```ts
+// e.g. apps/my-app/vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    ViteTsConfigPathsPlugin({
+      root: '../../',
+    }),
+  ],
+});
+```
+
+If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join } from 'path';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'pure-libs-rlv1',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
+```
+
+{% callout type="note" title="The `root` path" %}
+Make sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.
+{% /callout %}
+
+In 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/).
+
+## 3. Move `index.html` and point it to your app's entrypoint
+
+This applies to applications, not libraries.
+
+First of all, move your `index.html` file to the root of your app (e.g. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).
+
+Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
+
+```html
+...
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+  </body>
+</html>
+```
+
+## 4. Add a `public` folder
+
+You can add a `public` folder to the root of your project. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory).
+
+```treeview
+myorg/
+├── apps/
+│   ├── my-app/
+│   │   ├── src/
+│   │   │   ├── app/
+│   │   │   ├── assets/
+│   │   │   ├── ...
+│   │   │   └── main.tsx
+│   │   ├── index.html
+│   │   ├── public/
+| . | . |   ├── favicon.ico
+│   │   │   └── my-page.md
+│   │   ├── project.json
+│   │   ├── ...
+│   │   ├── tsconfig.app.json
+│   │   ├── tsconfig.json
+│   │   └── tsconfig.spec.json
+```
+
+You can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.
+
+## 5. Adjust your project's tsconfig.json
+
+Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:
+
+### For React apps
+
+```json
+...
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "types": ["vite/client"],
+    "useDefineForClassFields": true
+  },
+...
+```
+
+### For Web apps
+
+```json
+...
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+...
+```
+
+You can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).
+
+## 6. Use Vite.js
+
+Now you can finally serve and build your app using Vite.js:
+
+### Serve the app
+
+```bash
+nx serve my-app
+```
+
+or
+
+```bash
+nx run my-app:serve
+```
+
+Now, visit [http://localhost:4200](http://localhost:4200) to see your app running!
+
+### Build the app
+
+```bash
+nx build my-app
+```
+
+or
+
+```bash
+nx run my-app:build
+```
diff --git a/docs/shared/packages/vite/vite-plugin.md b/docs/shared/packages/vite/vite-plugin.md
index 838a578e08..a4c8b8d267 100644
--- a/docs/shared/packages/vite/vite-plugin.md
+++ b/docs/shared/packages/vite/vite-plugin.md
@@ -11,7 +11,7 @@ Why should you use this plugin?
 
 Read more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).
 
-## Setting up Vite
+## Setting up a new Nx workspace with Vite
 
 You can create a new workspace that uses Vite with one of the following commands:
 
@@ -27,9 +27,43 @@ npx create-nx-workspace@latest --preset=web-components
 npx create-nx-workspace@latest --preset=react-standalone
 ```
 
-### Add Vite to an existing workspace
+## Add Vite to an existing workspace
 
-To add the Vite plugin to an existing workspace, run the following:
+There is a number of ways to use Vite in your existing workspace.
+
+### Generate a new project using Vite
+
+You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Vite.js. The [`@nrwl/react:app`](/packages/react/generators/application), [`@nrwl/react:lib`](/packages/react/generators/library) and [`@nrwl/web:app`](/packages/web/generators/application) 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, including the `@nrwl/vite` plugin.
+
+To generate a React application using Vite.js, run the following:
+
+```bash
+nx g @nrwl/react:app my-app --bundler=vite
+```
+
+To generate a React library using Vite.js, run the following:
+
+```bash
+nx g @nrwl/react:lib my-lib --bundler=vite
+```
+
+To generate a Web application using Vite.js, run the following:
+
+```bash
+nx g @nrwl/web:app my-app --bundler=vite
+```
+
+### Modify an existing React or Web project to use Vite.js
+
+You can use the `@nrwl/vite:configuration` generator to change your React or Web project to use Vite.js. This generator will modify your project's configuration to use Vite.js, and it will also install all the necessary dependencies, including the `@nrwl/vite` plugin..
+
+You can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.
+
+### Initialize Vite.js
+
+If you do not want to create any new projects or convert any existing projects yet, you can still use Nx to install all the necessary dependencies for Vite.js. This, for example, could be useful if you want to set up Vite.js manually for a project.
+
+#### Install the `@nrwl/vite` plugin
 
 {% tabs %}
 {% tab label="npm" %}
@@ -55,299 +89,14 @@ pnpm install -D @nrwl/vite
 {% /tab %}
 {% /tabs %}
 
-### Initialize Vite.js
+#### Ask Nx to install the necessary dependencies
 
-After 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.
+After you install the plugin, you can initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.
 
 ```bash
 nx g @nrwl/vite:init
 ```
 
 {% callout type="note" title="Choosing a framework" %}
-You 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.
+You will notice that the generator 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.
 {% /callout %}
-
-## Generate an application using Vite
-
-You 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.
-
-To generate a React application using Vite.js, run the following:
-
-```bash
-nx g @nrwl/react:app my-app --bundler=vite
-```
-
-To generate a Web application using Vite.js, run the following:
-
-```bash
-nx g @nrwl/web:app my-app --bundler=vite
-```
-
-## Modify an existing React or Web application to use Vite.js
-
-You 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.
-
-You can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.
-
-## Set up your apps to use Vite.js manually
-
-You 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.
-
-{% github-repository url="https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example" /%}
-
-### 1. Change the executors in your `project.json`
-
-#### The `serve` target
-
-In 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:
-
-```json
-//...
-"my-app": {
-    "targets": {
-        //...
-        "serve": {
-            "executor": "@nrwl/vite:dev-server",
-            "defaultConfiguration": "development",
-            "options": {
-                "buildTarget": "my-app:build",
-                "port": 4200,
-            },
-            "configurations": {
-                ...
-            }
-        },
-    }
-}
-```
-
-{% callout type="note" title="Other options" %}
-You 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).
-The 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.
-{% /callout %}
-
-#### The `build` target
-
-In 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:
-
-```json
-//...
-"my-app": {
-    "targets": {
-        //...
-        "build": {
-        "executor": "@nrwl/vite:build",
-        ...
-        "options": {
-            "outputPath": "dist/apps/my-app"
-        },
-        "configurations": {
-                ...
-            }
-        },
-    }
-}
-```
-
-{% callout type="note" title="Other options" %}
-You can specify more options in the `vite.config.ts` file (see **Step 2** below).
-{% /callout %}
-
-### 2. Configure Vite.js
-
-#### TypeScript paths
-
-You 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.
-
-#### React plugin
-
-If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).
-
-#### How your `vite.config.ts` looks like
-
-Add 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.
-
-```ts
-// e.g. apps/my-app/vite.config.ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    ViteTsConfigPathsPlugin({
-      root: '../../',
-    }),
-  ],
-});
-```
-
-{% callout type="note" title="The `root` path" %}
-Make sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.
-{% /callout %}
-
-In 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/).
-
-#### Creating a root `vite.config.ts` file
-
-You 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/).
-
-The root `vite.config.ts` file can be used for all applications, and you can place in here 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 (e.g. 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.
-
-So, if you are using a root `vite.config.ts` file, you should adjust your code as follows:
-
-```ts
-// <workspace-root>vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  plugins: [],
-});
-```
-
-and then in your app's `vite.config.ts` file:
-
-```ts
-// e.g. apps/my-app/vite.config.ts
-import { mergeConfig } from 'vite';
-import baseConfig from '../../vite.config';
-import react from '@vitejs/plugin-react';
-import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
-
-export default mergeConfig(baseConfig, {
-  plugins: [
-    react(),
-    ViteTsConfigPathsPlugin({
-      root: '../../',
-    }),
-  ],
-});
-```
-
-### 3. Move `index.html` and point it to your app's entrypoint
-
-First of all, move your `index.html` file to the root of your app (e.g. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).
-
-Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
-
-```html
-...
-  <body>
-    <div id="root"></div>
-    <script type="module" src="src/main.tsx"></script>
-  </body>
-</html>
-```
-
-### 4. Add a `public` folder
-
-You 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).
-
-```treeview
-myorg/
-├── apps/
-│   ├── my-app/
-│   │   ├── src/
-│   │   │   ├── app/
-│   │   │   ├── assets/
-│   │   │   ├── ...
-│   │   │   └── main.tsx
-│   │   ├── index.html
-│   │   ├── public/
-| . | . |   ├── favicon.ico
-│   │   │   └── my-page.md
-│   │   ├── project.json
-│   │   ├── ...
-│   │   ├── tsconfig.app.json
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-```
-
-You can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.
-
-### 5. Adjust your app's tsconfig.json
-
-Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:
-
-#### For React apps
-
-```json
-...
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "ESNext",
-    "types": ["vite/client"],
-    "useDefineForClassFields": true
-  },
-...
-```
-
-#### For Web apps
-
-```json
-...
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "types": ["vite/client"]
-  },
-  "include": ["src"],
-...
-```
-
-You can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).
-
-### 6. Use Vite.js!
-
-Now you can finally serve and build your app using Vite.js:
-
-#### Serve the app
-
-```
-nx serve my-app
-```
-
-or
-
-```
-nx run my-app:serve
-```
-
-Now, visit [http://localhost:4200](http://localhost:4200) to see your app running!
-
-#### Build the app
-
-```
-nx build my-app
-```
-
-or
-
-```
-nx run my-app:build
-```
diff --git a/packages/vite/docs/configuration-examples.md b/packages/vite/docs/configuration-examples.md
index 087a36f4e9..f8ed1066a0 100644
--- a/packages/vite/docs/configuration-examples.md
+++ b/packages/vite/docs/configuration-examples.md
@@ -1,4 +1,10 @@
-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.
+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).
+
+It 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.
+
+{% callout type="caution" title="Your code will be modified!" %}
+This generator will modify your code, so make sure to commit your changes before running it.
+{% /callout %}
 
 ```bash
 nx g @nrwl/vite:configuration
@@ -11,22 +17,80 @@ When running this generator, you will be prompted to provide the following:
 
 You must provide a `project` and a `uiFramework` for the generator to work.
 
-You can read more about how this generator works, in the [Vite package overview page](/packages/vite).
+You 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.
+
+## Converting custom (specific) targets
+
+By 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.
+
+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.
+
+## Projects that can be converted to use the `@nrwl/vite` executors
+
+Usually, 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.
+
+The list of executors for building, testing and serving that can be converted to use the `@nrwl/vite` executors is:
+
+### Supported `build` executors
+
+- `@nxext/vite:build`
+- `@nrwl/js:babel`
+- `@nrwl/js:swc`
+- `@nrwl/webpack:webpack`
+- `@nrwl/rollup:rollup`
+- `@nrwl/web:rollup`
+
+### Supported `serve` exeutors
+
+- `@nxext/vite:dev`
+- `@nrwl/webpack:dev-server`
+
+### Supported `test` executors
+
+- `@nrwl/jest:jest`
+- `@nxext/vitest:vitest`
+
+### Unsupported executors
+
+We 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.
+
+- `@nrwl/angular:ng-packagr-lite`
+- `@nrwl/angular:package`
+- `@nrwl/angular:webpack-browser`
+- `@angular-devkit/build-angular:browser`
+- `@angular-devkit/build-angular:dev-server`
+- `@nrwl/esbuild:esbuild`
+- `@nrwl/react-native:start`
+- `@nrwl/next:build`
+- `@nrwl/next:server`
+- `@nrwl/js:tsc`
+
+You can read more in the [Vite package overview page](/packages/vite).
 
 ## Examples
 
 ### Change a React app to use Vite
 
 ```bash
-nx g @nrwl/vite:configuration --project=my-app --uiFramework=react
+nx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest
 ```
 
-This 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).
+This will change the `my-react-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.
 
 ### Change a Web app to use Vite
 
 ```bash
-nx g @nrwl/vite:configuration --project=my-app --uiFramework=none
+nx g @nrwl/vite:configuration --project=my-web-app --uiFramework=none --includeVitest
 ```
 
-This will change the `my-app` project to use Vite instead of the existing bundler configuration.
+This will change the `my-web-app` project to use the `@nrwl/vite` executors for building, serving and testing the application.
+
+### Change only my custom provided targets to use Vite
+
+```bash
+nx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest --buildTarget=my-build --serveTarget=my-serve --testTarget=my-test
+```
+
+This 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.
diff --git a/packages/vite/docs/init-examples.md b/packages/vite/docs/init-examples.md
index c830ae2242..47fe7f5b08 100644
--- a/packages/vite/docs/init-examples.md
+++ b/packages/vite/docs/init-examples.md
@@ -1,13 +1,17 @@
 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).
 
-You can use it on its own like this:
+{% callout type="note" title="string" %}
+You don't need to use this generator on its own.
+{% /callout %}
+
+This generator will be called automatically 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`.
+
+If you need to for some reason, you can use it on its own like this:
 
 ```bash
-nx g @nrwl/vite:configuration
+nx g @nrwl/vite:init
 ```
 
-However, 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`.
-
 ## Examples
 
 ### Install all the necessary dependencies for Vite and the React plugin
diff --git a/packages/vite/generators.json b/packages/vite/generators.json
index 1e259477bb..e268573ad5 100644
--- a/packages/vite/generators.json
+++ b/packages/vite/generators.json
@@ -12,8 +12,8 @@
     "configuration": {
       "factory": "./src/generators/configuration/configuration#configurationSchematic",
       "schema": "./src/generators/configuration/schema.json",
-      "description": "Add Vite configuration to an application.",
-      "aliases": ["ng-add"],
+      "description": "Configure a project to use Vite.js.",
+      "aliases": ["config"],
       "hidden": false
     },
     "vitest": {
@@ -34,7 +34,7 @@
       "factory": "./src/generators/configuration/configuration",
       "schema": "./src/generators/configuration/schema.json",
       "description": "Add Vite configuration to an application.",
-      "aliases": ["ng-add"],
+      "aliases": ["config"],
       "hidden": false
     },
     "vitest": {
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 673a4c2fa9..3c44b79ad6 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -2,7 +2,7 @@
   "name": "@nrwl/vite",
   "version": "0.0.1",
   "private": false,
-  "description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
+  "description": "The Nx Plugin for building and testing applications using Vite",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",
diff --git a/packages/vite/src/generators/configuration/schema.json b/packages/vite/src/generators/configuration/schema.json
index 3117632fed..11abb030d7 100644
--- a/packages/vite/src/generators/configuration/schema.json
+++ b/packages/vite/src/generators/configuration/schema.json
@@ -1,8 +1,8 @@
 {
   "cli": "nx",
-  "title": "Add Vite Configuration to an application.",
-  "description": "Add Vite Configuration to an application.",
-  "$id": "configure-vite-app",
+  "title": "Configure a project to use Vite.js.",
+  "description": "Configure a project to use Vite.js.",
+  "$id": "configure-vite-project",
   "type": "object",
   "properties": {
     "project": {