react.json

{
  "githubRoot": "https://github.com/nrwl/nx/blob/master",
  "name": "react",
  "packageName": "@nrwl/react",
  "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
  "root": "/packages/react",
  "source": "/packages/react/src",
  "documentation": [
    {
      "name": "Overview",
      "id": "overview",
      "path": "/packages/react",
      "file": "shared/react-plugin",
      "content": "The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace.\nIt provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Generators for applications, libraries, components, hooks, and more.\n- Library build support for publishing packages to npm or other registries.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React\n\nTo create a new workspace with React, run `npx create-nx-workspace@latest --preset=react`.\n\nTo add the React plugin to an existing workspace, run one of the following:\n\n```shell\n# For npm users\nnpm install -D @nrwl/react\n\n# For yarn users\nyarn add -D @nrwl/react\n```\n\n### Creating Applications and Libraries\n\nYou can add a new application with the following:\n\n```shell\nnx g @nrwl/react:app my-new-app\n```\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\nAnd add a new library as follows:\n\n```shell\nnx g @nrwl/react:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/react:lib my-new-lib --buildable\nnx g @nrwl/react:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\nRead more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).\n\n### Creating Components\n\nAdding a component to an existing project can be done with:\n\n```shell\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-app\n\n# Note: If you want to export the component\n# from the library use  --export\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-lib \\\n--export\n```\n\nReplace `my-new-app` and `my-new-lib` with the name of your projects.\n\n### Creating Hooks\n\nIf you want to add a new hook, run the following\n\n```shell\nnx g @nrwl/react:hook my-new-hook --project=my-new-lib\n```\n\nReplace `my-new-lib` with the name of your project.\n\n## Using React\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```shell\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```shell\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```shell\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the\nproject's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```shell\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n- [Using Storybook](/storybook/overview-react)\n"
    }
  ],
  "generators": [
    {
      "name": "init",
      "factory": "./src/generators/init/init#reactInitGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "$id": "NxReactNgInit",
        "title": "Init React Plugin",
        "description": "Initialize a React Plugin.",
        "cli": "nx",
        "type": "object",
        "properties": {
          "unitTestRunner": {
            "description": "Adds the specified unit test runner.",
            "type": "string",
            "enum": ["jest", "none"],
            "default": "jest"
          },
          "e2eTestRunner": {
            "description": "Adds the specified E2E test runner.",
            "type": "string",
            "enum": ["cypress", "none"],
            "default": "cypress"
          },
          "skipFormat": {
            "description": "Skip formatting files.",
            "type": "boolean",
            "default": false
          },
          "skipPackageJson": {
            "description": "Do not add dependencies to `package.json`.",
            "type": "boolean",
            "default": false
          },
          "js": {
            "type": "boolean",
            "default": false,
            "description": "Use JavaScript instead of TypeScript"
          }
        },
        "required": [],
        "presets": []
      },
      "description": "Initialize the `@nrwl/react` plugin.",
      "aliases": ["ng-add"],
      "hidden": true,
      "implementation": "/packages/react/src/generators/init/init#reactInitGenerator.ts",
      "path": "/packages/react/src/generators/init/schema.json"
    },
    {
      "name": "application",
      "factory": "./src/generators/application/application#applicationGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactApp",
        "title": "Create a React Application",
        "description": "Create a React application for Nx.",
        "examples": [
          {
            "command": "nx g app myapp --directory=myorg",
            "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
          },
          {
            "command": "nx g app myapp --classComponent",
            "description": "Use class components instead of functional components"
          },
          {
            "command": "nx g app myapp --routing",
            "description": "Set up React Router"
          }
        ],
        "type": "object",
        "properties": {
          "name": {
            "description": "The name of the application.",
            "type": "string",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use for the application?",
            "pattern": "^[a-zA-Z].*$"
          },
          "directory": {
            "description": "The directory of the new application.",
            "type": "string",
            "alias": "dir"
          },
          "style": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "default": "css",
            "alias": "s",
            "x-prompt": {
              "message": "Which stylesheet format would you like to use?",
              "type": "list",
              "items": [
                { "value": "css", "label": "CSS" },
                {
                  "value": "scss",
                  "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
                },
                {
                  "value": "styl",
                  "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
                },
                {
                  "value": "less",
                  "label": "LESS              [ http://lesscss.org                       ]"
                },
                {
                  "value": "styled-components",
                  "label": "styled-components [ https://styled-components.com            ]"
                },
                {
                  "value": "@emotion/styled",
                  "label": "emotion           [ https://emotion.sh                       ]"
                },
                {
                  "value": "styled-jsx",
                  "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
                },
                { "value": "none", "label": "None" }
              ]
            }
          },
          "linter": {
            "description": "The tool to use for running lint checks.",
            "type": "string",
            "enum": ["eslint", "none"],
            "default": "eslint"
          },
          "routing": {
            "type": "boolean",
            "description": "Generate application with routes.",
            "x-prompt": "Would you like to add React Router to this application?",
            "default": false
          },
          "skipFormat": {
            "description": "Skip formatting files.",
            "type": "boolean",
            "default": false
          },
          "skipWorkspaceJson": {
            "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
            "type": "boolean",
            "default": false
          },
          "unitTestRunner": {
            "type": "string",
            "enum": ["jest", "vitest", "none"],
            "description": "Test runner to use for unit tests.",
            "default": "jest"
          },
          "inSourceTests": {
            "type": "boolean",
            "default": false,
            "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
          },
          "e2eTestRunner": {
            "type": "string",
            "enum": ["cypress", "none"],
            "description": "Test runner to use for end to end (E2E) tests.",
            "default": "cypress"
          },
          "tags": {
            "type": "string",
            "description": "Add tags to the application (used for linting).",
            "alias": "t"
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case component file name (e.g. `App.tsx`).",
            "alias": "P",
            "default": false
          },
          "classComponent": {
            "type": "boolean",
            "description": "Use class components instead of functional component.",
            "alias": "C",
            "default": false
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "globalCss": {
            "type": "boolean",
            "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
            "default": false
          },
          "strict": {
            "type": "boolean",
            "description": "Creates an application with strict mode and strict type checking.",
            "default": true
          },
          "setParserOptionsProject": {
            "type": "boolean",
            "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
            "default": false
          },
          "standaloneConfig": {
            "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
            "type": "boolean"
          },
          "compiler": {
            "type": "string",
            "description": "The compiler to use.",
            "enum": ["babel", "swc"],
            "default": "babel"
          },
          "skipDefaultProject": {
            "description": "Skip setting the project as the default project. When `false` (the default), the project is set as the default project only if there is no default project already set.",
            "type": "boolean",
            "default": false
          },
          "skipPackageJson": {
            "description": "Do not add dependencies to `package.json`.",
            "type": "boolean",
            "default": false
          },
          "rootProject": {
            "description": "Create a application at the root of the workspace",
            "type": "boolean",
            "default": false,
            "hidden": true
          },
          "bundler": {
            "description": "The bundler to use.",
            "type": "string",
            "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"],
      "x-type": "application",
      "description": "Create a React application.",
      "implementation": "/packages/react/src/generators/application/application#applicationGenerator.ts",
      "hidden": false,
      "path": "/packages/react/src/generators/application/schema.json"
    },
    {
      "name": "library",
      "factory": "./src/generators/library/library#libraryGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactLibrary",
        "title": "Create a React Library",
        "description": "Create a React Library for an Nx workspace.",
        "type": "object",
        "examples": [
          {
            "command": "nx g lib mylib --directory=myapp",
            "description": "Generate `libs/myapp/mylib`"
          },
          {
            "command": "nx g lib mylib --appProject=myapp",
            "description": "Generate a library with routes and add them to `myapp`"
          }
        ],
        "properties": {
          "name": {
            "type": "string",
            "description": "Library name",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use for the library?",
            "pattern": "^[a-zA-Z].*$"
          },
          "directory": {
            "type": "string",
            "description": "A directory where the lib is placed.",
            "alias": "dir"
          },
          "style": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "default": "css",
            "alias": "s",
            "x-prompt": {
              "message": "Which stylesheet format would you like to use?",
              "type": "list",
              "items": [
                { "value": "css", "label": "CSS" },
                {
                  "value": "scss",
                  "label": "SASS(.scss)       [ http://sass-lang.com          ]"
                },
                {
                  "value": "styl",
                  "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
                },
                {
                  "value": "less",
                  "label": "LESS              [ http://lesscss.org            ]"
                },
                {
                  "value": "styled-components",
                  "label": "styled-components [ https://styled-components.com ]"
                },
                {
                  "value": "@emotion/styled",
                  "label": "emotion           [ https://emotion.sh            ]"
                },
                {
                  "value": "styled-jsx",
                  "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
                },
                { "value": "none", "label": "None" }
              ]
            }
          },
          "linter": {
            "description": "The tool to use for running lint checks.",
            "type": "string",
            "enum": ["eslint", "none"],
            "default": "eslint"
          },
          "unitTestRunner": {
            "type": "string",
            "enum": ["jest", "vitest", "none"],
            "description": "Test runner to use for unit tests.",
            "default": "jest"
          },
          "inSourceTests": {
            "type": "boolean",
            "default": false,
            "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files."
          },
          "tags": {
            "type": "string",
            "description": "Add tags to the library (used for linting).",
            "alias": "t"
          },
          "skipFormat": {
            "description": "Skip formatting files.",
            "type": "boolean",
            "default": false
          },
          "skipTsConfig": {
            "type": "boolean",
            "default": false,
            "description": "Do not update `tsconfig.json` for development experience."
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case component file name (e.g. `App.tsx`).",
            "alias": "P",
            "default": false
          },
          "routing": {
            "type": "boolean",
            "description": "Generate library with routes."
          },
          "appProject": {
            "type": "string",
            "description": "The application project to add the library route to.",
            "alias": "a"
          },
          "publishable": {
            "type": "boolean",
            "description": "Create a publishable library."
          },
          "buildable": {
            "type": "boolean",
            "default": false,
            "description": "Generate a buildable library."
          },
          "importPath": {
            "type": "string",
            "description": "The library name used to import it, like `@myorg/my-awesome-lib`."
          },
          "component": {
            "type": "boolean",
            "description": "Generate a default component.",
            "default": true
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "globalCss": {
            "type": "boolean",
            "description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).",
            "default": false
          },
          "strict": {
            "type": "boolean",
            "description": "Whether to enable tsconfig strict mode or not.",
            "default": true
          },
          "setParserOptionsProject": {
            "type": "boolean",
            "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
            "default": false
          },
          "standaloneConfig": {
            "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
            "type": "boolean"
          },
          "compiler": {
            "type": "string",
            "enum": ["babel", "swc"],
            "default": "babel",
            "description": "Which compiler to use."
          },
          "skipPackageJson": {
            "description": "Do not add dependencies to `package.json`.",
            "type": "boolean",
            "default": false
          }
        },
        "required": ["name"],
        "presets": []
      },
      "aliases": ["lib"],
      "x-type": "library",
      "description": "Create a React library.",
      "implementation": "/packages/react/src/generators/library/library#libraryGenerator.ts",
      "hidden": false,
      "path": "/packages/react/src/generators/library/schema.json"
    },
    {
      "name": "component",
      "factory": "./src/generators/component/component#componentGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactComponent",
        "title": "Create a React Component",
        "description": "Create a React Component for Nx.",
        "type": "object",
        "examples": [
          {
            "command": "nx g component my-component --project=mylib",
            "description": "Generate a component in the `mylib` library"
          },
          {
            "command": "nx g component my-component --project=mylib --classComponent",
            "description": "Generate a class component in the `mylib` library"
          }
        ],
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the project.",
            "alias": "p",
            "$default": { "$source": "projectName" },
            "x-prompt": "What is the name of the project for this component?"
          },
          "name": {
            "type": "string",
            "description": "The name of the component.",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use for the component?"
          },
          "style": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "alias": "s",
            "default": "css",
            "x-prompt": {
              "message": "Which stylesheet format would you like to use?",
              "type": "list",
              "items": [
                { "value": "css", "label": "CSS" },
                {
                  "value": "scss",
                  "label": "SASS(.scss)       [ http://sass-lang.com          ]"
                },
                {
                  "value": "styl",
                  "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
                },
                {
                  "value": "less",
                  "label": "LESS              [ http://lesscss.org            ]"
                },
                {
                  "value": "styled-components",
                  "label": "styled-components [ https://styled-components.com ]"
                },
                {
                  "value": "@emotion/styled",
                  "label": "emotion           [ https://emotion.sh            ]"
                },
                {
                  "value": "styled-jsx",
                  "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
                },
                { "value": "none", "label": "None" }
              ]
            }
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "skipTests": {
            "type": "boolean",
            "description": "When true, does not create `spec.ts` test files for the new component.",
            "default": false
          },
          "directory": {
            "type": "string",
            "description": "Create the component under this directory (can be nested).",
            "alias": "dir"
          },
          "flat": {
            "type": "boolean",
            "description": "Create component at the source root rather than its own directory.",
            "default": false
          },
          "export": {
            "type": "boolean",
            "description": "When true, the component is exported from the project `index.ts` (if it exists).",
            "alias": "e",
            "default": false,
            "x-prompt": "Should this component be exported in the project?"
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case component file name (e.g. `App.tsx`).",
            "alias": "P",
            "default": false
          },
          "pascalCaseDirectory": {
            "type": "boolean",
            "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
            "alias": "R",
            "default": false
          },
          "classComponent": {
            "type": "boolean",
            "alias": "C",
            "description": "Use class components instead of functional component.",
            "default": false
          },
          "routing": {
            "type": "boolean",
            "description": "Generate a library with routes."
          },
          "globalCss": {
            "type": "boolean",
            "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
            "default": false
          },
          "fileName": {
            "type": "string",
            "description": "Create a component with this file name."
          }
        },
        "required": ["name", "project"],
        "presets": []
      },
      "description": "Create a React component.",
      "aliases": ["c"],
      "implementation": "/packages/react/src/generators/component/component#componentGenerator.ts",
      "hidden": false,
      "path": "/packages/react/src/generators/component/schema.json"
    },
    {
      "name": "redux",
      "factory": "./src/generators/redux/redux#reduxGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "redux",
        "title": "Create Redux state",
        "description": "Create a Redux state slice for a React project.",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "description": "Redux slice name.",
            "$default": { "$source": "argv", "index": 0 }
          },
          "project": {
            "type": "string",
            "description": "The name of the project to add the slice to. If it is an application, then the store configuration will be updated too.",
            "alias": "p",
            "$default": { "$source": "projectName" },
            "x-prompt": "What is the name of the project for this slice?"
          },
          "directory": {
            "type": "string",
            "alias": "dir",
            "default": "",
            "description": "The name of the folder used to contain/group the generated Redux files."
          },
          "appProject": {
            "type": "string",
            "description": "The application project to add the slice to.",
            "alias": "a"
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          }
        },
        "required": ["name"],
        "presets": []
      },
      "description": "Create a Redux slice for a project.",
      "aliases": ["slice"],
      "implementation": "/packages/react/src/generators/redux/redux#reduxGenerator.ts",
      "hidden": false,
      "path": "/packages/react/src/generators/redux/schema.json"
    },
    {
      "name": "storybook-configuration",
      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactStorybookConfigure",
        "title": "React Storybook Configure",
        "description": "Set up Storybook for a React app or library.",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "aliases": ["project", "projectName"],
            "description": "Project for which to generate Storybook configuration.",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "For which project do you want to generate Storybook configuration?",
            "x-dropdown": "projects"
          },
          "configureCypress": {
            "type": "boolean",
            "description": "Run the cypress-configure generator.",
            "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
            "default": true
          },
          "generateStories": {
            "type": "boolean",
            "description": "Automatically generate `*.stories.ts` files for components declared in this project?",
            "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
            "default": true
          },
          "generateCypressSpecs": {
            "type": "boolean",
            "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
            "x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
            "default": true
          },
          "cypressDirectory": {
            "type": "string",
            "description": "A directory where the Cypress project will be placed. Placed at the root by default."
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript story files rather than TypeScript story files.",
            "default": false
          },
          "tsConfiguration": {
            "type": "boolean",
            "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
            "default": false
          },
          "linter": {
            "description": "The tool to use for running lint checks.",
            "type": "string",
            "enum": ["eslint"],
            "default": "eslint"
          },
          "standaloneConfig": {
            "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
            "type": "boolean"
          },
          "ignorePaths": {
            "type": "array",
            "description": "Paths to ignore when looking for components.",
            "items": { "type": "string", "description": "Path to ignore." },
            "examples": [
              "apps/my-app/src/not-stories/**",
              "**/**/src/**/not-stories/**",
              "libs/my-lib/**/*.something.ts",
              "**/**/src/**/*.other.*",
              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
            ]
          },
          "configureTestRunner": {
            "type": "boolean",
            "description": "Add a Storybook Test-Runner target.",
            "x-prompt": "Add a Storybook Test-Runner target?"
          }
        },
        "required": ["name"],
        "examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/storybook/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/storybook/overview-react#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
        "presets": []
      },
      "description": "Set up storybook for a React app or library.",
      "hidden": false,
      "implementation": "/packages/react/src/generators/storybook-configuration/configuration#storybookConfigurationGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/storybook-configuration/schema.json"
    },
    {
      "name": "component-story",
      "factory": "./src/generators/component-story/component-story#componentStoryGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactComponentStory",
        "title": "Create component story",
        "description": "Generate storybook story for a react component.",
        "type": "object",
        "properties": {
          "project": {
            "type": "string",
            "aliases": ["name", "projectName"],
            "description": "The project where to add the components.",
            "examples": ["shared-ui-component"],
            "$default": { "$source": "projectName", "index": 0 },
            "x-prompt": "What's name of the project where the component lives?"
          },
          "componentPath": {
            "type": "string",
            "description": "Relative path to the component file from the library root.",
            "examples": ["lib/components"],
            "x-prompt": "What's path of the component relative to the project's lib root?"
          }
        },
        "required": ["project", "componentPath"],
        "presets": []
      },
      "description": "Generate storybook story for a React component",
      "hidden": false,
      "implementation": "/packages/react/src/generators/component-story/component-story#componentStoryGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/component-story/schema.json"
    },
    {
      "name": "stories",
      "factory": "./src/generators/stories/stories#storiesGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactStorybookStories",
        "title": "Generate React Storybook stories",
        "description": "Generate stories/specs for all components declared in a project.",
        "type": "object",
        "properties": {
          "project": {
            "type": "string",
            "aliases": ["name", "projectName"],
            "description": "Project for which to generate stories.",
            "$default": { "$source": "projectName", "index": 0 },
            "x-prompt": "For which project do you want to generate stories?"
          },
          "generateCypressSpecs": {
            "type": "boolean",
            "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
            "x-prompt": "Do you want to generate Cypress specs as well?"
          },
          "cypressProject": {
            "type": "string",
            "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "ignorePaths": {
            "type": "array",
            "description": "Paths to ignore when looking for components.",
            "items": { "type": "string", "description": "Path to ignore." },
            "examples": [
              "apps/my-app/src/not-stories/**",
              "**/**/src/**/not-stories/**",
              "libs/my-lib/**/*.something.ts",
              "**/**/src/**/*.other.*",
              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
            ]
          }
        },
        "required": ["project"],
        "examplesFile": "This generator will generate stories for all your components in your project.\n\n```bash\nnx g @nrwl/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/storybook/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
        "presets": []
      },
      "description": "Create stories/specs for all components declared in an app or library.",
      "hidden": false,
      "implementation": "/packages/react/src/generators/stories/stories#storiesGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/stories/schema.json"
    },
    {
      "name": "component-cypress-spec",
      "factory": "./src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactComponentCypressSpec",
        "title": "Create component Cypress spec",
        "description": "Create a Cypress spec for a UI component that has a story.",
        "type": "object",
        "properties": {
          "project": {
            "type": "string",
            "description": "The project name for which to generate tests.",
            "examples": ["shared-ui-component"],
            "$default": { "$source": "projectName", "index": 0 },
            "x-prompt": "What's name of the project for which to generate tests?"
          },
          "componentPath": {
            "type": "string",
            "description": "Relative path to the component file from the library root?",
            "examples": ["lib/components"],
            "x-prompt": "What's path of the component relative to the project's lib root for which to generate a test?"
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "cypressProject": {
            "type": "string",
            "description": "The Cypress project to generate the stories under. By default, inferred from `project`."
          }
        },
        "required": ["project", "componentPath"],
        "presets": []
      },
      "description": "Create a Cypress spec for a UI component that has a story.",
      "hidden": false,
      "implementation": "/packages/react/src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/component-cypress-spec/schema.json"
    },
    {
      "name": "hook",
      "factory": "./src/generators/hook/hook#hookGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactHook",
        "title": "Create a React Hook for Nx",
        "description": "Create a React component using Hooks in a dedicated React project.",
        "type": "object",
        "examples": [
          {
            "command": "nx g hook my-hook --project=mylib",
            "description": "Generate a hook in the `mylib` library"
          }
        ],
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the project.",
            "alias": "p",
            "$default": { "$source": "projectName" },
            "x-prompt": "What is the name of the project for this hook?"
          },
          "name": {
            "type": "string",
            "description": "The name of the hook.",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use for the hook?"
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "skipTests": {
            "type": "boolean",
            "description": "When true, does not create `spec.ts` test files for the new hook.",
            "default": false
          },
          "directory": {
            "type": "string",
            "description": "Create the hook under this directory (can be nested)."
          },
          "flat": {
            "type": "boolean",
            "description": "Create hook at the source root rather than its own directory.",
            "default": false
          },
          "export": {
            "type": "boolean",
            "description": "When true, the hook is exported from the project `index.ts` (if it exists).",
            "alias": "e",
            "default": false,
            "x-prompt": "Should this hook be exported in the project?"
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case hook file name (e.g. `useHook.ts`).",
            "alias": "P",
            "default": false
          },
          "pascalCaseDirectory": {
            "type": "boolean",
            "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
            "alias": "R",
            "default": false
          }
        },
        "required": ["name", "project"],
        "presets": []
      },
      "description": "Create a hook.",
      "aliases": ["c"],
      "implementation": "/packages/react/src/generators/hook/hook#hookGenerator.ts",
      "hidden": false,
      "path": "/packages/react/src/generators/hook/schema.json"
    },
    {
      "name": "host",
      "factory": "./src/generators/host/host#hostGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "$id": "GeneratorReactHost",
        "cli": "nx",
        "title": "Generate Module Federation Setup for React Host App",
        "description": "Create Module Federation configuration files for given React Host Application.",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "description": "The name of the host application to generate the Module Federation configuration",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use as the host application?",
            "pattern": "^[a-zA-Z].*$"
          },
          "directory": {
            "description": "The directory of the new application.",
            "type": "string",
            "alias": "dir"
          },
          "style": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "default": "css",
            "alias": "s",
            "x-prompt": {
              "message": "Which stylesheet format would you like to use?",
              "type": "list",
              "items": [
                { "value": "css", "label": "CSS" },
                {
                  "value": "scss",
                  "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
                },
                {
                  "value": "styl",
                  "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
                },
                {
                  "value": "less",
                  "label": "LESS              [ http://lesscss.org                       ]"
                },
                {
                  "value": "styled-components",
                  "label": "styled-components [ https://styled-components.com            ]"
                },
                {
                  "value": "@emotion/styled",
                  "label": "emotion           [ https://emotion.sh                       ]"
                },
                {
                  "value": "styled-jsx",
                  "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
                },
                { "value": "none", "label": "None" }
              ]
            }
          },
          "linter": {
            "description": "The tool to use for running lint checks.",
            "type": "string",
            "enum": ["eslint"],
            "default": "eslint"
          },
          "skipFormat": {
            "description": "Skip formatting files.",
            "type": "boolean",
            "default": false
          },
          "skipWorkspaceJson": {
            "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
            "type": "boolean",
            "default": false
          },
          "unitTestRunner": {
            "type": "string",
            "enum": ["jest", "none"],
            "description": "Test runner to use for unit tests.",
            "default": "jest"
          },
          "e2eTestRunner": {
            "type": "string",
            "enum": ["cypress", "none"],
            "description": "Test runner to use for end to end (e2e) tests.",
            "default": "cypress"
          },
          "tags": {
            "type": "string",
            "description": "Add tags to the application (used for linting).",
            "alias": "t"
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case component file name (e.g. App.tsx).",
            "alias": "P",
            "default": false
          },
          "classComponent": {
            "type": "boolean",
            "description": "Use class components instead of functional component.",
            "alias": "C",
            "default": false
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "globalCss": {
            "type": "boolean",
            "description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss",
            "default": false
          },
          "strict": {
            "type": "boolean",
            "description": "Creates an application with strict mode and strict type checking",
            "default": true
          },
          "setParserOptionsProject": {
            "type": "boolean",
            "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
            "default": false
          },
          "standaloneConfig": {
            "description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
            "type": "boolean"
          },
          "compiler": {
            "type": "string",
            "description": "The compiler to use",
            "enum": ["babel", "swc"],
            "default": "babel"
          },
          "remotes": {
            "type": "array",
            "description": "A list of remote application names that the host application should consume.",
            "default": []
          },
          "devServerPort": {
            "type": "number",
            "description": "The port for the dev server of the remote app."
          }
        },
        "required": ["name"],
        "additionalProperties": false,
        "presets": []
      },
      "x-type": "application",
      "description": "Generate a host react application",
      "implementation": "/packages/react/src/generators/host/host#hostGenerator.ts",
      "aliases": [],
      "hidden": false,
      "path": "/packages/react/src/generators/host/schema.json"
    },
    {
      "name": "remote",
      "factory": "./src/generators/remote/remote#remoteGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "$id": "GeneratorReactRemote",
        "cli": "nx",
        "title": "Generate Module Federation Setup for React Remote App",
        "description": "Create Module Federation configuration files for given React Remote Application.",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "description": "The name of the remote application to generate the Module Federation configuration",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What name would you like to use as the remote application?",
            "pattern": "^[a-zA-Z].*$"
          },
          "directory": {
            "description": "The directory of the new application.",
            "type": "string",
            "alias": "dir"
          },
          "style": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "default": "css",
            "alias": "s",
            "x-prompt": {
              "message": "Which stylesheet format would you like to use?",
              "type": "list",
              "items": [
                { "value": "css", "label": "CSS" },
                {
                  "value": "scss",
                  "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
                },
                {
                  "value": "styl",
                  "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
                },
                {
                  "value": "less",
                  "label": "LESS              [ http://lesscss.org                       ]"
                },
                {
                  "value": "styled-components",
                  "label": "styled-components [ https://styled-components.com            ]"
                },
                {
                  "value": "@emotion/styled",
                  "label": "emotion           [ https://emotion.sh                       ]"
                },
                {
                  "value": "styled-jsx",
                  "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
                },
                { "value": "none", "label": "None" }
              ]
            }
          },
          "linter": {
            "description": "The tool to use for running lint checks.",
            "type": "string",
            "enum": ["eslint"],
            "default": "eslint"
          },
          "routing": {
            "type": "boolean",
            "description": "Generate application with routes.",
            "default": false
          },
          "skipFormat": {
            "description": "Skip formatting files.",
            "type": "boolean",
            "default": false
          },
          "skipWorkspaceJson": {
            "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
            "type": "boolean",
            "default": false
          },
          "unitTestRunner": {
            "type": "string",
            "enum": ["jest", "none"],
            "description": "Test runner to use for unit tests.",
            "default": "jest"
          },
          "e2eTestRunner": {
            "type": "string",
            "enum": ["cypress", "none"],
            "description": "Test runner to use for end to end (e2e) tests.",
            "default": "cypress"
          },
          "tags": {
            "type": "string",
            "description": "Add tags to the application (used for linting).",
            "alias": "t"
          },
          "pascalCaseFiles": {
            "type": "boolean",
            "description": "Use pascal case component file name (e.g. App.tsx).",
            "alias": "P",
            "default": false
          },
          "classComponent": {
            "type": "boolean",
            "description": "Use class components instead of functional component.",
            "alias": "C",
            "default": false
          },
          "js": {
            "type": "boolean",
            "description": "Generate JavaScript files rather than TypeScript files.",
            "default": false
          },
          "globalCss": {
            "type": "boolean",
            "description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss.",
            "default": false
          },
          "strict": {
            "type": "boolean",
            "description": "Creates an application with strict mode and strict type checking.",
            "default": true
          },
          "setParserOptionsProject": {
            "type": "boolean",
            "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
            "default": false
          },
          "standaloneConfig": {
            "description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
            "type": "boolean"
          },
          "compiler": {
            "type": "string",
            "description": "The compiler to use.",
            "enum": ["babel", "swc"],
            "default": "babel"
          },
          "host": {
            "type": "string",
            "description": "The host / shell application for this remote."
          },
          "devServerPort": {
            "type": "number",
            "description": "The port for the dev server of the remote app."
          }
        },
        "required": ["name"],
        "additionalProperties": false,
        "presets": []
      },
      "x-type": "application",
      "description": "Generate a remote react application",
      "implementation": "/packages/react/src/generators/remote/remote#remoteGenerator.ts",
      "aliases": [],
      "hidden": false,
      "path": "/packages/react/src/generators/remote/schema.json"
    },
    {
      "name": "cypress-component-configuration",
      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
      "schema": {
        "$schema": "https://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactCypressComponentTestConfiguration",
        "title": "Add Cypress component testing",
        "description": "Add a Cypress component testing configuration to an existing project.",
        "type": "object",
        "examples": [
          {
            "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project",
            "description": "Add component testing to your react project"
          },
          {
            "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests",
            "description": "Add component testing to your react project and generate component tests for your existing components"
          }
        ],
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the project to add cypress component testing configuration to",
            "x-dropdown": "projects",
            "x-prompt": "What project should we add Cypress component testing to?"
          },
          "generateTests": {
            "type": "boolean",
            "description": "Generate default component tests for existing components in the project",
            "x-prompt": "Automatically generate tests for components declared in this project?",
            "default": false
          },
          "buildTarget": {
            "type": "string",
            "description": "A build target used to configure Cypress component testing in the format of `project:target[:configuration]`. The build target should be from a React app. If not provided we will try to infer it from your projects usage.",
            "pattern": "^[^:\\s]+:[^:\\s]+(:\\S+)?$"
          },
          "skipFormat": {
            "type": "boolean",
            "description": "Skip formatting files",
            "default": false
          }
        },
        "required": ["project"],
        "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n  component: {\n    ...nxComponentTestingPreset(__filename),\n    // extra options here\n  },\n});\n```\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n  \"targets\" {\n    \"component-test\": {\n      \"executor\": \"@nrwl/cypress:cypress\",\n      \"options\": {\n        \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n        \"testingType\": \"component\",\n        \"devServerTarget\": \"some-react-app:build\",\n        \"skipServe\": true\n      }\n    }\n  }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n",
        "presets": []
      },
      "description": "Setup Cypress component testing for a React project",
      "hidden": false,
      "implementation": "/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/cypress-component-configuration/schema.json"
    },
    {
      "name": "component-test",
      "factory": "./src/generators/component-test/component-test#componentTestGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactCypressComponentTest",
        "title": "Add Cypress component test",
        "description": "Add a Cypress component test for a component.",
        "type": "object",
        "examples": [
          {
            "command": "nx g @nrwl/react:component-test --project=my-react-project --component-path=src/lib/fancy-component.tsx",
            "description": "Create a cypress component test for FancyComponent"
          }
        ],
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the project the component is apart of",
            "x-dropdown": "projects",
            "x-prompt": "What project is this component apart of?"
          },
          "componentPath": {
            "type": "string",
            "description": "Path to component, from the project source root",
            "x-prompt": "What is the path to the component?"
          }
        },
        "required": ["project", "componentPath"],
        "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/react/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/react/generators/stories) or [component-story generator docs](/packages/react/generators/component-cypress-spec)\n\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given React component.\n\n```shell\nnx g @nrwl/react:component-test --project=my-cool-react-project --componentPath=src/my-fancy-button.tsx\n```\n\nTest file are generated with the `.cy.` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/react/generators/cypress-component-configuration) to set up the project for component testing.\n",
        "presets": []
      },
      "description": "Generate a Cypress component test for a React component",
      "hidden": false,
      "implementation": "/packages/react/src/generators/component-test/component-test#componentTestGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/component-test/schema.json"
    },
    {
      "name": "setup-tailwind",
      "factory": "./src/generators/setup-tailwind/setup-tailwind#setupTailwindGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "cli": "nx",
        "$id": "NxReactTailwindSetupGenerator",
        "title": "Configures Tailwind CSS for an application or a buildable/publishable library.",
        "description": "Adds the Tailwind CSS configuration files for a given React project and installs, if needed, the packages required for Tailwind CSS to work.",
        "type": "object",
        "examples": [
          {
            "command": "nx g setup-tailwind --project=my-app",
            "description": "Initialize Tailwind configuration for the `my-app` project."
          }
        ],
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the project to add the Tailwind CSS setup for.",
            "alias": "p",
            "$default": { "$source": "argv", "index": 0 },
            "x-dropdown": "projects",
            "x-prompt": "What project would you like to add the Tailwind CSS setup?"
          },
          "buildTarget": {
            "type": "string",
            "description": "The name of the target used to build the project. This option is not needed in most cases.",
            "default": "build"
          },
          "skipFormat": {
            "type": "boolean",
            "description": "Skips formatting the workspace after the generator completes."
          },
          "skipPackageJson": {
            "type": "boolean",
            "default": false,
            "description": "Do not add dependencies to `package.json`."
          }
        },
        "additionalProperties": false,
        "required": ["project"],
        "presets": []
      },
      "description": "Set up Tailwind configuration for a project.",
      "hidden": false,
      "implementation": "/packages/react/src/generators/setup-tailwind/setup-tailwind#setupTailwindGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/setup-tailwind/schema.json"
    },
    {
      "name": "setup-ssr",
      "factory": "./src/generators/setup-ssr/setup-ssr#setupSsrGenerator",
      "schema": {
        "$schema": "http://json-schema.org/schema",
        "$id": "GeneratorAngularUniversalSetup",
        "cli": "nx",
        "title": "Generate Angular Universal (SSR) setup for an Angular App",
        "description": "Create the additional configuration required to enable SSR via Angular Universal for an Angular application.",
        "type": "object",
        "properties": {
          "project": {
            "type": "string",
            "description": "The name of the application to add SSR support to.",
            "$default": { "$source": "argv", "index": 0 },
            "x-prompt": "What app would you like to add SSR support to?",
            "x-dropdown": "projects"
          },
          "appComponentImportPath": {
            "type": "string",
            "description": "The import path of the <App/> component, relative to project sourceRoot.",
            "default": "app/app"
          },
          "serverPort": {
            "type": "number",
            "default": 4200,
            "description": "The port for the Express server."
          },
          "skipFormat": {
            "type": "boolean",
            "description": "Skip formatting the workspace after the generator completes."
          }
        },
        "required": ["project"],
        "additionalProperties": false,
        "presets": []
      },
      "description": "Set up SSR configuration for a project.",
      "hidden": false,
      "implementation": "/packages/react/src/generators/setup-ssr/setup-ssr#setupSsrGenerator.ts",
      "aliases": [],
      "path": "/packages/react/src/generators/setup-ssr/schema.json"
    }
  ],
  "executors": [
    {
      "name": "module-federation-dev-server",
      "implementation": "/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts",
      "schema": {
        "version": 2,
        "outputCapture": "direct-nodejs",
        "title": "Module Federation Dev Server",
        "description": "Serve a web application.",
        "cli": "nx",
        "type": "object",
        "properties": {
          "devRemotes": {
            "type": "array",
            "items": { "type": "string" },
            "description": "List of remote applications to run in development mode (i.e. using serve target)."
          },
          "skipRemotes": {
            "type": "array",
            "items": { "type": "string" },
            "description": "List of remote applications to not automatically serve, either statically or in development mode. This can be useful for multi-repository module federation setups where the host application uses a remote application from an external repository."
          },
          "buildTarget": {
            "type": "string",
            "description": "Target which builds the application."
          },
          "port": {
            "type": "number",
            "description": "Port to listen on.",
            "default": 4200
          },
          "host": {
            "type": "string",
            "description": "Host to listen on.",
            "default": "localhost"
          },
          "ssl": {
            "type": "boolean",
            "description": "Serve using `HTTPS`.",
            "default": false
          },
          "sslKey": {
            "type": "string",
            "description": "SSL key to use for serving `HTTPS`."
          },
          "sslCert": {
            "type": "string",
            "description": "SSL certificate to use for serving `HTTPS`."
          },
          "watch": {
            "type": "boolean",
            "description": "Watches for changes and rebuilds application.",
            "default": true
          },
          "liveReload": {
            "type": "boolean",
            "description": "Whether to reload the page on change, using live-reload.",
            "default": true
          },
          "hmr": {
            "type": "boolean",
            "description": "Enable hot module replacement.",
            "default": false
          },
          "publicHost": {
            "type": "string",
            "description": "Public URL where the application will be served."
          },
          "open": {
            "type": "boolean",
            "description": "Open the application in the browser.",
            "default": false
          },
          "allowedHosts": {
            "type": "string",
            "description": "This option allows you to whitelist services that are allowed to access the dev server."
          },
          "memoryLimit": {
            "type": "number",
            "description": "Memory limit for type checking service process in `MB`."
          },
          "maxWorkers": {
            "type": "number",
            "description": "Number of workers to use for type checking."
          },
          "baseHref": {
            "type": "string",
            "description": "Base url for the application being built."
          }
        },
        "presets": []
      },
      "description": "Serve a host or remote application.",
      "aliases": [],
      "hidden": false,
      "path": "/packages/react/src/executors/module-federation-dev-server/schema.json"
    }
  ]
}