feat(bundling): vite generators (#13158)

docs/generated/packages/react.json

@@ -234,9 +234,16 @@
             "type": "boolean",
             "default": false,
             "hidden": true
+          },
+          "bundler": {
+            "description": "The bundler to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "required": [],
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nrwl/react:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nrwl/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "aliases": ["app"],
@@ -1056,6 +1063,12 @@
           "devServerPort": {
             "type": "number",
             "description": "The port for the dev server of the remote app."
+          },
+          "bundler": {
+            "description": "The bundler to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],
@@ -1217,6 +1230,12 @@
           "devServerPort": {
             "type": "number",
             "description": "The port for the dev server of the remote app."
+          },
+          "bundler": {
+            "description": "The bundler to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

docs/generated/packages/web.json

@@ -29,7 +29,7 @@
           "bundler": {
             "type": "string",
             "description": "The bundler to use.",
-            "enum": ["webpack", "none"],
+            "enum": ["webpack", "none", "vite"],
             "default": "webpack"
           },
           "unitTestRunner": {
@@ -119,8 +119,9 @@
           "bundler": {
             "type": "string",
             "description": "The bundler to use.",
-            "enum": ["webpack", "none"],
-            "default": "webpack"
+            "enum": ["webpack", "none", "vite"],
+            "default": "webpack",
+            "x-prompt": "Which bundler do you want to use?"
           },
           "linter": {
             "description": "The tool to use for running lint checks.",
@@ -160,6 +161,7 @@
           }
         },
         "required": [],
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/web:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/web:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory\" %}\n\nCreate an application named `my-app` in the `my-dir` directory:\n\n```bash\nnx g @nrwl/web:app my-app --directory=my-dir\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nrwl/web:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "aliases": ["app"],

docs/packages.json

@@ -371,7 +371,7 @@
     "path": "generated/packages/vite.json",
     "schemas": {
       "executors": ["dev-server", "build", "test"],
-      "generators": ["init"]
+      "generators": ["init", "configuration"]
     }
   },
   {

docs/shared/vite-plugin.md

@@ -59,7 +59,29 @@ nx g @nrwl/vite:init
 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.
 {% /callout %}
 
-## Using Vite.js in your applications
+## 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.
 

e2e/react/src/cypress-component-tests.test.ts

@@ -16,7 +16,9 @@ describe('React Cypress Component Tests', () => {
 
   beforeAll(() => {
     projectName = newProject({ name: uniq('cy-react') });
-    runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:app ${appName} --bundler=webpack --no-interactive`
+    );
     runCLI(
       `generate @nrwl/react:component fancy-cmp --project=${appName} --no-interactive`
     );

e2e/react/src/react.module-federation.test.ts

@@ -25,7 +25,9 @@ describe('React Module Federation', () => {
     const remote2 = uniq('remote2');
     const remote3 = uniq('remote3');
 
-    runCLI(`generate @nrwl/react:host ${shell} --style=css --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:host ${shell} --bundler=webpack --style=css --no-interactive`
+    );
     runCLI(
       `generate @nrwl/react:remote ${remote1} --style=css --host=${shell} --no-interactive`
     );

e2e/react/src/react.test.ts

@@ -28,7 +28,9 @@ describe('React Applications', () => {
     const libName = uniq('lib');
     const libWithNoComponents = uniq('lib');
 
-    runCLI(`generate @nrwl/react:app ${appName} --style=css --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:app ${appName} --style=css --bundler=webpack --no-interactive`
+    );
     runCLI(`generate @nrwl/react:lib ${libName} --style=css --no-interactive`);
     runCLI(
       `generate @nrwl/react:lib ${libWithNoComponents} --no-interactive --no-component`
@@ -63,7 +65,9 @@ describe('React Applications', () => {
   it('should generate app with legacy-ie support', async () => {
     const appName = uniq('app');
 
-    runCLI(`generate @nrwl/react:app ${appName} --style=css --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:app ${appName} --style=css --bundler=webpack --no-interactive`
+    );
 
     // changing browser support of this application
     updateFile(`apps/${appName}/.browserslistrc`, `IE 11`);
@@ -90,7 +94,9 @@ describe('React Applications', () => {
     const appName = uniq('app');
     const libName = uniq('lib');
 
-    runCLI(`generate @nrwl/react:app ${appName} --no-interactive --js`);
+    runCLI(
+      `generate @nrwl/react:app ${appName} --bundler=webpack --no-interactive --js`
+    );
     runCLI(`generate @nrwl/react:lib ${libName} --no-interactive --js`);
 
     const mainPath = `apps/${appName}/src/main.js`;
@@ -173,7 +179,7 @@ describe('React Applications: --style option', () => {
   `('should support global and css modules', ({ style }) => {
     const appName = uniq('app');
     runCLI(
-      `generate @nrwl/react:app ${appName} --style=${style} --no-interactive`
+      `generate @nrwl/react:app ${appName} --style=${style} --bundler=webpack --no-interactive`
     );
 
     // make sure stylePreprocessorOptions works
@@ -210,7 +216,9 @@ describe('React Applications: additional packages', () => {
   it('should generate app with routing', async () => {
     const appName = uniq('app');
 
-    runCLI(`generate @nrwl/react:app ${appName} --routing --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:app ${appName} --routing --bundler=webpack --no-interactive`
+    );
 
     runCLI(`build ${appName} --outputHashing none`);
 
@@ -226,7 +234,7 @@ describe('React Applications: additional packages', () => {
     const appName = uniq('app');
     const libName = uniq('lib');
 
-    runCLI(`g @nrwl/react:app ${appName} --no-interactive`);
+    runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
     runCLI(`g @nrwl/react:redux lemon --project=${appName}`);
     runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
     runCLI(`g @nrwl/react:redux orange --project=${libName}`);
@@ -252,7 +260,7 @@ describe('React Applications and Libs with PostCSS', () => {
     const appName = uniq('app');
     const libName = uniq('lib');
 
-    runCLI(`g @nrwl/react:app ${appName} --no-interactive`);
+    runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
     runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
 
     const mainPath = `apps/${appName}/src/main.tsx`;