diff --git a/docs/angular/getting-started/intro.md b/docs/angular/getting-started/intro.md index 986afc49c7..445f319ac9 100644 --- a/docs/angular/getting-started/intro.md +++ b/docs/angular/getting-started/intro.md @@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system. It comes with first class monor Nx helps you develop [Angular](/{{framework}}/angular/overview) applications with fully integrated support for modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress](/{{framework}}/cypress/overview), -[ESLint](/{{framework}}/linter/eslint), [Storybook](/{{framework}}/storybook/overview), [NgRx](/angular/guides/misc-ngrx) and more. +[ESLint](/{{framework}}/linter/eslint), Storybook, [NgRx](/angular/guides/misc-ngrx) and more. ## 10-Minute Nx Overview @@ -41,7 +41,7 @@ Nx works especially well for monorepos. Each new app added to a monorepo provide ## Learn Nx Fundamentals -- [Interactive Nx Tutorial (with videos)](/{{framework}}/tutorial/01-create-application) +- [Interactive Nx Tutorial (with videos)](/default/angular-tutorial/01-create-application) - [Using Nx Core Without Plugins](/{{framework}}/getting-started/nx-core) - [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo) - [45-Minute Walkthrough on YouTube](https://www.youtube.com/watch?v=h5FIGDn5YM0) diff --git a/docs/default/api-angular/executors/delegate-build.md b/docs/default/api-angular/executors/delegate-build.md new file mode 100644 index 0000000000..254b3874aa --- /dev/null +++ b/docs/default/api-angular/executors/delegate-build.md @@ -0,0 +1,38 @@ +--- +title: '@nrwl/angular:delegate-build executor' +description: 'Delegates the build to a different target while supporting incremental builds.' +--- + +# @nrwl/angular:delegate-build + +Delegates the build to a different target while supporting incremental builds. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget (_**required**_) + +Type: `string` + +Build target used for building the application after its dependencies have been built. + +### outputPath (_**required**_) + +Type: `string` + +The full path for the output directory, relative to the workspace root. + +### tsConfig (_**required**_) + +Type: `string` + +The full path for the TypeScript configuration file, relative to the workspace root. + +### watch + +Default: `false` + +Type: `boolean` + +Whether to run a build when any file changes. diff --git a/docs/default/api-angular/executors/ng-packagr-lite.md b/docs/default/api-angular/executors/ng-packagr-lite.md new file mode 100644 index 0000000000..2e6d819931 --- /dev/null +++ b/docs/default/api-angular/executors/ng-packagr-lite.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/angular:ng-packagr-lite executor' +description: 'Builds a library with support for incremental builds.' +--- + +# @nrwl/angular:ng-packagr-lite + +Builds a library with support for incremental builds. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### project (_**required**_) + +Type: `string` + +The file path for the ng-packagr configuration file, relative to the workspace root. + +### buildableProjectDepsInPackageJsonType + +Default: `peerDependencies` + +Type: `string` + +Possible values: `dependencies`, `peerDependencies` + +When `updateBuildableProjectDepsInPackageJson` is `true`, this adds dependencies to either `peerDependencies` or `dependencies`. + +### tailwindConfig + +Type: `string` + +The full path for the Tailwind configuration file, relative to the workspace root. If not provided and a `tailwind.config.js` file exists in the project or workspace root, it will be used. Otherwise, Tailwind will not be configured. + +### tsConfig + +Type: `string` + +The full path for the TypeScript configuration file, relative to the workspace root. + +### updateBuildableProjectDepsInPackageJson + +Default: `true` + +Type: `boolean` + +Whether to update the buildable project dependencies in package.json. + +### watch + +Default: `false` + +Type: `boolean` + +Whether to run a build when any file changes. diff --git a/docs/default/api-angular/executors/package.md b/docs/default/api-angular/executors/package.md new file mode 100644 index 0000000000..5fa64ae3e3 --- /dev/null +++ b/docs/default/api-angular/executors/package.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/angular:package executor' +description: 'Builds and packages an Angular library to be distributed as an NPM package. It supports incremental builds.' +--- + +# @nrwl/angular:package + +Builds and packages an Angular library to be distributed as an NPM package. It supports incremental builds. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### project (_**required**_) + +Type: `string` + +The file path for the ng-packagr configuration file, relative to the workspace root. + +### buildableProjectDepsInPackageJsonType + +Default: `peerDependencies` + +Type: `string` + +Possible values: `dependencies`, `peerDependencies` + +When `updateBuildableProjectDepsInPackageJson` is `true`, this adds dependencies to either `peerDependencies` or `dependencies`. + +### tailwindConfig + +Type: `string` + +The full path for the Tailwind configuration file, relative to the workspace root. If not provided and a `tailwind.config.js` file exists in the project or workspace root, it will be used. Otherwise, Tailwind will not be configured. + +### tsConfig + +Type: `string` + +The full path for the TypeScript configuration file, relative to the workspace root. + +### updateBuildableProjectDepsInPackageJson + +Default: `true` + +Type: `boolean` + +Whether to update the buildable project dependencies in package.json. + +### watch + +Default: `false` + +Type: `boolean` + +Whether to run a build when any file changes. diff --git a/docs/default/api-angular/executors/webpack-browser.md b/docs/default/api-angular/executors/webpack-browser.md new file mode 100644 index 0000000000..55c3bfbfb4 --- /dev/null +++ b/docs/default/api-angular/executors/webpack-browser.md @@ -0,0 +1,300 @@ +--- +title: '@nrwl/angular:webpack-browser executor' +description: 'Builds a browser application with support for incremental builds and custom webpack configuration.' +--- + +# @nrwl/angular:webpack-browser + +Builds a browser application with support for incremental builds and custom webpack configuration. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### index (_**required**_) + +Type: `string` + +Configures the generation of the application's HTML index. + +### main (_**required**_) + +Type: `string` + +The full path for the main entry point to the app, relative to the current workspace. + +### outputPath (_**required**_) + +Type: `string` + + The full path for the new output directory, relative to the current workspace. + +By default, writes output to a folder named dist/ in the current project. + +### tsConfig (_**required**_) + +Type: `string` + +The full path for the TypeScript configuration file, relative to the current workspace. + +### allowedCommonJsDependencies + +Type: `array` + +A list of CommonJS packages that are allowed to be used without a build time warning. + +### aot + +Default: `true` + +Type: `boolean` + +Build using Ahead of Time compilation. + +### assets + +Type: `array` + +List of static application assets. + +### baseHref + +Type: `string` + +Base url for the application being built. + +### budgets + +Type: `array` + +Budget thresholds to ensure parts of your application stay within boundaries which you set. + +### buildOptimizer + +Default: `true` + +Type: `boolean` + +Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option. + +### commonChunk + +Default: `true` + +Type: `boolean` + +Generate a seperate bundle containing code used across multiple bundles. + +### crossOrigin + +Default: `none` + +Type: `string` + +Possible values: `none`, `anonymous`, `use-credentials` + +Define the crossorigin attribute setting of elements that provide CORS support. + +### deleteOutputPath + +Default: `true` + +Type: `boolean` + +Delete the output path before building. + +### ~~deployUrl~~ + +Type: `string` + +**Deprecated:** Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url. + +URL where files will be deployed. + +### extractLicenses + +Default: `true` + +Type: `boolean` + +Extract all licenses in a separate file. + +### fileReplacements + +Type: `array` + +Replace compilation source files with other compilation source files in the build. + +### i18nMissingTranslation + +Default: `warning` + +Type: `string` + +Possible values: `warning`, `error`, `ignore` + +How to handle missing translations for i18n. + +### inlineStyleLanguage + +Default: `css` + +Type: `string` + +Possible values: `css`, `less`, `sass`, `scss` + +The stylesheet language to use for the application's inline component styles. + +### localize + +Type: `boolean | boolean[] ` + +Translate the bundles in one or more locales. + +### namedChunks + +Default: `false` + +Type: `boolean` + +Use file name for lazy loaded chunks. + +### ngswConfigPath + +Type: `string` + +Path to ngsw-config.json. + +### optimization + +Default: `true` + +Type: `boolean` + +Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration. + +### outputHashing + +Default: `none` + +Type: `string` + +Possible values: `none`, `all`, `media`, `bundles` + +Define the output filename cache-busting hashing mode. + +### poll + +Type: `number` + +Enable and define the file watching poll time period in milliseconds. + +### polyfills + +Type: `string` + +The full path for the polyfills file, relative to the current workspace. + +### preserveSymlinks + +Type: `boolean` + +Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set. + +### progress + +Default: `true` + +Type: `boolean` + +Log progress to the console while building. + +### resourcesOutputPath + +Type: `string` + +The path where style resources will be placed, relative to outputPath. + +### scripts + +Type: `array` + +Global scripts to be included in the build. + +### serviceWorker + +Default: `false` + +Type: `boolean` + +Generates a service worker config for production builds. + +### ~~showCircularDependencies~~ + +Default: `false` + +Type: `boolean` + +**Deprecated:** The recommended method to detect circular dependencies in project code is to use either a lint rule or other external tooling. + +Show circular dependency warnings on builds. + +### sourceMap + +Default: `false` + +Type: `boolean` + +Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration. + +### statsJson + +Default: `false` + +Type: `boolean` + +Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'. + +### styles + +Type: `array` + +Global styles to be included in the build. + +### subresourceIntegrity + +Default: `false` + +Type: `boolean` + +Enables the use of subresource integrity validation. + +### vendorChunk + +Default: `false` + +Type: `boolean` + +Generate a seperate bundle containing only vendor libraries. This option should only used for development. + +### verbose + +Default: `false` + +Type: `boolean` + +Adds more details to output logging. + +### watch + +Default: `false` + +Type: `boolean` + +Run build when files change. + +### webWorkerTsConfig + +Type: `string` + +TypeScript configuration for Web Worker modules. diff --git a/docs/default/api-angular/executors/webpack-server.md b/docs/default/api-angular/executors/webpack-server.md new file mode 100644 index 0000000000..8cecec6f6e --- /dev/null +++ b/docs/default/api-angular/executors/webpack-server.md @@ -0,0 +1,132 @@ +--- +title: '@nrwl/angular:webpack-server executor' +description: 'Serves a browser application with support for a custom webpack configuration.' +--- + +# @nrwl/angular:webpack-server + +Serves a browser application with support for a custom webpack configuration. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### browserTarget (_**required**_) + +Type: `string` + +A browser builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`. + +### allowedHosts + +Type: `array` + +List of hosts that are allowed to access the dev server. + +### disableHostCheck + +Default: `false` + +Type: `boolean` + +Don't verify connected clients are part of allowed hosts. + +### hmr + +Default: `false` + +Type: `boolean` + +Enable hot module replacement. + +### host + +Default: `localhost` + +Type: `string` + +Host to listen on. + +### liveReload + +Default: `true` + +Type: `boolean` + +Whether to reload the page on change, using live-reload. + +### open + +Alias(es): o + +Default: `false` + +Type: `boolean` + +Opens the url in default browser. + +### poll + +Type: `number` + +Enable and define the file watching poll time period in milliseconds. + +### port + +Default: `4200` + +Type: `number` + +Port to listen on. + +### proxyConfig + +Type: `string` + +Proxy configuration file. For more information, see https://angular.io/guide/build#proxying-to-a-backend-server. + +### publicHost + +Type: `string` + +The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies. + +### servePath + +Type: `string` + +The pathname where the app will be served. + +### ssl + +Default: `false` + +Type: `boolean` + +Serve using HTTPS. + +### sslCert + +Type: `string` + +SSL certificate to use for serving HTTPS. + +### sslKey + +Type: `string` + +SSL key to use for serving HTTPS. + +### verbose + +Type: `boolean` + +Adds more details to output logging. + +### watch + +Default: `true` + +Type: `boolean` + +Rebuild on change. diff --git a/docs/default/api-angular/generators/application.md b/docs/default/api-angular/generators/application.md new file mode 100644 index 0000000000..f8386b964e --- /dev/null +++ b/docs/default/api-angular/generators/application.md @@ -0,0 +1,234 @@ +--- +title: '@nrwl/angular:application generator' +description: 'Creates an Angular application.' +--- + +# @nrwl/angular:application + +Creates an Angular application. + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the application. + +### addTailwind + +Default: `false` + +Type: `boolean` + +Whether to configure TailwindCSS for the application. + +### backendProject + +Type: `string` + +Backend project that provides data to this application. This sets up `proxy.config.json`. + +### directory + +Type: `string` + +The directory of the new application. + +### e2eTestRunner + +Default: `cypress` + +Type: `string` + +Possible values: `protractor`, `cypress`, `none` + +Test runner to use for end to end (e2e) tests. + +### host + +Type: `string` + +The name of the host application that the remote application will be consumed by. + +### inlineStyle + +Alias(es): s + +Default: `false` + +Type: `boolean` + +Specifies if the style will be in the ts file. + +### inlineTemplate + +Alias(es): t + +Default: `false` + +Type: `boolean` + +Specifies if the template will be in the ts file. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### mfe + +Default: `false` + +Type: `boolean` + +Generate a Module Federation configuration for the application + +### mfeType + +Default: `remote` + +Type: `string` + +Possible values: `host`, `remote` + +Type of application to generate the Module Federation configuration for. + +### port + +Type: `number` + +The port at which the remote application should be served. + +### prefix + +Alias(es): p + +Type: `string` + +The prefix to apply to generated selectors. + +### remotes + +Type: `array` + +A list of remote application names that the host application should consume. + +### routing + +Default: `false` + +Type: `boolean` + +Generate a routing module. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add dependencies to `package.json`. + +### skipTests + +Alias(es): S + +Default: `false` + +Type: `boolean` + +Skip creating spec files. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into `/project.json` rather than including it inside `workspace.json`. + +### strict + +Default: `true` + +Type: `boolean` + +Create an application with stricter type checking and build optimization options. + +### style + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `sass`, `less` + +The file extension to be used for style files. + +### tags + +Type: `string` + +Add tags to the application (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `karma`, `jest`, `none` + +Test runner to use for unit tests. + +### viewEncapsulation + +Type: `string` + +Possible values: `Emulated`, `Native`, `None` + +Specifies the view encapsulation strategy. diff --git a/docs/default/api-angular/generators/convert-tslint-to-eslint.md b/docs/default/api-angular/generators/convert-tslint-to-eslint.md new file mode 100644 index 0000000000..db65a46a8a --- /dev/null +++ b/docs/default/api-angular/generators/convert-tslint-to-eslint.md @@ -0,0 +1,80 @@ +--- +title: '@nrwl/angular:convert-tslint-to-eslint generator' +description: 'Converts a project from TSLint to ESLint.' +--- + +# @nrwl/angular:convert-tslint-to-eslint + +Converts a project from TSLint to ESLint. + +## Usage + +```bash +nx generate convert-tslint-to-eslint ... +``` + +By default, Nx will search for `convert-tslint-to-eslint` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:convert-tslint-to-eslint ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g convert-tslint-to-eslint ... --dry-run +``` + +### Examples + +The following will first configure the project, `myapp`, the same way a _new_ project is configured i.e. It will use Nx's new recommended ESLint config. By default, this also adds the existing TSLint configuration on top of the default ESLint config from Nx to continue checking what it checks today. This is done by migrating TSLint rules to their equivalent ESLint rules to the best of its abilities. Some TSLint rules may not have ESLint equivalents and will be reported during the conversion: + +```bash +nx g convert-tslint-to-eslint myapp +``` + +If your TSLint config isn't extremely important to you, ignoring it makes this process more deterministic. Unlike the prior example, this will discard the existing TSLint configuration, meaning that the project will only have the Nx's latest recommended ESLint configuration which may be good enough for some workspaces: + +```bash +nx g convert-tslint-to-eslint myapp --ignoreExistingTslintConfig=true +``` + +By default, this process removes the TSLint related dependencies and configuration once no more projects use TSLint. This can be disabled with the following flag to keep TSLint related dependencies and configuration in the repo: + +```bash +nx g convert-tslint-to-eslint myapp --removeTSLintIfNoMoreTSLintTargets=false +``` + +## Options + +### project (_**required**_) + +Type: `string` + +The name of the Angular project to convert. Please note, if the project is an Angular app with an associated Cypress e2e project, it will also attempt to convert that. + +### ignoreExistingTslintConfig + +Default: `false` + +Type: `boolean` + +If true, it will not use existing TSLint config as a reference, it will just reset the project with the latest recommended ESLint config. + +### removeTSLintIfNoMoreTSLintTargets + +Default: `true` + +Type: `boolean` + +If this conversion leaves no more TSLint usage in the workspace, it will remove TSLint and related dependencies and configuration. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. diff --git a/docs/default/api-angular/generators/downgrade-module.md b/docs/default/api-angular/generators/downgrade-module.md new file mode 100644 index 0000000000..99ac2aa89b --- /dev/null +++ b/docs/default/api-angular/generators/downgrade-module.md @@ -0,0 +1,64 @@ +--- +title: '@nrwl/angular:downgrade-module generator' +description: 'Sets up a Downgrade Module.' +--- + +# @nrwl/angular:downgrade-module + +Sets up a Downgrade Module. + +## Usage + +```bash +nx generate downgrade-module ... +``` + +By default, Nx will search for `downgrade-module` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:downgrade-module ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g downgrade-module ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the main AngularJS module. + +### project (_**required**_) + +Type: `string` + +The name of the project. + +### angularJsImport + +Type: `string` + +Import expression of the AngularJS application (e.g., `--angularJsImport=some_node_module/my_app`). + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add `@angular/upgrade` to `package.json` (e.g., `--skipPackageJson`). diff --git a/docs/default/api-angular/generators/karma-project.md b/docs/default/api-angular/generators/karma-project.md new file mode 100644 index 0000000000..75ed079511 --- /dev/null +++ b/docs/default/api-angular/generators/karma-project.md @@ -0,0 +1,36 @@ +--- +title: '@nrwl/angular:karma-project generator' +description: 'Adds Karma configuration to a project.' +--- + +# @nrwl/angular:karma-project + +Adds Karma configuration to a project. + +## Usage + +```bash +nx generate karma-project ... +``` + +By default, Nx will search for `karma-project` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:karma-project ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g karma-project ... --dry-run +``` + +## Options + +### project (_**required**_) + +Type: `string` + +The name of the project. diff --git a/docs/default/api-angular/generators/karma.md b/docs/default/api-angular/generators/karma.md new file mode 100644 index 0000000000..c2595c7722 --- /dev/null +++ b/docs/default/api-angular/generators/karma.md @@ -0,0 +1,28 @@ +--- +title: '@nrwl/angular:karma generator' +description: 'Adds Karma configuration to a workspace.' +--- + +# @nrwl/angular:karma + +Adds Karma configuration to a workspace. + +## Usage + +```bash +nx generate karma ... +``` + +By default, Nx will search for `karma` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:karma ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g karma ... --dry-run +``` diff --git a/docs/default/api-angular/generators/library-secondary-entry-point.md b/docs/default/api-angular/generators/library-secondary-entry-point.md new file mode 100644 index 0000000000..dd63569655 --- /dev/null +++ b/docs/default/api-angular/generators/library-secondary-entry-point.md @@ -0,0 +1,54 @@ +--- +title: '@nrwl/angular:library-secondary-entry-point generator' +description: 'Creates a secondary entry point for an Angular publishable library.' +--- + +# @nrwl/angular:library-secondary-entry-point + +Creates a secondary entry point for an Angular publishable library. + +## Usage + +```bash +nx generate library-secondary-entry-point ... +``` + +```bash +nx g secondary-entry-point ... # same +``` + +By default, Nx will search for `library-secondary-entry-point` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:library-secondary-entry-point ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library-secondary-entry-point ... --dry-run +``` + +## Options + +### library (_**required**_) + +Type: `string` + +The name of the library to create the secondary entry point for. + +### name (_**required**_) + +Type: `string` + +The name of the secondary entry point. + +### skipModule + +Default: `false` + +Type: `boolean` + +Skip generating a module for the secondary entry point. diff --git a/docs/default/api-angular/generators/library.md b/docs/default/api-angular/generators/library.md new file mode 100644 index 0000000000..f7795ebc80 --- /dev/null +++ b/docs/default/api-angular/generators/library.md @@ -0,0 +1,202 @@ +--- +title: '@nrwl/angular:library generator' +description: 'Creates an Angular library.' +--- + +# @nrwl/angular:library + +Creates an Angular library. + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the library. + +### addModuleSpec + +Default: `false` + +Type: `boolean` + +Add a module spec file. + +### addTailwind + +Default: `false` + +Type: `boolean` + +Whether to configure TailwindCSS for the application. It can only be used with buildable and publishable libraries. Non-buildable libraries will use the application's Tailwind configuration. + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### compilationMode + +Type: `string` + +Possible values: `full`, `partial` + +Specifies the compilation mode to use. If not specified, it will default to `partial` for publishable libraries and to `full` for buildable libraries. The `full` value can not be used for publishable libraries. + +### directory + +Type: `string` + +A directory where the library is placed. + +### importPath + +Type: `string` + +The library name used to import it, like `@myorg/my-awesome-lib`. Must be a valid npm name. + +### lazy + +Default: `false` + +Type: `boolean` + +Add `RouterModule.forChild` when set to true, and a simple array of routes when set to false. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### parentModule + +Type: `string` + +Update the router configuration of the parent module using `loadChildren` or `children`, depending on what `lazy` is set to. + +### prefix + +Alias(es): p + +Type: `string` + +The prefix to apply to generated selectors. + +### publishable + +Default: `false` + +Type: `boolean` + +Generate a publishable library. + +### routing + +Default: `false` + +Type: `boolean` + +Add router configuration. See `lazy` for more information. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### simpleModuleName + +Default: `false` + +Type: `boolean` + +Keep the module name simple (when using `--directory`). + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add dependencies to `package.json`. + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update `tsconfig.json` for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into `/project.json` rather than including it inside `workspace.json`. + +### strict + +Default: `true` + +Type: `boolean` + +Create a library with stricter type checking and build optimization options. + +### tags + +Type: `string` + +Add tags to the library (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `karma`, `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-angular/generators/move.md b/docs/default/api-angular/generators/move.md new file mode 100644 index 0000000000..0a9a0d756f --- /dev/null +++ b/docs/default/api-angular/generators/move.md @@ -0,0 +1,80 @@ +--- +title: '@nrwl/angular:move generator' +description: 'Moves an Angular application or library to another folder within the workspace and updates the project configuration.' +--- + +# @nrwl/angular:move + +Moves an Angular application or library to another folder within the workspace and updates the project configuration. + +## Usage + +```bash +nx generate move ... +``` + +```bash +nx g mv ... # same +``` + +By default, Nx will search for `move` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:move ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g move ... --dry-run +``` + +### Examples + +Move libs/my-feature-lib to libs/shared/my-feature-lib: + +```bash +nx g @nrwl/angular:move --project my-feature-lib shared/my-feature-lib +``` + +## Options + +### destination (_**required**_) + +Type: `string` + +The folder to move the Angular project into. + +### projectName (_**required**_) + +Alias(es): project + +Type: `string` + +The name of the Angular project to move. + +### importPath + +Type: `string` + +The new import path to use in the `tsconfig.base.json`. + +### skipFormat + +Alias(es): skip-format + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### updateImportPath + +Default: `true` + +Type: `boolean` + +Update the import path to reflect the new location. diff --git a/docs/default/api-angular/generators/ngrx.md b/docs/default/api-angular/generators/ngrx.md new file mode 100644 index 0000000000..433d6f2a30 --- /dev/null +++ b/docs/default/api-angular/generators/ngrx.md @@ -0,0 +1,124 @@ +--- +title: '@nrwl/angular:ngrx generator' +description: 'Adds NgRx support to an application or library.' +--- + +# @nrwl/angular:ngrx + +Adds NgRx support to an application or library. + +## Usage + +```bash +nx generate ngrx ... +``` + +By default, Nx will search for `ngrx` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:ngrx ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g ngrx ... --dry-run +``` + +## Options + +### module (_**required**_) + +Type: `string` + +The path to the `NgModule` where the feature state will be registered. The host directory will create/use the new state directory. + +### name (_**required**_) + +Type: `string` + +Name of the NgRx feature state, such as `products` or `users`. Recommended to use the plural form of the name. + +### barrels + +Default: `false` + +Type: `boolean` + +Use barrels to re-export actions, state and selectors. + +### directory + +Default: `+state` + +Type: `string` + +The name of the folder used to contain/group the generated NgRx files. + +### facade + +Default: `false` + +Type: `boolean` + +Create a Facade class for the the feature. + +### minimal + +Default: `true` + +Type: `boolean` + +Only register the root state management setup or feature state. + +### root + +Default: `false` + +Type: `boolean` + +Setup root or feature state management with NgRx. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipImport + +Default: `false` + +Type: `boolean` + +Generate NgRx feature files without registering the feature in the NgModule. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not update the `package.json` with NgRx dependencies. + +### syntax + +Default: `creators` + +Type: `string` + +Possible values: `classes`, `creators` + +Specifies whether to use class-based or creator functions for actions, reducers, and effects. + +### useDataPersistence + +Default: `false` + +Type: `boolean` + +Generate NgRx Effects with the `DataPersistence` helper service. Set to false to use plain effects data persistence operators. diff --git a/docs/default/api-angular/generators/scam-directive.md b/docs/default/api-angular/generators/scam-directive.md new file mode 100644 index 0000000000..cb067fd1d4 --- /dev/null +++ b/docs/default/api-angular/generators/scam-directive.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/angular:scam-directive generator' +description: 'Generate a directive with an accompanying Single Component Angular Module (SCAM).' +--- + +# @nrwl/angular:scam-directive + +Generate a directive with an accompanying Single Component Angular Module (SCAM). + +## Usage + +```bash +nx generate scam-directive ... +``` + +By default, Nx will search for `scam-directive` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:scam-directive ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g scam-directive ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the directive. + +### flat + +Default: `true` + +Type: `boolean` + +Create the new files at the top level of the current project. + +### inlineScam + +Default: `true` + +Type: `boolean` + +Create the NgModule in the same file as the Directive. + +### path (**hidden**) + +Type: `string` + +The path at which to create the directive file, relative to the current workspace. Default is a folder with the same name as the directive in the project root. + +### prefix + +Alias(es): p + +Type: `string` + +The prefix to apply to the generated directive selector. + +### project + +Type: `string` + +The name of the project. + +### selector + +Type: `string` + +The HTML selector to use for this directive. + +### skipTests + +Default: `false` + +Type: `boolean` + +Do not create "spec.ts" test files for the new directive. diff --git a/docs/default/api-angular/generators/scam-pipe.md b/docs/default/api-angular/generators/scam-pipe.md new file mode 100644 index 0000000000..877cfb04a4 --- /dev/null +++ b/docs/default/api-angular/generators/scam-pipe.md @@ -0,0 +1,72 @@ +--- +title: '@nrwl/angular:scam-pipe generator' +description: 'Generate a pipe with an accompanying Single Component Angular Module (SCAM).' +--- + +# @nrwl/angular:scam-pipe + +Generate a pipe with an accompanying Single Component Angular Module (SCAM). + +## Usage + +```bash +nx generate scam-pipe ... +``` + +By default, Nx will search for `scam-pipe` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:scam-pipe ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g scam-pipe ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the pipe. + +### flat + +Default: `true` + +Type: `boolean` + +Create the new files at the top level of the current project. + +### inlineScam + +Default: `true` + +Type: `boolean` + +Create the NgModule in the same file as the Pipe. + +### path (**hidden**) + +Type: `string` + +The path at which to create the pipe file, relative to the current workspace. Default is a folder with the same name as the pipe in the project root. + +### project + +Type: `string` + +The name of the project. + +### skipTests + +Default: `false` + +Type: `boolean` + +Do not create "spec.ts" test files for the new pipe. diff --git a/docs/default/api-angular/generators/scam.md b/docs/default/api-angular/generators/scam.md new file mode 100644 index 0000000000..3fb61ccb75 --- /dev/null +++ b/docs/default/api-angular/generators/scam.md @@ -0,0 +1,164 @@ +--- +title: '@nrwl/angular:scam generator' +description: 'Generate a component with an accompanying Single Component Angular Module (SCAM).' +--- + +# @nrwl/angular:scam + +Generate a component with an accompanying Single Component Angular Module (SCAM). + +## Usage + +```bash +nx generate scam ... +``` + +By default, Nx will search for `scam` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:scam ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g scam ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### changeDetection + +Alias(es): c + +Default: `Default` + +Type: `string` + +Possible values: `Default`, `OnPush` + +The change detection strategy to use in the new component. + +### displayBlock + +Alias(es): b + +Default: `false` + +Type: `boolean` + +Specifies if the style will contain `:host { display: block; }`. + +### flat + +Default: `false` + +Type: `boolean` + +Create the new files at the top level of the current project. + +### inlineScam + +Default: `true` + +Type: `boolean` + +Create the NgModule in the same file as the Component. + +### inlineStyle + +Alias(es): s + +Default: `false` + +Type: `boolean` + +Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file. + +### inlineTemplate + +Alias(es): t + +Default: `false` + +Type: `boolean` + +Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file. + +### path (**hidden**) + +Type: `string` + +The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root. + +### prefix + +Alias(es): p + +Type: `string` + +The prefix to apply to the generated component selector. + +### project + +Type: `string` + +The name of the project. + +### selector + +Type: `string` + +The HTML selector to use for this component. + +### skipSelector + +Default: `false` + +Type: `boolean` + +Specifies if the component should have a selector or not. + +### skipTests + +Default: `false` + +Type: `boolean` + +Do not create "spec.ts" test files for the new component. + +### style + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `sass`, `less`, `none` + +The file extension or preprocessor to use for style files, or 'none' to skip generating the style file. + +### type + +Default: `component` + +Type: `string` + +Adds a developer-defined type to the filename, in the format "name.type.ts". + +### viewEncapsulation + +Alias(es): v + +Type: `string` + +Possible values: `Emulated`, `None`, `ShadowDom` + +The view encapsulation strategy to use in the new component. diff --git a/docs/default/api-angular/generators/setup-mfe.md b/docs/default/api-angular/generators/setup-mfe.md new file mode 100644 index 0000000000..0bf991ae96 --- /dev/null +++ b/docs/default/api-angular/generators/setup-mfe.md @@ -0,0 +1,76 @@ +--- +title: '@nrwl/angular:setup-mfe generator' +description: 'Generate a Module Federation configuration for a given Angular application.' +--- + +# @nrwl/angular:setup-mfe + +Generate a Module Federation configuration for a given Angular application. + +## Usage + +```bash +nx generate setup-mfe ... +``` + +By default, Nx will search for `setup-mfe` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:setup-mfe ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g setup-mfe ... --dry-run +``` + +## Options + +### appName (_**required**_) + +Type: `string` + +The name of the application to generate the Module Federation configuration for. + +### mfeType (_**required**_) + +Default: `remote` + +Type: `string` + +Possible values: `host`, `remote` + +Type of application to generate the Module Federation configuration for. + +### host + +Type: `string` + +The name of the host application that the remote application will be consumed by. + +### port + +Type: `number` + +The port at which the remote application should be served. + +### remotes + +Type: `array` + +A list of remote application names that the host application should consume. + +### routing + +Type: `boolean` + +Generate a routing setup to allow a host application to route to the remote application. + +### skipFormat + +Type: `boolean` + +Skip formatting the workspace after the generator completes. diff --git a/docs/default/api-angular/generators/setup-tailwind.md b/docs/default/api-angular/generators/setup-tailwind.md new file mode 100644 index 0000000000..dcf57f41ad --- /dev/null +++ b/docs/default/api-angular/generators/setup-tailwind.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/angular:setup-tailwind generator' +description: 'Configures TailwindCSS for an application or a buildable/publishable library.' +--- + +# @nrwl/angular:setup-tailwind + +Configures TailwindCSS for an application or a buildable/publishable library. + +## Usage + +```bash +nx generate setup-tailwind ... +``` + +By default, Nx will search for `setup-tailwind` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:setup-tailwind ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g setup-tailwind ... --dry-run +``` + +## Options + +### project (_**required**_) + +Type: `string` + +The name of the project to add the TailwindCSS setup for. + +### buildTarget + +Default: `build` + +Type: `string` + +The name of the target used to build the project. This option only applies to buildable/publishable libraries. + +### skipFormat + +Type: `boolean` + +Skips formatting the workspace after the generator completes. + +### stylesEntryPoint + +Type: `string` + +Path to the styles entry point relative to the workspace root. If not provided the generator will do its best to find it and it will error if it can't. This option only applies to applications. diff --git a/docs/default/api-angular/generators/stories.md b/docs/default/api-angular/generators/stories.md new file mode 100644 index 0000000000..399453eea7 --- /dev/null +++ b/docs/default/api-angular/generators/stories.md @@ -0,0 +1,48 @@ +--- +title: '@nrwl/angular:stories generator' +description: 'Creates stories/specs for all components declared in a project.' +--- + +# @nrwl/angular:stories + +Creates stories/specs for all components declared in a project. + +## Usage + +```bash +nx generate stories ... +``` + +By default, Nx will search for `stories` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:stories ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g stories ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the project. + +### cypressProject + +Type: `string` + +The Cypress project to generate the stories under. This is inferred from `name` by default. + +### generateCypressSpecs + +Type: `boolean` + +Specifies whether to automatically generate `*.spec.ts` files in the Cypress e2e app generated by the `cypress-configure` generator. diff --git a/docs/default/api-angular/generators/storybook-configuration.md b/docs/default/api-angular/generators/storybook-configuration.md new file mode 100644 index 0000000000..c56c5bbe93 --- /dev/null +++ b/docs/default/api-angular/generators/storybook-configuration.md @@ -0,0 +1,76 @@ +--- +title: '@nrwl/angular:storybook-configuration generator' +description: 'Adds Storybook configuration to a project.' +--- + +# @nrwl/angular:storybook-configuration + +Adds Storybook configuration to a project. + +## Usage + +```bash +nx generate storybook-configuration ... +``` + +By default, Nx will search for `storybook-configuration` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:storybook-configuration ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g storybook-configuration ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the project. + +### configureCypress + +Default: `true` + +Type: `boolean` + +Specifies whether to configure Cypress or not. + +### cypressDirectory + +Type: `string` + +A directory where the Cypress project will be placed. Placed at the root by default. + +### generateCypressSpecs + +Default: `true` + +Type: `boolean` + +Specifies whether to automatically generate `*.spec.ts` files in the generated Cypress e2e app. + +### generateStories + +Default: `true` + +Type: `boolean` + +Specifies whether to automatically generate `*.stories.ts` files for components declared in this project or not. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. diff --git a/docs/default/api-angular/generators/storybook-migrate-defaults-5-to-6.md b/docs/default/api-angular/generators/storybook-migrate-defaults-5-to-6.md new file mode 100644 index 0000000000..dd0010a3a5 --- /dev/null +++ b/docs/default/api-angular/generators/storybook-migrate-defaults-5-to-6.md @@ -0,0 +1,52 @@ +--- +title: '@nrwl/angular:storybook-migrate-defaults-5-to-6 generator' +description: 'Generates default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x.' +--- + +# @nrwl/angular:storybook-migrate-defaults-5-to-6 + +Generates default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x. + +## Usage + +```bash +nx generate storybook-migrate-defaults-5-to-6 ... +``` + +By default, Nx will search for `storybook-migrate-defaults-5-to-6` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:storybook-migrate-defaults-5-to-6 ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g storybook-migrate-defaults-5-to-6 ... --dry-run +``` + +## Options + +### all + +Default: `true` + +Type: `boolean` + +Generate new Storybook configurations for all Storybook instances across all applications and libraries. + +### keepOld + +Default: `true` + +Type: `boolean` + +Keep the old configuration files by placing them in a folder called `.old_storybook`. + +### name + +Type: `string` + +Library or application name for which you want to generate the new Storybook configuration. Leave empty to upgrade all Storybook instances. Only use this if you want to do a gradual migration. diff --git a/docs/default/api-angular/generators/storybook-migrate-stories-to-6-2.md b/docs/default/api-angular/generators/storybook-migrate-stories-to-6-2.md new file mode 100644 index 0000000000..a81530a233 --- /dev/null +++ b/docs/default/api-angular/generators/storybook-migrate-stories-to-6-2.md @@ -0,0 +1,28 @@ +--- +title: '@nrwl/angular:storybook-migrate-stories-to-6-2 generator' +description: 'Migrates stories to match the new syntax in v6.2 where the component declaration should be in the default export.' +--- + +# @nrwl/angular:storybook-migrate-stories-to-6-2 + +Migrates stories to match the new syntax in v6.2 where the component declaration should be in the default export. + +## Usage + +```bash +nx generate storybook-migrate-stories-to-6-2 ... +``` + +By default, Nx will search for `storybook-migrate-stories-to-6-2` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:storybook-migrate-stories-to-6-2 ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g storybook-migrate-stories-to-6-2 ... --dry-run +``` diff --git a/docs/default/api-angular/generators/upgrade-module.md b/docs/default/api-angular/generators/upgrade-module.md new file mode 100644 index 0000000000..7cbcd4152e --- /dev/null +++ b/docs/default/api-angular/generators/upgrade-module.md @@ -0,0 +1,78 @@ +--- +title: '@nrwl/angular:upgrade-module generator' +description: 'Sets up an Upgrade Module.' +--- + +# @nrwl/angular:upgrade-module + +Sets up an Upgrade Module. + +## Usage + +```bash +nx generate upgrade-module ... +``` + +By default, Nx will search for `upgrade-module` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:upgrade-module ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g upgrade-module ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the main AngularJS module. + +### project (_**required**_) + +Type: `string` + +The name of the project. + +### angularJsCmpSelector + +Type: `string` + +The selector of an AngularJS component (e.g., `--angularJsCmpSelector=myComponent`). + +### angularJsImport + +Type: `string` + +Import expression of the AngularJS application (e.g., `--angularJsImport=some_node_module/my_app`). + +### router + +Default: `false` + +Type: `boolean` + +Sets up router synchronization (e.g., `--router`). + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add `@angular/upgrade` to `package.json` (e.g., `--skipPackageJson`). diff --git a/docs/default/api-angular/generators/web-worker.md b/docs/default/api-angular/generators/web-worker.md new file mode 100644 index 0000000000..293af264e7 --- /dev/null +++ b/docs/default/api-angular/generators/web-worker.md @@ -0,0 +1,64 @@ +--- +title: '@nrwl/angular:web-worker generator' +description: 'Creates a Web Worker.' +--- + +# @nrwl/angular:web-worker + +Creates a Web Worker. + +## Usage + +```bash +nx generate web-worker ... +``` + +By default, Nx will search for `web-worker` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/angular:web-worker ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g web-worker ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the worker. + +### project (_**required**_) + +Type: `string` + +The name of the project. + +### path + +Type: `string` + +The path at which to create the worker file, relative to the current workspace. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### snippet + +Default: `true` + +Type: `boolean` + +Add a worker creation snippet in a sibling file of the same name. diff --git a/docs/default/api-cypress/executors/cypress.md b/docs/default/api-cypress/executors/cypress.md new file mode 100644 index 0000000000..5fe5294e58 --- /dev/null +++ b/docs/default/api-cypress/executors/cypress.md @@ -0,0 +1,156 @@ +--- +title: '@nrwl/cypress:cypress executor' +description: 'Run Cypress e2e tests' +--- + +# @nrwl/cypress:cypress + +Run Cypress e2e tests + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### cypressConfig (_**required**_) + +Type: `string` + +The path of the Cypress configuration json file. + +### baseUrl + +Type: `string` + +The address (with the port) which your application is running on + +### browser + +Type: `string` + +The browser to run tests in. + +### ciBuildId + +Type: `string` + +A unique identifier for a run to enable grouping or parallelization. + +### ~~copyFiles~~ + +Type: `string` + +**Deprecated:** A regex string that is used to choose what additional integration files to copy to the dist folder + +### devServerTarget + +Type: `string` + +Dev server target to run tests against. + +### exit + +Default: `true` + +Type: `boolean` + +Whether or not the Cypress Test Runner will stay open after running tests in a spec file + +### group + +Type: `string` + +A named group for recorded runs in the Cypress dashboard. + +### headed + +Default: `false` + +Type: `boolean` + +Displays the browser instead of running headlessly. Set this to 'true' if your run depends on a Chrome extension being loaded. + +### ~~headless~~ + +Default: `false` + +Type: `boolean` + +**Deprecated:** Hide the browser instead of running headed (default for cypress run). + +### ignoreTestFiles + +Type: `string` + +A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests. Cypress uses minimatch with the options: {dot: true, matchBase: true}. We suggest using https://globster.xyz to test what files would match. + +### key + +Type: `string` + +The key cypress should use to run tests in parallel/record the run (CI only) + +### parallel + +Default: `false` + +Type: `boolean` + +Whether or not Cypress should run its tests in parallel (CI only) + +### record + +Default: `false` + +Type: `boolean` + +Whether or not Cypress should record the results of the tests + +### reporter + +Type: `string` + +The reporter used during cypress run + +### reporterOptions + +Type: `string` + +The reporter options used. Supported options depend on the reporter. + +### skipServe + +Default: `false` + +Type: `boolean` + +Skip dev-server build. + +### spec + +Type: `string` + +A comma delimited glob string that is provided to the Cypress runner to specify which spec files to run. i.e. '**examples/**,**actions.spec** + +### testingType + +Default: `e2e` + +Type: `string` + +Possible values: `component`, `e2e` + +Specify the type of tests to execute + +### tsConfig + +Type: `string` + +The path of the Cypress tsconfig configuration json file. + +### watch + +Default: `false` + +Type: `boolean` + +Recompile and run tests when files change. diff --git a/docs/default/api-cypress/generators/cypress-project.md b/docs/default/api-cypress/generators/cypress-project.md new file mode 100644 index 0000000000..3c5505aa92 --- /dev/null +++ b/docs/default/api-cypress/generators/cypress-project.md @@ -0,0 +1,94 @@ +--- +title: '@nrwl/cypress:cypress-project generator' +description: 'Add a Cypress E2E Project' +--- + +# @nrwl/cypress:cypress-project + +Add a Cypress E2E Project + +## Usage + +```bash +nx generate cypress-project ... +``` + +By default, Nx will search for `cypress-project` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/cypress:cypress-project ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g cypress-project ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Name of the E2E Project + +### baseUrl + +Type: `string` + +The address (with the port) which your application is running on + +### directory + +Type: `string` + +A directory where the project is placed + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint`, `none` + +The tool to use for running lint checks. + +### project + +Type: `string` + +The name of the frontend project to test. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json diff --git a/docs/default/api-detox/executors/build.md b/docs/default/api-detox/executors/build.md new file mode 100644 index 0000000000..7f768cd2aa --- /dev/null +++ b/docs/default/api-detox/executors/build.md @@ -0,0 +1,28 @@ +--- +title: '@nrwl/detox:build executor' +description: 'Run the command defined in build property of the specified configuration.' +--- + +# @nrwl/detox:build + +Run the command defined in build property of the specified configuration. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### configPath + +Alias(es): cp + +Type: `string` + +Specify Detox config file path. If not supplied, detox searches for .detoxrc[.js] or "detox" section in package.json + +### detoxConfiguration + +Alias(es): C + +Type: `string` + +Select a device configuration from your defined configurations, if not supplied, and there's only one configuration, detox will default to it diff --git a/docs/default/api-detox/executors/test.md b/docs/default/api-detox/executors/test.md new file mode 100644 index 0000000000..b54f2cfd5c --- /dev/null +++ b/docs/default/api-detox/executors/test.md @@ -0,0 +1,182 @@ +--- +title: '@nrwl/detox:test executor' +description: 'Initiating your detox test suite.' +--- + +# @nrwl/detox:test + +Initiating your detox test suite. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### appLaunchArgs + +Type: `number` + +Custom arguments to pass (through) onto the app every time it is launched. + +### artifactsLocation + +Alias(es): a + +Type: `string` + +Artifacts (logs, screenshots, etc) root directory. + +### captureViewHierarchy + +Type: `string` + +[iOS Only] Capture \*.uihierarchy snapshots on view action errors and device.captureViewHierarchy() calls. + +### cleanup + +Type: `boolean` + +Shutdown simulator when test is over, useful for CI scripts, to make sure detox exists cleanly with no residue + +### configPath + +Alias(es): cp + +Type: `string` + +Specify Detox config file path. If not supplied, detox searches for .detoxrc[.js] or "detox" section in package.json + +### debugSynchronization + +Alias(es): d + +Type: `string` + +Customize how long an action/expectation can take to complete before Detox starts querying the app why it is busy. By default, the app status will be printed if the action takes more than 10s to complete. + +### detoxConfiguration + +Alias(es): C + +Type: `string` + +Select a device configuration from your defined configurations, if not supplied, and there's only one configuration, detox will default to it + +### deviceLaunchArgs + +Type: `string` + +A list of passthrough-arguments to use when (if) devices (Android emulator / iOS simulator) are launched by Detox. + +### deviceName + +Alias(es): n + +Type: `string` + +Override the device name specified in a configuration. Useful for running a single build configuration on multiple devices. + +### forceAdbInstall + +Type: `boolean` + +Due to problems with the adb install command on Android, Detox resorts to a different scheme for install APK's. Setting true will disable that and force usage of adb install, instead. + +### gpu + +Type: `boolean` + +[Android Only] Launch Emulator with the specific -gpu [gpu mode] parameter. + +### headless + +Type: `boolean` + +Android Only] Launch Emulator in headless mode. Useful when running on CI. + +### inspectBrk + +Type: `boolean` + +Uses node's --inspect-brk flag to let users debug the jest/mocha test runner + +### jestReportSpecs + +Type: `boolean` + +[Jest Only] Whether to output logs per each running spec, in real-time. By default, disabled with multiple workers. + +### loglevel + +Alias(es): l + +Type: `string` + +Log level: fatal, error, warn, info, verbose, trace + +### noColor + +Type: `boolean` + +Disable colors in log output + +### recordLogs + +Type: `string` + +Save logs during each test to artifacts directory. Pass "failing" to save logs of failing tests only. + +### recordPerformance + +Type: `string` + +[iOS Only] Save Detox Instruments performance recordings of each test to artifacts directory. + +### recordTimeline + +Type: `string` + +[Jest Only] Record tests and events timeline, for visual display on the chrome://tracing tool. + +### recordVideos + +Type: `string` + +Save screen recordings of each test to artifacts directory. Pass "failing" to save recordings of failing tests only. + +### retries + +Type: `number` + +[Jest Circus Only] Re-spawn the test runner for individual failing suite files until they pass, or times at least. + +### reuse + +Type: `boolean` + +Reuse existing installed app (do not delete + reinstall) for a faster run. + +### runnerConfig + +Alias(es): o + +Type: `string` + +Test runner config file, defaults to 'e2e/mocha.opts' for mocha and 'e2e/config.json' for jest. + +### takeScreenshots + +Type: `string` + +Save screenshots before and after each test to artifacts directory. Pass "failing" to save screenshots of failing tests only. + +### useCustomLogger + +Type: `boolean` + +Use Detox' custom console-logging implementation, for logging Detox (non-device) logs. Disabling will fallback to node.js / test-runner's implementation (e.g. Jest / Mocha). + +### workers + +Type: `number` + +Specifies number of workers the test runner should spawn, requires a test runner with parallel execution support (Detox CLI currently supports Jest). diff --git a/docs/default/api-detox/generators/application.md b/docs/default/api-detox/generators/application.md new file mode 100644 index 0000000000..36b863db4a --- /dev/null +++ b/docs/default/api-detox/generators/application.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/detox:application generator' +description: 'Create a detox application' +--- + +# @nrwl/detox:application + +Create a detox application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/detox:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Name of the E2E Project + +### project (_**required**_) + +Type: `string` + +The name of the frontend project to test. + +### directory + +Type: `string` + +A directory where the project is placed + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint`, `none` + +The tool to use for running lint checks. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files diff --git a/docs/default/api-express/generators/application.md b/docs/default/api-express/generators/application.md new file mode 100644 index 0000000000..9adb724215 --- /dev/null +++ b/docs/default/api-express/generators/application.md @@ -0,0 +1,134 @@ +--- +title: '@nrwl/express:application generator' +description: 'Create an express application' +--- + +# @nrwl/express:application + +Create an express application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/express:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### babelJest + +Default: `false` + +Type: `boolean` + +Use babel instead ts-jest + +### directory + +Type: `string` + +The directory of the new application. + +### frontendProject + +Type: `string` + +Frontend project that needs to access this application. This sets up proxy configuration. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add dependencies to package.json. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### tags + +Type: `string` + +Add tags to the application (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-gatsby/executors/build.md b/docs/default/api-gatsby/executors/build.md new file mode 100644 index 0000000000..f67e659231 --- /dev/null +++ b/docs/default/api-gatsby/executors/build.md @@ -0,0 +1,52 @@ +--- +title: '@nrwl/gatsby:build executor' +description: 'Build a Gatsby app' +--- + +# @nrwl/gatsby:build + +Build a Gatsby app + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### color + +Default: `true` + +Type: `boolean` + +Enable colored terminal output. + +### graphqlTracing + +Type: `boolean` + +Trace every graphql resolver, may have performance implications. + +### openTracingConfigFile + +Type: `string` + +Tracer configuration file (OpenTracing compatible). + +### prefixPaths + +Type: `boolean` + +Build site with link paths prefixed (set pathPrefix in your config). + +### profile + +Type: `boolean` + +Build site with react profiling. + +### uglify + +Default: `true` + +Type: `boolean` + +Build site without uglifying JS bundles (true by default). diff --git a/docs/default/api-gatsby/executors/server.md b/docs/default/api-gatsby/executors/server.md new file mode 100644 index 0000000000..089c1c0385 --- /dev/null +++ b/docs/default/api-gatsby/executors/server.md @@ -0,0 +1,48 @@ +--- +title: '@nrwl/gatsby:server executor' +description: 'Starts server for app' +--- + +# @nrwl/gatsby:server + +Starts server for app + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget + +Type: `string` + +Target which builds the application + +### host + +Default: `localhost` + +Type: `string` + +Host to listen on. + +### https + +Default: `false` + +Type: `boolean` + +Serve using HTTPS. + +### open + +Type: `boolean` + +Open the site in your (default) browser for you. + +### port + +Default: `4200` + +Type: `number` + +Port to listen on. diff --git a/docs/default/api-gatsby/generators/application.md b/docs/default/api-gatsby/generators/application.md new file mode 100644 index 0000000000..066cb740da --- /dev/null +++ b/docs/default/api-gatsby/generators/application.md @@ -0,0 +1,108 @@ +--- +title: '@nrwl/gatsby:application generator' +description: 'Create an application' +--- + +# @nrwl/gatsby:application + +Create an application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/gatsby:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +### directory + +Alias(es): d + +Type: `string` + +A directory where the project is placed + +### e2eTestRunner + +Default: `cypress` + +Type: `string` + +Possible values: `cypress`, `none` + +Adds the specified e2e test runner + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the project (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Adds the specified unit test runner diff --git a/docs/default/api-gatsby/generators/component.md b/docs/default/api-gatsby/generators/component.md new file mode 100644 index 0000000000..a79ef064e8 --- /dev/null +++ b/docs/default/api-gatsby/generators/component.md @@ -0,0 +1,112 @@ +--- +title: '@nrwl/gatsby:component generator' +description: 'Create a component' +--- + +# @nrwl/gatsby:component + +Create a component + +## Usage + +```bash +nx generate component ... +``` + +By default, Nx will search for `component` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/gatsby:component ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component ... --dry-run +``` + +### Examples + +Generate a component in the mylib library: + +```bash +nx g component my-component --project=mylib +``` + +Generate a class component in the mylib library: + +```bash +nx g component my-component --project=mylib --classComponent +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### directory + +Alias(es): dir + +Type: `string` + +Create the component under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new component. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. diff --git a/docs/default/api-gatsby/generators/page.md b/docs/default/api-gatsby/generators/page.md new file mode 100644 index 0000000000..9d70c6a171 --- /dev/null +++ b/docs/default/api-gatsby/generators/page.md @@ -0,0 +1,112 @@ +--- +title: '@nrwl/gatsby:page generator' +description: 'Create a page' +--- + +# @nrwl/gatsby:page + +Create a page + +## Usage + +```bash +nx generate page ... +``` + +By default, Nx will search for `page` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/gatsby:page ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g page ... --dry-run +``` + +### Examples + +Generate a page in the mylib library: + +```bash +nx g page my-page --project=mylib +``` + +Generate a class component in the mylib library: + +```bash +nx g page my-page --project=mylib --classComponent +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### directory + +Alias(es): dir + +Type: `string` + +Create the component under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new component. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. diff --git a/docs/default/api-jest/executors/jest.md b/docs/default/api-jest/executors/jest.md new file mode 100644 index 0000000000..488927c417 --- /dev/null +++ b/docs/default/api-jest/executors/jest.md @@ -0,0 +1,244 @@ +--- +title: '@nrwl/jest:jest executor' +description: 'Run Jest unit tests' +--- + +# @nrwl/jest:jest + +Run Jest unit tests + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### jestConfig (_**required**_) + +Type: `string` + +The path of the Jest configuration. (https://jestjs.io/docs/en/configuration) + +### bail + +Alias(es): b + +Type: `number | boolean ` + +Exit the test suite immediately after `n` number of failing tests. (https://jestjs.io/docs/cli#--bail) + +### changedSince + +Type: `string` + +Runs tests related to the changes since the provided branch or commit hash. If the current branch has diverged from the given branch, then only changes made locally will be tested. (https://jestjs.io/docs/cli#--changedsince) + +### ci + +Type: `boolean` + +Whether to run Jest in continuous integration (CI) mode. This option is on by default in most popular CI environments. It will prevent snapshots from being written unless explicitly requested. (https://jestjs.io/docs/cli#--ci) + +### clearCache + +Type: `boolean` + +Deletes the Jest cache directory and then exits without running tests. Will delete Jest's default cache directory. _Note: clearing the cache will reduce performance_. + +### codeCoverage + +Alias(es): coverage + +Type: `boolean` + +Indicates that test coverage information should be collected and reported in the output. (https://jestjs.io/docs/cli#--coverageboolean) + +### color + +Alias(es): colors + +Type: `boolean` + +Forces test results output color highlighting (even if stdout is not a TTY). Set to false if you would like to have no colors. (https://jestjs.io/docs/cli#--colors) + +### colors + +Type: `boolean` + +Forces test results output highlighting even if stdout is not a TTY. (https://jestjs.io/docs/cli#--colors) + +### config + +Type: `string` + +The path to a Jest config file specifying how to find and execute tests. If no rootDir is set in the config, the directory containing the config file is assumed to be the rootDir for the project. This can also be a JSON-encoded value which Jest will use as configuration + +### coverageDirectory + +Type: `string` + +The directory where Jest should output its coverage files. + +### coverageReporters + +Type: `array` + +A list of reporter names that Jest uses when writing coverage reports. Any istanbul reporter + +### detectOpenHandles + +Type: `boolean` + +Attempt to collect and print open handles preventing Jest from exiting cleanly (https://jestjs.io/docs/cli#--detectopenhandles) + +### findRelatedTests + +Type: `string` + +Find and run the tests that cover a comma separated list of source files that were passed in as arguments. (https://jestjs.io/docs/cli#--findrelatedtests-spaceseparatedlistofsourcefiles) + +### json + +Type: `boolean` + +Prints the test results in JSON. This mode will send all other test output and user messages to stderr. (https://jestjs.io/docs/cli#--json) + +### maxWorkers + +Alias(es): w + +Type: `number | string ` + +Specifies the maximum number of workers the worker-pool will spawn for running tests. This defaults to the number of the cores available on your machine. Useful for CI. (its usually best not to override this default) (https://jestjs.io/docs/cli#--maxworkersnumstring) + +### onlyChanged + +Alias(es): o + +Type: `boolean` + +Attempts to identify which tests to run based on which files have changed in the current repository. Only works if you're running tests in a git or hg repository at the moment. (https://jestjs.io/docs/cli#--onlychanged) + +### outputFile + +Type: `string` + +Write test results to a file when the --json option is also specified. (https://jestjs.io/docs/cli#--outputfilefilename) + +### passWithNoTests + +Type: `boolean` + +Will not fail if no tests are found (for example while using `--testPathPattern`.) (https://jestjs.io/docs/cli#--passwithnotests) + +### reporters + +Type: `array` + +Run tests with specified reporters. Reporter options are not available via CLI. Example with multiple reporters: jest --reporters="default" --reporters="jest-junit" (https://jestjs.io/docs/cli#--reporters) + +### runInBand + +Alias(es): i + +Type: `boolean` + +Run all tests serially in the current process (rather than creating a worker pool of child processes that run tests). This is sometimes useful for debugging, but such use cases are pretty rare. Useful for CI. (https://jestjs.io/docs/cli#--runinband) + +### ~~setupFile~~ + +Type: `string` + +**Deprecated:** The name of a setup file used by Jest. (use Jest config file https://jestjs.io/docs/en/configuration#setupfilesafterenv-array) + +### showConfig + +Type: `boolean` + +Print your Jest config and then exits. (https://jestjs.io/docs/en/cli#--showconfig) + +### silent + +Type: `boolean` + +Prevent tests from printing messages through the console. (https://jestjs.io/docs/cli#--silent) + +### testFile + +Type: `string` + +The name of the file to test. + +### testLocationInResults + +Type: `boolean` + +Adds a location field to test results. Used to report location of a test in a reporter. { "column": 4, "line": 5 } (https://jestjs.io/docs/cli#--testlocationinresults) + +### testNamePattern + +Alias(es): t + +Type: `string` + +Run only tests with a name that matches the regex pattern. (https://jestjs.io/docs/cli#--testnamepatternregex) + +### testPathIgnorePatterns + +Type: `array` + +An array of regexp pattern strings that is matched against all tests paths before executing the test. Only run those tests with a path that does not match with the provided regexp expressions. (https://jestjs.io/docs/cli#--testpathignorepatternsregexarray) + +### testPathPattern + +Type: `array` + +An array of regexp pattern strings that is matched against all tests paths before executing the test. (https://jestjs.io/docs/cli#--testpathpatternregex) + +### testResultsProcessor + +Type: `string` + +Node module that implements a custom results processor. (https://jestjs.io/docs/en/configuration#testresultsprocessor-string) + +### testTimeout + +Type: `number` + +Default timeout of a test in milliseconds. Default value: 5000. (https://jestjs.io/docs/cli#--testtimeoutnumber) + +### ~~tsConfig~~ + +Type: `string` + +**Deprecated:** The name of the Typescript configuration file. Set the tsconfig option in the jest config file. + +### updateSnapshot + +Alias(es): u + +Type: `boolean` + +Use this flag to re-record snapshots. Can be used together with a test suite pattern or with `--testNamePattern` to re-record snapshot for test matching the pattern. (https://jestjs.io/docs/cli#--updatesnapshot) + +### useStderr + +Type: `boolean` + +Divert all output to stderr. + +### verbose + +Type: `boolean` + +Display individual test results with the test suite hierarchy. (https://jestjs.io/docs/cli#--verbose) + +### watch + +Type: `boolean` + +Watch files for changes and rerun tests related to changed files. If you want to re-run all tests when a file has changed, use the `--watchAll` option. (https://jestjs.io/docs/cli#--watch) + +### watchAll + +Type: `boolean` + +Watch files for changes and rerun all tests when something changes. If you want to re-run only the tests that depend on the changed files, use the `--watch` option. (https://jestjs.io/docs/cli#--watchall) diff --git a/docs/default/api-js/executors/node.md b/docs/default/api-js/executors/node.md new file mode 100644 index 0000000000..da08ffc8f2 --- /dev/null +++ b/docs/default/api-js/executors/node.md @@ -0,0 +1,60 @@ +--- +title: '@nrwl/js:node executor' +description: 'Build Node.js applications' +--- + +# @nrwl/js:node + +Build Node.js applications + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget (_**required**_) + +Type: `string` + +The target to run to build you the app + +### args + +Type: `array` + +Extra args when starting the app + +### host + +Default: `localhost` + +Type: `string` + +The host to inspect the process on + +### inspect + +Default: `inspect` + +Type: `string | boolean ` + +Ensures the app is starting with debugging + +### port + +Default: `9229` + +Type: `number` + +The port to inspect the process on. Setting port to 0 will assign random free ports to all forked processes. + +### runtimeArgs + +Type: `array` + +Extra args passed to the node process + +### waitUntilTargets + +Type: `array` + +The targets to run to before starting the node app diff --git a/docs/default/api-js/executors/swc.md b/docs/default/api-js/executors/swc.md new file mode 100644 index 0000000000..a0faac19e4 --- /dev/null +++ b/docs/default/api-js/executors/swc.md @@ -0,0 +1,52 @@ +--- +title: '@nrwl/js:swc executor' +description: 'Build a project using SWC' +--- + +# @nrwl/js:swc + +Build a project using SWC + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### main (_**required**_) + +Type: `string` + +The name of the main entry-point file. + +### outputPath (_**required**_) + +Type: `string` + +The output path of the generated files. + +### tsConfig (_**required**_) + +Type: `string` + +The path to the Typescript configuration file. + +### assets + +Type: `array` + +List of static assets. + +### skipTypeCheck + +Default: `false` + +Type: `boolean` + +Whether to skip TypeScript type checking. + +### watch + +Default: `false` + +Type: `boolean` + +Enable re-building when files change. diff --git a/docs/default/api-js/executors/tsc.md b/docs/default/api-js/executors/tsc.md new file mode 100644 index 0000000000..88cf454429 --- /dev/null +++ b/docs/default/api-js/executors/tsc.md @@ -0,0 +1,50 @@ +--- +title: '@nrwl/js:tsc executor' +description: 'Build a project using TypeScript.' +--- + +# @nrwl/js:tsc + +Build a project using TypeScript. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### main (_**required**_) + +Type: `string` + +The name of the main entry-point file. + +### outputPath (_**required**_) + +Type: `string` + +The output path of the generated files. + +### tsConfig (_**required**_) + +Type: `string` + +The path to the Typescript configuration file. + +### assets + +Type: `array` + +List of static assets. + +### transformers + +Type: `array` + +List of TypeScript Transformer Plugins. + +### watch + +Default: `false` + +Type: `boolean` + +Enable re-building when files change. diff --git a/docs/default/api-js/generators/application.md b/docs/default/api-js/generators/application.md new file mode 100644 index 0000000000..45dc042bde --- /dev/null +++ b/docs/default/api-js/generators/application.md @@ -0,0 +1,166 @@ +--- +title: '@nrwl/js:application generator' +description: 'Create a application' +--- + +# @nrwl/js:application + +Create a application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/js:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### compiler + +Default: `tsc` + +Type: `string` + +Possible values: `tsc`, `swc` + +The compiler used by the build and test targets (tsc is preferred, swc is experimental) + +### config + +Default: `project` + +Type: `string` + +Possible values: `workspace`, `project`, `npm-scripts` + +Determines how whether the project's executors should be configured in workspace.json, project.json or as npm scripts + +### directory + +Type: `string` + +A directory where the lib is placed + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### strict + +Default: `true` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Type: `string` + +Add tags to the library (used for linting) + +### testEnvironment + +Default: `jsdom` + +Type: `string` + +Possible values: `jsdom`, `node` + +The test environment to use if unitTestRunner is set to jest + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-js/generators/convert-to-swc.md b/docs/default/api-js/generators/convert-to-swc.md new file mode 100644 index 0000000000..f8fc46c4fb --- /dev/null +++ b/docs/default/api-js/generators/convert-to-swc.md @@ -0,0 +1,54 @@ +--- +title: '@nrwl/js:convert-to-swc generator' +description: 'Convert a tsc library to swc' +--- + +# @nrwl/js:convert-to-swc + +Convert a tsc library to swc + +## Usage + +```bash +nx generate convert-to-swc ... +``` + +```bash +nx g swc ... # same +``` + +By default, Nx will search for `convert-to-swc` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/js:convert-to-swc ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g convert-to-swc ... --dry-run +``` + +### Examples + +Convert libs/myapp/mylib to swc: + +```bash +nx g swc mylib +``` + +## Options + +### project (_**required**_) + +Type: `string` + +Library name + +### targets + +Type: `array` + +List of targets to convert diff --git a/docs/default/api-js/generators/library.md b/docs/default/api-js/generators/library.md new file mode 100644 index 0000000000..643a643f2f --- /dev/null +++ b/docs/default/api-js/generators/library.md @@ -0,0 +1,182 @@ +--- +title: '@nrwl/js:library generator' +description: 'Create a library' +--- + +# @nrwl/js:library + +Create a library + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/js:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### compiler + +Default: `tsc` + +Type: `string` + +Possible values: `tsc`, `swc` + +The compiler used by the build and test targets (tsc is preferred, swc is experimental) + +### config + +Default: `project` + +Type: `string` + +Possible values: `workspace`, `project`, `npm-scripts` + +Determines how whether the project's executors should be configured in workspace.json, project.json or as npm scripts + +### directory + +Type: `string` + +A directory where the lib is placed + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### skipTypeCheck + +Default: `false` + +Type: `boolean` + +Whether to skip TypeScript type checking for SWC compiler. + +### strict + +Default: `true` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Type: `string` + +Add tags to the library (used for linting) + +### testEnvironment + +Default: `jsdom` + +Type: `string` + +Possible values: `jsdom`, `node` + +The test environment to use if unitTestRunner is set to jest + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-linter/executors/eslint.md b/docs/default/api-linter/executors/eslint.md new file mode 100644 index 0000000000..54bc67e6f2 --- /dev/null +++ b/docs/default/api-linter/executors/eslint.md @@ -0,0 +1,112 @@ +--- +title: '@nrwl/linter:eslint executor' +description: 'Run ESLint on a project' +--- + +# @nrwl/linter:eslint + +Run ESLint on a project + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### lintFilePatterns (_**required**_) + +Type: `array` + +One or more files/dirs/globs to pass directly to ESLint's lintFiles() method. + +### cache + +Default: `false` + +Type: `boolean` + +Only check changed files. + +### cacheLocation + +Type: `string` + +Path to the cache file or directory. + +### eslintConfig + +Type: `string` + +The name of the ESLint configuration file. + +### fix + +Default: `false` + +Type: `boolean` + +Fixes linting errors (may overwrite linted files). + +### force + +Default: `false` + +Type: `boolean` + +Succeeds even if there was linting errors. + +### format + +Default: `stylish` + +Type: `string` + +ESLint Output formatter (https://eslint.org/docs/user-guide/formatters). + +### hasTypeAwareRules + +Type: `boolean` + +When set to true, the linter will invalidate its cache when any of its dependencies changes. + +### ignorePath + +Type: `string` + +The path of the .eslintignore file. + +### maxWarnings + +Default: `-1` + +Type: `number` + +Number of warnings to trigger nonzero exit code - default: -1 + +### noEslintrc + +Default: `false` + +Type: `boolean` + +The equivalent of the --no-eslintrc flag on the ESLint CLI, it is false by default + +### outputFile + +Type: `string` + +File to write report to. + +### quiet + +Default: `false` + +Type: `boolean` + +Report errors only - default: false + +### silent + +Default: `false` + +Type: `boolean` + +Hide output text. diff --git a/docs/default/api-linter/executors/lint.md b/docs/default/api-linter/executors/lint.md new file mode 100644 index 0000000000..4af3f20270 --- /dev/null +++ b/docs/default/api-linter/executors/lint.md @@ -0,0 +1,114 @@ +--- +title: '@nrwl/linter:lint executor' +description: '**[DEPRECATED]**: Please use the eslint builder instead, an automated migration was provided in v10.3.0' +--- + +# @nrwl/linter:lint + +**[DEPRECATED]**: Please use the eslint builder instead, an automated migration was provided in v10.3.0 + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### linter (_**required**_) + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### cache + +Default: `false` + +Type: `boolean` + +Only check changed files. + +### cacheLocation + +Type: `string` + +Path to the cache file or directory. + +### config + +Type: `string` + +The name of the configuration file. + +### exclude + +Type: `array` + +Files to exclude from linting. + +### files + +Type: `array` + +Files to include in linting. + +### fix + +Default: `false` + +Type: `boolean` + +Fixes linting errors (may overwrite linted files). + +### force + +Default: `false` + +Type: `boolean` + +Succeeds even if there was linting errors. + +### format + +Default: `stylish` + +Type: `string` + +ESLint Output formatter (https://eslint.org/docs/user-guide/formatters). + +### maxWarnings + +Default: `-1` + +Type: `number` + +Number of warnings to trigger nonzero exit code - default: -1 + +### outputFile + +Type: `string` + +File to write report to. + +### quiet + +Default: `false` + +Type: `boolean` + +Report errors only - default: false + +### silent + +Default: `false` + +Type: `boolean` + +Hide output text. + +### tsConfig + +Type: `string | string[] ` + +The name of the TypeScript configuration file. diff --git a/docs/default/api-linter/generators/workspace-rule.md b/docs/default/api-linter/generators/workspace-rule.md new file mode 100644 index 0000000000..ac04b9e342 --- /dev/null +++ b/docs/default/api-linter/generators/workspace-rule.md @@ -0,0 +1,60 @@ +--- +title: '@nrwl/linter:workspace-rule generator' +description: 'Create a new workspace ESLint rule' +--- + +# @nrwl/linter:workspace-rule + +Create a new workspace ESLint rule + +## Usage + +```bash +nx generate workspace-rule ... +``` + +By default, Nx will search for `workspace-rule` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/linter:workspace-rule ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g workspace-rule ... --dry-run +``` + +### Examples + +Create a new workspace lint rule called my-custom-rule: + +```bash +nx g @nrwl/linter:workspace-rule my-custom-rule +``` + +Create a new workspace lint rule located at tools/eslint-rules/a/b/c/my-custom-rule.ts: + +```bash +nx g @nrwl/linter:workspace-rule --name=my-custom-rule --directory=a/b/c +``` + +## Options + +### directory (_**required**_) + +Alias(es): dir + +Default: `rules` + +Type: `string` + +Create the rule under this directory within tools/eslint-rules/ (can be nested). + +### name (_**required**_) + +Type: `string` + +The name of the new rule diff --git a/docs/default/api-nest/generators/application.md b/docs/default/api-nest/generators/application.md new file mode 100644 index 0000000000..fde171a1ed --- /dev/null +++ b/docs/default/api-nest/generators/application.md @@ -0,0 +1,108 @@ +--- +title: '@nrwl/nest:application generator' +description: 'Create a NestJS application.' +--- + +# @nrwl/nest:application + +Create a NestJS application. + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the application. + +### directory + +Type: `string` + +The directory of the new application. + +### frontendProject + +Type: `string` + +Frontend project that needs to access this application. This sets up proxy configuration. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add dependencies to package.json. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json. + +### tags + +Type: `string` + +Add tags to the application (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/class.md b/docs/default/api-nest/generators/class.md new file mode 100644 index 0000000000..a652e44eae --- /dev/null +++ b/docs/default/api-nest/generators/class.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:class generator' +description: 'Run the `class` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:class + +Run the `class` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate class ... +``` + +By default, Nx will search for `class` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:class ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g class ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the class. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest class language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/controller.md b/docs/default/api-nest/generators/controller.md new file mode 100644 index 0000000000..2c68a99510 --- /dev/null +++ b/docs/default/api-nest/generators/controller.md @@ -0,0 +1,100 @@ +--- +title: '@nrwl/nest:controller generator' +description: 'Run the `controller` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:controller + +Run the `controller` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate controller ... +``` + +By default, Nx will search for `controller` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:controller ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g controller ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the controller. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `false` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest controller language. + +### module + +Type: `string` + +Allows specification of the declaring module. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipImport + +Default: `false` + +Type: `boolean` + +Flag to skip the module import. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/convert-tslint-to-eslint.md b/docs/default/api-nest/generators/convert-tslint-to-eslint.md new file mode 100644 index 0000000000..f13547958f --- /dev/null +++ b/docs/default/api-nest/generators/convert-tslint-to-eslint.md @@ -0,0 +1,68 @@ +--- +title: '@nrwl/nest:convert-tslint-to-eslint generator' +description: 'Convert a project from TSLint to ESLint.' +--- + +# @nrwl/nest:convert-tslint-to-eslint + +Convert a project from TSLint to ESLint. + +## Usage + +```bash +nx generate convert-tslint-to-eslint ... +``` + +By default, Nx will search for `convert-tslint-to-eslint` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:convert-tslint-to-eslint ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g convert-tslint-to-eslint ... --dry-run +``` + +### Examples + +Convert the NestJS project `myapp` from TSLint to ESLint: + +```bash +nx g convert-tslint-to-eslint myapp +``` + +## Options + +### project (_**required**_) + +Type: `string` + +The name of the NestJS project to convert. + +### ignoreExistingTslintConfig + +Default: `false` + +Type: `boolean` + +If true we will not use existing TSLint config as a reference, we will just reset the project with the latest recommended ESLint config. + +### removeTSLintIfNoMoreTSLintTargets + +Default: `true` + +Type: `boolean` + +If this conversion leaves no more TSLint usage in the workspace, it will remove TSLint and related dependencies and configuration. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. diff --git a/docs/default/api-nest/generators/decorator.md b/docs/default/api-nest/generators/decorator.md new file mode 100644 index 0000000000..30e98953db --- /dev/null +++ b/docs/default/api-nest/generators/decorator.md @@ -0,0 +1,76 @@ +--- +title: '@nrwl/nest:decorator generator' +description: 'Run the `decorator` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:decorator + +Run the `decorator` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate decorator ... +``` + +By default, Nx will search for `decorator` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:decorator ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g decorator ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the decorator. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest decorator language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. diff --git a/docs/default/api-nest/generators/filter.md b/docs/default/api-nest/generators/filter.md new file mode 100644 index 0000000000..ebd2cf9c75 --- /dev/null +++ b/docs/default/api-nest/generators/filter.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:filter generator' +description: 'Run the `filter` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:filter + +Run the `filter` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate filter ... +``` + +By default, Nx will search for `filter` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:filter ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g filter ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the filter. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest filter language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/gateway.md b/docs/default/api-nest/generators/gateway.md new file mode 100644 index 0000000000..4ae8d463da --- /dev/null +++ b/docs/default/api-nest/generators/gateway.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:gateway generator' +description: 'Run the `gateway` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:gateway + +Run the `gateway` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate gateway ... +``` + +By default, Nx will search for `gateway` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:gateway ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g gateway ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the gateway. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest gateway language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/guard.md b/docs/default/api-nest/generators/guard.md new file mode 100644 index 0000000000..e42e94cef4 --- /dev/null +++ b/docs/default/api-nest/generators/guard.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:guard generator' +description: 'Run the `guard` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:guard + +Run the `guard` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate guard ... +``` + +By default, Nx will search for `guard` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:guard ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g guard ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the guard. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest guard language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/interceptor.md b/docs/default/api-nest/generators/interceptor.md new file mode 100644 index 0000000000..f48bf5cfd5 --- /dev/null +++ b/docs/default/api-nest/generators/interceptor.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:interceptor generator' +description: 'Run the `interceptor` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:interceptor + +Run the `interceptor` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate interceptor ... +``` + +By default, Nx will search for `interceptor` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:interceptor ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g interceptor ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the interceptor. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest interceptor language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/interface.md b/docs/default/api-nest/generators/interface.md new file mode 100644 index 0000000000..c92aa0cb54 --- /dev/null +++ b/docs/default/api-nest/generators/interface.md @@ -0,0 +1,68 @@ +--- +title: '@nrwl/nest:interface generator' +description: 'Run the `interface` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:interface + +Run the `interface` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate interface ... +``` + +By default, Nx will search for `interface` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:interface ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g interface ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the interface. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. diff --git a/docs/default/api-nest/generators/library.md b/docs/default/api-nest/generators/library.md new file mode 100644 index 0000000000..4a886fcea6 --- /dev/null +++ b/docs/default/api-nest/generators/library.md @@ -0,0 +1,186 @@ +--- +title: '@nrwl/nest:library generator' +description: 'Create a new NestJS library.' +--- + +# @nrwl/nest:library + +Create a new NestJS library. + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name. + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### controller + +Default: `false` + +Type: `boolean` + +Include a controller with the library. + +### directory + +Alias(es): dir + +Type: `string` + +A directory where the library is placed. + +### global + +Default: `false` + +Type: `boolean` + +Add the Global decorator to the generated module. + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib. Must be a valid npm name. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `none` + +The tool to use for running lint checks. + +### publishable + +Type: `boolean` + +Create a publishable library. + +### service + +Default: `false` + +Type: `boolean` + +Include a service with the library. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.base.json for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### strict + +Default: `false` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the library (used for linting). + +### target + +Default: `es6` + +Type: `string` + +Possible values: `es5`, `es6`, `esnext`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020` + +The ES target, Nest suggest using es6 or higher. + +### testEnvironment + +Default: `node` + +Type: `string` + +Possible values: `jsdom`, `node` + +The test environment for jest, for node applications this should stay as node unless doing DOM testing. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/middleware.md b/docs/default/api-nest/generators/middleware.md new file mode 100644 index 0000000000..5e4b0c40a3 --- /dev/null +++ b/docs/default/api-nest/generators/middleware.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:middleware generator' +description: 'Run the `middleware` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:middleware + +Run the `middleware` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate middleware ... +``` + +By default, Nx will search for `middleware` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:middleware ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g middleware ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the middleware. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest middleware language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/module.md b/docs/default/api-nest/generators/module.md new file mode 100644 index 0000000000..a98640fa8d --- /dev/null +++ b/docs/default/api-nest/generators/module.md @@ -0,0 +1,90 @@ +--- +title: '@nrwl/nest:module generator' +description: 'Run the `module` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:module + +Run the `module` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate module ... +``` + +By default, Nx will search for `module` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:module ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g module ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the module. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `false` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest module language. + +### module + +Type: `string` + +The path to import the module. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipImport + +Default: `false` + +Type: `boolean` + +Flag to skip the module import. diff --git a/docs/default/api-nest/generators/pipe.md b/docs/default/api-nest/generators/pipe.md new file mode 100644 index 0000000000..2b19264077 --- /dev/null +++ b/docs/default/api-nest/generators/pipe.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:pipe generator' +description: 'Run the `pipe` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:pipe + +Run the `pipe` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate pipe ... +``` + +By default, Nx will search for `pipe` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:pipe ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g pipe ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the pipe. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest pipe language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/provider.md b/docs/default/api-nest/generators/provider.md new file mode 100644 index 0000000000..17e4166dd8 --- /dev/null +++ b/docs/default/api-nest/generators/provider.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:provider generator' +description: 'Run the `provider` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:provider + +Run the `provider` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate provider ... +``` + +By default, Nx will search for `provider` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:provider ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g provider ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the provider. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `true` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest provider language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/resolver.md b/docs/default/api-nest/generators/resolver.md new file mode 100644 index 0000000000..afca3530fb --- /dev/null +++ b/docs/default/api-nest/generators/resolver.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:resolver generator' +description: 'Run the `resolver` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:resolver + +Run the `resolver` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate resolver ... +``` + +By default, Nx will search for `resolver` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:resolver ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g resolver ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the resolver. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `false` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest resolver language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/resource.md b/docs/default/api-nest/generators/resource.md new file mode 100644 index 0000000000..35e19905aa --- /dev/null +++ b/docs/default/api-nest/generators/resource.md @@ -0,0 +1,112 @@ +--- +title: '@nrwl/nest:resource generator' +description: 'Run the `resource` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:resource + +Run the `resource` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate resource ... +``` + +By default, Nx will search for `resource` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:resource ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g resource ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the resource. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### crud + +Default: `true` + +Type: `boolean` + +When true, CRUD entry points are generated. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `false` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest class language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipImport + +Default: `false` + +Type: `boolean` + +Flag to skip the module import. + +### type + +Default: `rest` + +Type: `string` + +Possible values: `rest`, `graphql-code-first`, `graphql-schema-first`, `microservice`, `ws` + +The transport layer. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-nest/generators/service.md b/docs/default/api-nest/generators/service.md new file mode 100644 index 0000000000..976473c4f8 --- /dev/null +++ b/docs/default/api-nest/generators/service.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/nest:service generator' +description: 'Run the `service` NestJS generator with Nx project support.' +--- + +# @nrwl/nest:service + +Run the `service` NestJS generator with Nx project support. + +## Usage + +```bash +nx generate service ... +``` + +By default, Nx will search for `service` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nest:service ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g service ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the service. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The Nest project to target. + +### directory + +Alias(es): dir,path + +Type: `string` + +Directory where the generated files are placed. + +### flat + +Default: `false` + +Type: `boolean` + +Flag to indicate if a directory is created. + +### language + +Type: `string` + +Possible values: `js`, `ts` + +Nest service language. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-next/executors/build.md b/docs/default/api-next/executors/build.md new file mode 100644 index 0000000000..a1af2f6040 --- /dev/null +++ b/docs/default/api-next/executors/build.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/next:build executor' +description: 'Build a Next.js app' +--- + +# @nrwl/next:build + +Build a Next.js app + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### outputPath (_**required**_) + +Type: `string` + +The output path of the generated files. + +### root (_**required**_) + +Type: `string` + +The source root + +### buildLibsFromSource + +Default: `true` + +Type: `boolean` + +Read buildable libraries from source instead of building them separately. + +### fileReplacements + +Type: `object[]` + +Replace files with other files in the build. + +#### replace + +Type: `string` + +The file to be replaced. + +#### with + +Type: `string` + +The file to replace with. + +### nextConfig + +Type: `string` + +Path (relative to workspace root) to a function which takes phase, config, and builder options, and returns the resulting config. This is an advanced option and should not be used with a normal Next.js config file (i.e. next.config.js). diff --git a/docs/default/api-next/executors/export.md b/docs/default/api-next/executors/export.md new file mode 100644 index 0000000000..293a7872be --- /dev/null +++ b/docs/default/api-next/executors/export.md @@ -0,0 +1,40 @@ +--- +title: '@nrwl/next:export executor' +description: 'Export a Next.js app. The exported application is located at dist/$outputPath/exported.' +--- + +# @nrwl/next:export + +Export a Next.js app. The exported application is located at dist/$outputPath/exported. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildLibsFromSource + +Default: `true` + +Type: `boolean` + +Read buildable libraries from source instead of building them separately. + +### buildTarget + +Type: `string` + +Target which builds the application + +### silent + +Default: `false` + +Type: `boolean` + +Hide progress or not (default is false) + +### threads + +Type: `number` + +Number of worker threads to utilize (defaults to the number of CPUs) diff --git a/docs/default/api-next/executors/server.md b/docs/default/api-next/executors/server.md new file mode 100644 index 0000000000..7d3baf7f3e --- /dev/null +++ b/docs/default/api-next/executors/server.md @@ -0,0 +1,76 @@ +--- +title: '@nrwl/next:server executor' +description: 'Serve a Next.js app' +--- + +# @nrwl/next:server + +Serve a Next.js app + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget (_**required**_) + +Type: `string` + +Target which builds the application + +### buildLibsFromSource + +Default: `true` + +Type: `boolean` + +Read buildable libraries from source instead of building them separately. + +### customServerPath + +Type: `string` + +Use a custom server script + +### dev + +Default: `true` + +Type: `boolean` + +Serve the application in the dev mode + +### hostname + +Type: `string` + +Hostname on which the application is served. + +### port + +Default: `4200` + +Type: `number` + +Port to listen on. + +### proxyConfig + +Type: `string` + +Path to the proxy configuration file. + +### quiet + +Default: `false` + +Type: `boolean` + +Hide error messages containing server information. + +### staticMarkup + +Default: `false` + +Type: `boolean` + +Static markup. diff --git a/docs/default/api-next/generators/application.md b/docs/default/api-next/generators/application.md new file mode 100644 index 0000000000..03d7b90102 --- /dev/null +++ b/docs/default/api-next/generators/application.md @@ -0,0 +1,158 @@ +--- +title: '@nrwl/next:application generator' +description: 'Create a Next.js application' +--- + +# @nrwl/next:application + +Create a Next.js application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/next:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +### Examples + +Generate apps/myorg/myapp and apps/myorg/myapp-e2e: + +```bash +nx g app myapp --directory=myorg +``` + +## Options + +### directory + +Alias(es): d + +Type: `string` + +The directory of the new application. + +### e2eTestRunner + +Default: `cypress` + +Type: `string` + +Possible values: `cypress`, `none` + +Test runner to use for end to end (e2e) tests + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### server + +Type: `string` + +The server script path to be used with next. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipWorkspaceJson + +Default: `false` + +Type: `boolean` + +Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style) + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx` + +The file extension to be used for style files. + +### swc + +Default: `true` + +Type: `boolean` + +Enable the Rust-based compiler SWC to compile JS/TS files. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the application (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-next/generators/component.md b/docs/default/api-next/generators/component.md new file mode 100644 index 0000000000..b3528c8138 --- /dev/null +++ b/docs/default/api-next/generators/component.md @@ -0,0 +1,112 @@ +--- +title: '@nrwl/next:component generator' +description: 'Create a React component' +--- + +# @nrwl/next:component + +Create a React component + +## Usage + +```bash +nx generate component ... +``` + +By default, Nx will search for `component` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/next:component ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component ... --dry-run +``` + +### Examples + +Generate a component in the mylib library: + +```bash +nx g component my-component --project=mylib +``` + +Generate a class component in the mylib library: + +```bash +nx g component my-component --project=mylib --classComponent +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### directory + +Alias(es): dir + +Type: `string` + +Create the component under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new component. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx` + +The file extension to be used for style files. diff --git a/docs/default/api-next/generators/page.md b/docs/default/api-next/generators/page.md new file mode 100644 index 0000000000..df12dbd371 --- /dev/null +++ b/docs/default/api-next/generators/page.md @@ -0,0 +1,106 @@ +--- +title: '@nrwl/next:page generator' +description: 'Create a Next.js page component' +--- + +# @nrwl/next:page + +Create a Next.js page component + +## Usage + +```bash +nx generate page ... +``` + +By default, Nx will search for `page` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/next:page ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g page ... --dry-run +``` + +### Examples + +Generate a page in the my-app application: + +```bash +nx nx g page my-new-page --project=my-app +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### directory + +Alias(es): dir + +Type: `string` + +Create the page under this directory (can be nested). Will be created under 'pages/'. + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. + +### withTests + +Default: `false` + +Type: `boolean` + +When true, creates a "spec.ts" test file for the new page. diff --git a/docs/default/api-node/executors/build.md b/docs/default/api-node/executors/build.md new file mode 100644 index 0000000000..e7334603f1 --- /dev/null +++ b/docs/default/api-node/executors/build.md @@ -0,0 +1,188 @@ +--- +title: '@nrwl/node:build executor' +description: 'Build a Node application' +--- + +# @nrwl/node:build + +Build a Node application + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### main (_**required**_) + +Type: `string` + +The name of the main entry-point file. + +### tsConfig (_**required**_) + +Type: `string` + +The name of the Typescript configuration file. + +### additionalEntryPoints + +Type: `object[]` + +#### entryName + +Type: `string` + +Name of the additional entry file + +#### entryPath + +Type: `string` + +Path to the additional entry file + +### assets + +Type: `array` + +List of static application assets. + +### buildLibsFromSource + +Default: `true` + +Type: `boolean` + +Read buildable libraries from source instead of building them separately. + +### externalDependencies + +Default: `all` + +Type: `string | string[] ` + +Dependencies to keep external to the bundle. ("all" (default), "none", or an array of module names) + +### extractLicenses + +Default: `false` + +Type: `boolean` + +Extract all licenses in a separate file, in the case of production builds only. + +### fileReplacements + +Type: `object[]` + +Replace files with other files in the build. + +#### replace + +Type: `string` + +The file to be replaced. + +#### with + +Type: `string` + +The file to replace with. + +### generatePackageJson + +Default: `false` + +Type: `boolean` + +Generates a package.json file with the project's node_module dependencies populated for installing in a container. If a package.json exists in the project's directory, it will be reused with dependencies populated. + +### maxWorkers + +Type: `number` + +Number of workers to use for type checking. (defaults to # of CPUS - 2) + +### memoryLimit + +Type: `number` + +Memory limit for type checking service process in MB. (defaults to 2048) + +### optimization + +Default: `false` + +Type: `boolean` + +Defines the optimization level of the build. + +### outputFileName + +Default: `main.js` + +Type: `string` + +Name of the main output file. (defaults to 'main.js') + +### outputPath + +Type: `string` + +The output path of the generated files. + +### poll + +Type: `number` + +Frequency of file watcher in ms. + +### progress + +Default: `false` + +Type: `boolean` + +Log progress to the console while building. + +### sourceMap + +Default: `true` + +Type: `boolean` + +Produce source maps. + +### statsJson + +Default: `false` + +Type: `boolean` + +Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or . + +### tsPlugins + +Type: `array` + +List of TypeScript Compiler Plugins. + +### verbose + +Default: `false` + +Type: `boolean` + +Emits verbose output + +### watch + +Default: `false` + +Type: `boolean` + +Run build when files change. + +### webpackConfig + +Type: `array[] | string ` + +Path to a function which takes a webpack config, context and returns the resulting webpack config diff --git a/docs/default/api-node/executors/execute.md b/docs/default/api-node/executors/execute.md new file mode 100644 index 0000000000..b90e8bedd7 --- /dev/null +++ b/docs/default/api-node/executors/execute.md @@ -0,0 +1,68 @@ +--- +title: '@nrwl/node:execute executor' +description: 'Execute a Node application' +--- + +# @nrwl/node:execute + +Execute a Node application + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget (_**required**_) + +Type: `string` + +The target to run to build you the app + +### args + +Type: `array` + +Extra args when starting the app + +### host + +Default: `localhost` + +Type: `string` + +The host to inspect the process on + +### inspect + +Default: `inspect` + +Type: `string | boolean ` + +Ensures the app is starting with debugging + +### port + +Default: `9229` + +Type: `number` + +The port to inspect the process on. Setting port to 0 will assign random free ports to all forked processes. + +### runtimeArgs + +Type: `array` + +Extra args passed to the node process + +### waitUntilTargets + +Type: `array` + +The targets to run to before starting the node app + +### watch + +Default: `true` + +Type: `boolean` + +Run build when files change diff --git a/docs/default/api-node/executors/package.md b/docs/default/api-node/executors/package.md new file mode 100644 index 0000000000..8791c8fb39 --- /dev/null +++ b/docs/default/api-node/executors/package.md @@ -0,0 +1,102 @@ +--- +title: '@nrwl/node:package executor' +description: 'Package a Node library' +--- + +# @nrwl/node:package + +Package a Node library + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### main (_**required**_) + +Type: `string` + +The name of the main entry-point file. + +### tsConfig (_**required**_) + +Type: `string` + +The name of the Typescript configuration file. + +### assets + +Type: `array` + +List of static library assets. + +### buildableProjectDepsInPackageJsonType + +Default: `dependencies` + +Type: `string` + +Possible values: `dependencies`, `peerDependencies` + +When updateBuildableProjectDepsInPackageJson is true, this adds dependencies to either `peerDependencies` or `dependencies` + +### cli + +Type: `boolean` + +Adds a CLI wrapper to main entry-point file. + +### deleteOutputPath + +Default: `true` + +Type: `boolean` + +Delete the output path before building. + +### outputPath + +Type: `string` + +The output path of the generated files. + +### packageJson + +Type: `string` + +The name of the package.json file + +### sourceMap + +Default: `true` + +Type: `boolean` + +Output sourcemaps. + +### srcRootForCompilationRoot + +Type: `string` + +Sets the rootDir for TypeScript compilation. When not defined, it uses the project's root property + +### tsPlugins + +Type: `array` + +List of TypeScript Compiler Plugins. + +### updateBuildableProjectDepsInPackageJson + +Default: `true` + +Type: `boolean` + +Update buildable project dependencies in package.json + +### watch + +Default: `false` + +Type: `boolean` + +Enable re-building when files change. diff --git a/docs/default/api-node/generators/application.md b/docs/default/api-node/generators/application.md new file mode 100644 index 0000000000..3144b0ab63 --- /dev/null +++ b/docs/default/api-node/generators/application.md @@ -0,0 +1,134 @@ +--- +title: '@nrwl/node:application generator' +description: 'Create a node application' +--- + +# @nrwl/node:application + +Create a node application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/node:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### babelJest + +Default: `false` + +Type: `boolean` + +Use babel instead ts-jest + +### directory + +Type: `string` + +The directory of the new application. + +### frontendProject + +Type: `string` + +Frontend project that needs to access this application. This sets up proxy configuration. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipPackageJson + +Default: `false` + +Type: `boolean` + +Do not add dependencies to package.json. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### tags + +Type: `string` + +Add tags to the application (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-node/generators/library.md b/docs/default/api-node/generators/library.md new file mode 100644 index 0000000000..7125261ae5 --- /dev/null +++ b/docs/default/api-node/generators/library.md @@ -0,0 +1,194 @@ +--- +title: '@nrwl/node:library generator' +description: 'Create a library' +--- + +# @nrwl/node:library + +Create a library + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/node:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### babelJest + +Default: `false` + +Type: `boolean` + +Use babel instead ts-jest + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### directory + +Alias(es): dir + +Type: `string` + +A directory where the lib is placed + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib. Must be a valid npm name. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### publishable + +Type: `boolean` + +Create a publishable library. + +### rootDir + +Alias(es): srcRootForCompilationRoot + +Type: `string` + +Sets the rootDir for TypeScript compilation. When not defined, it uses the project's root property, or srcRootForCompilationRoot if it is defined. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### simpleModuleName + +Default: `false` + +Type: `boolean` + +Keep the module name simple (when using --directory) + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.base.json for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### strict + +Default: `false` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the library (used for linting) + +### testEnvironment + +Default: `jsdom` + +Type: `string` + +Possible values: `jsdom`, `node` + +The test environment to use if unitTestRunner is set to jest + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-nx-devkit/index.md b/docs/default/api-nx-devkit/index.md new file mode 100644 index 0000000000..9fd0627ea3 --- /dev/null +++ b/docs/default/api-nx-devkit/index.md @@ -0,0 +1,1646 @@ +# Module: index + +The Nx Devkit is the underlying technology used to customize Nx to support +different technologies and custom use-cases. It contains many utility +functions for reading and writing files, updating configuration, +working with Abstract Syntax Trees(ASTs), and more. + +As with most things in Nx, the core of Nx Devkit is very simple. +It only uses language primitives and immutable objects +(the tree being the only exception). + +## Table of contents + +### Project Graph Enumerations + +- [DependencyType](../../default/nx-devkit/index#dependencytype) + +### Utils Enumerations + +- [ChangeType](../../default/nx-devkit/index#changetype) + +### Project Graph Classes + +- [ProjectGraphBuilder](../../default/nx-devkit/index#projectgraphbuilder) + +### Commands Interfaces + +- [Target](../../default/nx-devkit/index#target) + +### Other Interfaces + +- [NxPlugin](../../default/nx-devkit/index#nxplugin) + +### Project Graph Interfaces + +- [FileData](../../default/nx-devkit/index#filedata) +- [ProjectFileMap](../../default/nx-devkit/index#projectfilemap) +- [ProjectGraph](../../default/nx-devkit/index#projectgraph) +- [ProjectGraphDependency](../../default/nx-devkit/index#projectgraphdependency) +- [ProjectGraphExternalNode](../../default/nx-devkit/index#projectgraphexternalnode) +- [ProjectGraphProcessorContext](../../default/nx-devkit/index#projectgraphprocessorcontext) +- [ProjectGraphProjectNode](../../default/nx-devkit/index#projectgraphprojectnode) + +### Tree Interfaces + +- [FileChange](../../default/nx-devkit/index#filechange) +- [Tree](../../default/nx-devkit/index#tree) + +### Utils Interfaces + +- [JsonParseOptions](../../default/nx-devkit/index#jsonparseoptions) +- [JsonSerializeOptions](../../default/nx-devkit/index#jsonserializeoptions) +- [StringDeletion](../../default/nx-devkit/index#stringdeletion) +- [StringInsertion](../../default/nx-devkit/index#stringinsertion) + +### Workspace Interfaces + +- [ExecutorContext](../../default/nx-devkit/index#executorcontext) +- [ImplicitJsonSubsetDependency](../../default/nx-devkit/index#implicitjsonsubsetdependency) +- [NxAffectedConfig](../../default/nx-devkit/index#nxaffectedconfig) +- [NxJsonConfiguration](../../default/nx-devkit/index#nxjsonconfiguration) +- [NxJsonProjectConfiguration](../../default/nx-devkit/index#nxjsonprojectconfiguration) +- [ProjectConfiguration](../../default/nx-devkit/index#projectconfiguration) +- [TargetConfiguration](../../default/nx-devkit/index#targetconfiguration) +- [TargetDependencyConfig](../../default/nx-devkit/index#targetdependencyconfig) +- [Task](../../default/nx-devkit/index#task) +- [TaskGraph](../../default/nx-devkit/index#taskgraph) +- [Workspace](../../default/nx-devkit/index#workspace) +- [WorkspaceJsonConfiguration](../../default/nx-devkit/index#workspacejsonconfiguration) + +### Generators Type aliases + +- [WorkspaceConfiguration](../../default/nx-devkit/index#workspaceconfiguration) + +### Other Type aliases + +- [ProjectTargetConfigurator](../../default/nx-devkit/index#projecttargetconfigurator) + +### Package Manager Type aliases + +- [PackageManager](../../default/nx-devkit/index#packagemanager) + +### Project Graph Type aliases + +- [ProjectGraphNode](../../default/nx-devkit/index#projectgraphnode) + +### Utils Type aliases + +- [StringChange](../../default/nx-devkit/index#stringchange) + +### Workspace Type aliases + +- [Executor](../../default/nx-devkit/index#executor) +- [Generator](../../default/nx-devkit/index#generator) +- [GeneratorCallback](../../default/nx-devkit/index#generatorcallback) +- [ImplicitDependencyEntry](../../default/nx-devkit/index#implicitdependencyentry) +- [ProjectType](../../default/nx-devkit/index#projecttype) +- [TaskGraphExecutor](../../default/nx-devkit/index#taskgraphexecutor) + +### Logger Variables + +- [logger](../../default/nx-devkit/index#logger) + +### Functions + +- [addDependenciesToPackageJson](../../default/nx-devkit/index#adddependenciestopackagejson) +- [addProjectConfiguration](../../default/nx-devkit/index#addprojectconfiguration) +- [applyChangesToString](../../default/nx-devkit/index#applychangestostring) +- [convertNxExecutor](../../default/nx-devkit/index#convertnxexecutor) +- [convertNxGenerator](../../default/nx-devkit/index#convertnxgenerator) +- [detectPackageManager](../../default/nx-devkit/index#detectpackagemanager) +- [formatFiles](../../default/nx-devkit/index#formatfiles) +- [generateFiles](../../default/nx-devkit/index#generatefiles) +- [getPackageManagerCommand](../../default/nx-devkit/index#getpackagemanagercommand) +- [getPackageManagerVersion](../../default/nx-devkit/index#getpackagemanagerversion) +- [getProjects](../../default/nx-devkit/index#getprojects) +- [getWorkspaceLayout](../../default/nx-devkit/index#getworkspacelayout) +- [getWorkspacePath](../../default/nx-devkit/index#getworkspacepath) +- [installPackagesTask](../../default/nx-devkit/index#installpackagestask) +- [isStandaloneProject](../../default/nx-devkit/index#isstandaloneproject) +- [joinPathFragments](../../default/nx-devkit/index#joinpathfragments) +- [moveFilesToNewDirectory](../../default/nx-devkit/index#movefilestonewdirectory) +- [names](../../default/nx-devkit/index#names) +- [normalizePath](../../default/nx-devkit/index#normalizepath) +- [offsetFromRoot](../../default/nx-devkit/index#offsetfromroot) +- [parseJson](../../default/nx-devkit/index#parsejson) +- [parseTargetString](../../default/nx-devkit/index#parsetargetstring) +- [readJson](../../default/nx-devkit/index#readjson) +- [readJsonFile](../../default/nx-devkit/index#readjsonfile) +- [readProjectConfiguration](../../default/nx-devkit/index#readprojectconfiguration) +- [readTargetOptions](../../default/nx-devkit/index#readtargetoptions) +- [readWorkspaceConfiguration](../../default/nx-devkit/index#readworkspaceconfiguration) +- [removeDependenciesFromPackageJson](../../default/nx-devkit/index#removedependenciesfrompackagejson) +- [removeProjectConfiguration](../../default/nx-devkit/index#removeprojectconfiguration) +- [runExecutor](../../default/nx-devkit/index#runexecutor) +- [serializeJson](../../default/nx-devkit/index#serializejson) +- [stripIndents](../../default/nx-devkit/index#stripindents) +- [stripJsonComments](../../default/nx-devkit/index#stripjsoncomments) +- [targetToTargetString](../../default/nx-devkit/index#targettotargetstring) +- [toJS](../../default/nx-devkit/index#tojs) +- [updateJson](../../default/nx-devkit/index#updatejson) +- [updateProjectConfiguration](../../default/nx-devkit/index#updateprojectconfiguration) +- [updateTsConfigsToJs](../../default/nx-devkit/index#updatetsconfigstojs) +- [updateWorkspaceConfiguration](../../default/nx-devkit/index#updateworkspaceconfiguration) +- [visitNotIgnoredFiles](../../default/nx-devkit/index#visitnotignoredfiles) +- [writeJson](../../default/nx-devkit/index#writejson) +- [writeJsonFile](../../default/nx-devkit/index#writejsonfile) + +## Project Graph Enumerations + +### DependencyType + +• **DependencyType**: `Object` + +--- + +## Utils Enumerations + +### ChangeType + +• **ChangeType**: `Object` + +## Project Graph Classes + +### ProjectGraphBuilder + +• **ProjectGraphBuilder**: `Object` + +## Commands Interfaces + +### Target + +• **Target**: `Object` + +--- + +## Other Interfaces + +### NxPlugin + +• **NxPlugin**: `Object` + +A plugin for Nx + +--- + +## Project Graph Interfaces + +### FileData + +• **FileData**: `Object` + +--- + +### ProjectFileMap + +• **ProjectFileMap**: `Object` + +--- + +### ProjectGraph + +• **ProjectGraph**<`T`\>: `Object` + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +--- + +### ProjectGraphDependency + +• **ProjectGraphDependency**: `Object` + +--- + +### ProjectGraphExternalNode + +• **ProjectGraphExternalNode**: `Object` + +--- + +### ProjectGraphProcessorContext + +• **ProjectGraphProcessorContext**: `Object` + +--- + +### ProjectGraphProjectNode + +• **ProjectGraphProjectNode**<`T`\>: `Object` + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +--- + +## Tree Interfaces + +### FileChange + +• **FileChange**: `Object` + +--- + +### Tree + +• **Tree**: `Object` + +--- + +## Utils Interfaces + +### JsonParseOptions + +• **JsonParseOptions**: `Object` + +--- + +### JsonSerializeOptions + +• **JsonSerializeOptions**: `Object` + +--- + +### StringDeletion + +• **StringDeletion**: `Object` + +--- + +### StringInsertion + +• **StringInsertion**: `Object` + +--- + +## Workspace Interfaces + +### ExecutorContext + +• **ExecutorContext**: `Object` + +--- + +### ImplicitJsonSubsetDependency + +• **ImplicitJsonSubsetDependency**<`T`\>: `Object` + +#### Type parameters + +| Name | Type | +| :--- | :------------------ | +| `T` | `"*"` \| `string`[] | + +--- + +### NxAffectedConfig + +• **NxAffectedConfig**: `Object` + +--- + +### NxJsonConfiguration + +• **NxJsonConfiguration**<`T`\>: `Object` + +#### Type parameters + +| Name | Type | +| :--- | :------------------ | +| `T` | `"*"` \| `string`[] | + +--- + +### NxJsonProjectConfiguration + +• **NxJsonProjectConfiguration**: `Object` + +--- + +### ProjectConfiguration + +• **ProjectConfiguration**: `Object` + +--- + +### TargetConfiguration + +• **TargetConfiguration**: `Object` + +--- + +### TargetDependencyConfig + +• **TargetDependencyConfig**: `Object` + +--- + +### Task + +• **Task**: `Object` + +--- + +### TaskGraph + +• **TaskGraph**: `Object` + +--- + +### Workspace + +• **Workspace**: `Object` + +--- + +### WorkspaceJsonConfiguration + +• **WorkspaceJsonConfiguration**: `Object` + +## Generators Type aliases + +### WorkspaceConfiguration + +Ƭ **WorkspaceConfiguration**: `Omit`<[`WorkspaceJsonConfiguration`](../../default/nx-devkit/index#workspacejsonconfiguration), `"projects"`\> & `Partial`<[`NxJsonConfiguration`](../../default/nx-devkit/index#nxjsonconfiguration)\> + +--- + +## Other Type aliases + +### ProjectTargetConfigurator + +Ƭ **ProjectTargetConfigurator**: (`file`: `string`) => `Record`<`string`, [`TargetConfiguration`](../../default/nx-devkit/index#targetconfiguration)\> + +#### Type declaration + +▸ (`file`): `Record`<`string`, [`TargetConfiguration`](../../default/nx-devkit/index#targetconfiguration)\> + +##### Parameters + +| Name | Type | +| :----- | :------- | +| `file` | `string` | + +##### Returns + +`Record`<`string`, [`TargetConfiguration`](../../default/nx-devkit/index#targetconfiguration)\> + +--- + +## Package Manager Type aliases + +### PackageManager + +Ƭ **PackageManager**: `"yarn"` \| `"pnpm"` \| `"npm"` + +--- + +## Project Graph Type aliases + +### ProjectGraphNode + +Ƭ **ProjectGraphNode**<`T`\>: [`ProjectGraphProjectNode`](../../default/nx-devkit/index#projectgraphprojectnode)<`T`\> \| [`ProjectGraphExternalNode`](../../default/nx-devkit/index#projectgraphexternalnode) + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +--- + +## Utils Type aliases + +### StringChange + +Ƭ **StringChange**: [`StringInsertion`](../../default/nx-devkit/index#stringinsertion) \| [`StringDeletion`](../../default/nx-devkit/index#stringdeletion) + +--- + +## Workspace Type aliases + +### Executor + +Ƭ **Executor**<`T`\>: (`options`: `T`, `context`: [`ExecutorContext`](../../default/nx-devkit/index#executorcontext)) => `Promise`<`Object`\> \| `AsyncIterableIterator`<`Object`\> + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +#### Type declaration + +▸ (`options`, `context`): `Promise`<`Object`\> \| `AsyncIterableIterator`<`Object`\> + +Implementation of a target of a project + +##### Parameters + +| Name | Type | +| :-------- | :----------------------------------------------------------------- | +| `options` | `T` | +| `context` | [`ExecutorContext`](../../default/nx-devkit/index#executorcontext) | + +##### Returns + +`Promise`<`Object`\> \| `AsyncIterableIterator`<`Object`\> + +--- + +### Generator + +Ƭ **Generator**<`T`\>: (`tree`: `any`, `schema`: `T`) => `void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) \| `Promise`<`void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback)\> + +#### Type parameters + +| Name | Type | +| :--- | :-------- | +| `T` | `unknown` | + +#### Type declaration + +▸ (`tree`, `schema`): `void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) \| `Promise`<`void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback)\> + +A function that schedules updates to the filesystem to be done atomically + +##### Parameters + +| Name | Type | +| :------- | :---- | +| `tree` | `any` | +| `schema` | `T` | + +##### Returns + +`void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) \| `Promise`<`void` \| [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback)\> + +--- + +### GeneratorCallback + +Ƭ **GeneratorCallback**: () => `void` \| `Promise`<`void`\> + +#### Type declaration + +▸ (): `void` \| `Promise`<`void`\> + +A callback function that is executed after changes are made to the file system + +##### Returns + +`void` \| `Promise`<`void`\> + +--- + +### ImplicitDependencyEntry + +Ƭ **ImplicitDependencyEntry**<`T`\>: `Object` + +#### Type parameters + +| Name | Type | +| :--- | :------------------ | +| `T` | `"*"` \| `string`[] | + +#### Index signature + +▪ [key: `string`]: `T` \| [`ImplicitJsonSubsetDependency`](../../default/nx-devkit/index#implicitjsonsubsetdependency)<`T`\> + +--- + +### ProjectType + +Ƭ **ProjectType**: `"library"` \| `"application"` + +--- + +### TaskGraphExecutor + +Ƭ **TaskGraphExecutor**<`T`\>: (`taskGraph`: [`TaskGraph`](../../default/nx-devkit/index#taskgraph), `options`: `Record`<`string`, `T`\>, `overrides`: `T`, `context`: [`ExecutorContext`](../../default/nx-devkit/index#executorcontext)) => `Promise`<`Record`<`string`, `Object`\>\> + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +#### Type declaration + +▸ (`taskGraph`, `options`, `overrides`, `context`): `Promise`<`Record`<`string`, `Object`\>\> + +Implementation of a target of a project that handles multiple projects to be batched + +##### Parameters + +| Name | Type | +| :---------- | :----------------------------------------------------------------- | +| `taskGraph` | [`TaskGraph`](../../default/nx-devkit/index#taskgraph) | +| `options` | `Record`<`string`, `T`\> | +| `overrides` | `T` | +| `context` | [`ExecutorContext`](../../default/nx-devkit/index#executorcontext) | + +##### Returns + +`Promise`<`Record`<`string`, `Object`\>\> + +## Logger Variables + +### logger + +• **logger**: `Object` + +#### Type declaration + +| Name | Type | +| :------ | :-------------------------- | +| `debug` | (...`s`: `any`[]) => `void` | +| `error` | (`s`: `any`) => `void` | +| `fatal` | (...`s`: `any`[]) => `void` | +| `info` | (`s`: `any`) => `void` | +| `log` | (...`s`: `any`[]) => `void` | +| `warn` | (`s`: `any`) => `void` | + +## Functions + +### addDependenciesToPackageJson + +▸ **addDependenciesToPackageJson**(`tree`, `dependencies`, `devDependencies`, `packageJsonPath?`): [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) + +Add Dependencies and Dev Dependencies to package.json + +For example: + +```typescript +addDependenciesToPackageJson(tree, { react: 'latest' }, { jest: 'latest' }); +``` + +This will **add** `react` and `jest` to the dependencies and devDependencies sections of package.json respectively. + +#### Parameters + +| Name | Type | Default value | Description | +| :---------------- | :------------------------------------------- | :--------------- | :---------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | `undefined` | Tree representing file system to modify | +| `dependencies` | `Record`<`string`, `string`\> | `undefined` | Dependencies to be added to the dependencies section of package.json | +| `devDependencies` | `Record`<`string`, `string`\> | `undefined` | Dependencies to be added to the devDependencies section of package.json | +| `packageJsonPath` | `string` | `'package.json'` | Path to package.json | + +#### Returns + +[`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) + +Callback to install dependencies only if necessary. undefined is returned if changes are not necessary. + +--- + +### addProjectConfiguration + +▸ **addProjectConfiguration**(`tree`, `projectName`, `projectConfiguration`, `standalone?`): `void` + +Adds project configuration to the Nx workspace. + +The project configuration is stored in workspace.json or the associated project.json file. +The utility will update either files. + +#### Parameters + +| Name | Type | Description | +| :--------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | +| `projectName` | `string` | unique name. Often directories are part of the name (e.g., mydir-mylib) | +| `projectConfiguration` | [`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration) | project configuration | +| `standalone?` | `boolean` | should the project use package.json? If false, the project config is inside workspace.json | + +#### Returns + +`void` + +--- + +### applyChangesToString + +▸ **applyChangesToString**(`text`, `changes`): `string` + +Applies a list of changes to a string's original value. + +This is useful when working with ASTs. + +For Example, to rename a property in a method's options: + +```typescript +const code = `bootstrap({ + target: document.querySelector('#app') +})`; + +const indexOfPropertyName = 13; // Usually determined by analyzing an AST. +const updatedCode = applyChangesToString(code, [ + { + type: ChangeType.Insert, + index: indexOfPropertyName, + text: 'element', + }, + { + type: ChangeType.Delete, + start: indexOfPropertyName, + length: 6, + }, +]); + +bootstrap({ + element: document.querySelector('#app'), +}); +``` + +#### Parameters + +| Name | Type | +| :-------- | :------------------------------------------------------------- | +| `text` | `string` | +| `changes` | [`StringChange`](../../default/nx-devkit/index#stringchange)[] | + +#### Returns + +`string` + +--- + +### convertNxExecutor + +▸ **convertNxExecutor**(`executor`): `any` + +Convert an Nx Executor into an Angular Devkit Builder + +Use this to expose a compatible Angular Builder + +#### Parameters + +| Name | Type | +| :--------- | :----------------------------------------------------------- | +| `executor` | [`Executor`](../../default/nx-devkit/index#executor)<`any`\> | + +#### Returns + +`any` + +--- + +### convertNxGenerator + +▸ **convertNxGenerator**<`T`\>(`generator`): (`options`: `T`) => (`tree`: `any`, `context`: `any`) => `Promise`<`any`\> + +Convert an Nx Generator into an Angular Devkit Schematic + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +#### Parameters + +| Name | Type | +| :---------- | :----------------------------------------------------------- | +| `generator` | [`Generator`](../../default/nx-devkit/index#generator)<`T`\> | + +#### Returns + +`fn` + +▸ (`options`): (`tree`: `any`, `context`: `any`) => `Promise`<`any`\> + +##### Parameters + +| Name | Type | +| :-------- | :--- | +| `options` | `T` | + +##### Returns + +`fn` + +▸ (`tree`, `context`): `Promise`<`any`\> + +##### Parameters + +| Name | Type | +| :-------- | :---- | +| `tree` | `any` | +| `context` | `any` | + +##### Returns + +`Promise`<`any`\> + +--- + +### detectPackageManager + +▸ **detectPackageManager**(`dir?`): [`PackageManager`](../../default/nx-devkit/index#packagemanager) + +Detects which package manager is used in the workspace based on the lock file. + +#### Parameters + +| Name | Type | Default value | +| :---- | :------- | :------------ | +| `dir` | `string` | `''` | + +#### Returns + +[`PackageManager`](../../default/nx-devkit/index#packagemanager) + +--- + +### formatFiles + +▸ **formatFiles**(`tree`): `Promise`<`void`\> + +Formats all the created or updated files using Prettier + +#### Parameters + +| Name | Type | Description | +| :----- | :------------------------------------------- | :------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | + +#### Returns + +`Promise`<`void`\> + +--- + +### generateFiles + +▸ **generateFiles**(`tree`, `srcFolder`, `target`, `substitutions`): `void` + +Generates a folder of files based on provided templates. + +While doing so it performs two substitutions: + +- Substitutes segments of file names surrounded by \_\_ +- Uses ejs to substitute values in templates + +Examples: + +```typescript +generateFiles(tree, path.join(__dirname, 'files'), './tools/scripts', { + tmpl: '', + name: 'myscript', +}); +``` + +This command will take all the files from the `files` directory next to the place where the command is invoked from. +It will replace all `__tmpl__` with '' and all `__name__` with 'myscript' in the file names, and will replace all +`<%= name %>` with `myscript` in the files themselves. +`tmpl: ''` is a common pattern. With it you can name files like this: `index.ts__tmpl__`, so your editor +doesn't get confused about incorrect TypeScript files. + +#### Parameters + +| Name | Type | Description | +| :-------------- | :------------------------------------------- | :-------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | +| `srcFolder` | `string` | the source folder of files (absolute path) | +| `target` | `string` | the target folder (relative to the tree root) | +| `substitutions` | `Object` | an object of key-value pairs | + +#### Returns + +`void` + +--- + +### getPackageManagerCommand + +▸ **getPackageManagerCommand**(`packageManager?`): `PackageManagerCommands` + +Returns commands for the package manager used in the workspace. +By default, the package manager is derived based on the lock file, +but it can also be passed in explicitly. + +Example: + +```javascript +execSync(`${getPackageManagerCommand().addDev} my-dev-package`); +``` + +#### Parameters + +| Name | Type | +| :--------------- | :--------------------------------------------------------------- | +| `packageManager` | [`PackageManager`](../../default/nx-devkit/index#packagemanager) | + +#### Returns + +`PackageManagerCommands` + +--- + +### getPackageManagerVersion + +▸ **getPackageManagerVersion**(`packageManager?`): `string` + +Returns the version of the package manager used in the workspace. +By default, the package manager is derived based on the lock file, +but it can also be passed in explicitly. + +#### Parameters + +| Name | Type | +| :--------------- | :--------------------------------------------------------------- | +| `packageManager` | [`PackageManager`](../../default/nx-devkit/index#packagemanager) | + +#### Returns + +`string` + +--- + +### getProjects + +▸ **getProjects**(`tree`): `Map`<`string`, [`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration)\> + +Get a map of all projects in a workspace. + +Use [readProjectConfiguration](../../default/nx-devkit/index#readprojectconfiguration) if only one project is needed. + +#### Parameters + +| Name | Type | +| :----- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | + +#### Returns + +`Map`<`string`, [`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration)\> + +--- + +### getWorkspaceLayout + +▸ **getWorkspaceLayout**(`tree`): `Object` + +Returns workspace defaults. It includes defaults folders for apps and libs, +and the default scope. + +Example: + +```typescript +{ appsDir: 'apps', libsDir: 'libs', npmScope: 'myorg' } +``` + +#### Parameters + +| Name | Type | Description | +| :----- | :------------------------------------------- | :--------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | file system tree | + +#### Returns + +`Object` + +| Name | Type | +| :-------------------- | :-------- | +| `appsDir` | `string` | +| `libsDir` | `string` | +| `npmScope` | `string` | +| `standaloneAsDefault` | `boolean` | + +--- + +### getWorkspacePath + +▸ **getWorkspacePath**(`tree`): `"/angular.json"` \| `"/workspace.json"` \| `null` + +#### Parameters + +| Name | Type | +| :----- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | + +#### Returns + +`"/angular.json"` \| `"/workspace.json"` \| `null` + +--- + +### installPackagesTask + +▸ **installPackagesTask**(`tree`, `alwaysRun?`, `cwd?`, `packageManager?`): `void` + +Runs `npm install` or `yarn install`. It will skip running the install if +`package.json` hasn't changed at all or it hasn't changed since the last invocation. + +#### Parameters + +| Name | Type | Default value | Description | +| :--------------- | :--------------------------------------------------------------- | :------------ | :------------------------------------------------------------ | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | `undefined` | the file system tree | +| `alwaysRun` | `boolean` | `false` | always run the command even if `package.json` hasn't changed. | +| `cwd` | `string` | `''` | - | +| `packageManager` | [`PackageManager`](../../default/nx-devkit/index#packagemanager) | `undefined` | - | + +#### Returns + +`void` + +--- + +### isStandaloneProject + +▸ **isStandaloneProject**(`tree`, `project`): `boolean` + +Returns if a project has a standalone configuration (project.json). + +#### Parameters + +| Name | Type | Description | +| :-------- | :------------------------------------------- | :------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | +| `project` | `string` | the project name | + +#### Returns + +`boolean` + +--- + +### joinPathFragments + +▸ **joinPathFragments**(...`fragments`): `string` + +Normalized path fragments and joins them + +#### Parameters + +| Name | Type | +| :------------- | :--------- | +| `...fragments` | `string`[] | + +#### Returns + +`string` + +--- + +### moveFilesToNewDirectory + +▸ **moveFilesToNewDirectory**(`tree`, `oldDir`, `newDir`): `void` + +#### Parameters + +| Name | Type | +| :------- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | +| `oldDir` | `string` | +| `newDir` | `string` | + +#### Returns + +`void` + +--- + +### names + +▸ **names**(`name`): `Object` + +Util function to generate different strings based off the provided name. + +Examples: + +```typescript +names('my-name'); // {name: 'my-name', className: 'MyName', propertyName: 'myName', constantName: 'MY_NAME', fileName: 'my-name'} +names('myName'); // {name: 'my-name', className: 'MyName', propertyName: 'myName', constantName: 'MY_NAME', fileName: 'my-name'} +``` + +#### Parameters + +| Name | Type | +| :----- | :------- | +| `name` | `string` | + +#### Returns + +`Object` + +| Name | Type | +| :------------- | :------- | +| `className` | `string` | +| `constantName` | `string` | +| `fileName` | `string` | +| `name` | `string` | +| `propertyName` | `string` | + +--- + +### normalizePath + +▸ **normalizePath**(`osSpecificPath`): `string` + +Coverts an os specific path to a unix style path + +#### Parameters + +| Name | Type | +| :--------------- | :------- | +| `osSpecificPath` | `string` | + +#### Returns + +`string` + +--- + +### offsetFromRoot + +▸ **offsetFromRoot**(`fullPathToDir`): `string` + +Calculates an offset from the root of the workspace, which is useful for +constructing relative URLs. + +Examples: + +```typescript +offsetFromRoot('apps/mydir/myapp/'); // returns "../../../" +``` + +#### Parameters + +| Name | Type | Description | +| :-------------- | :------- | :------------- | +| `fullPathToDir` | `string` | directory path | + +#### Returns + +`string` + +--- + +### parseJson + +▸ **parseJson**<`T`\>(`input`, `options?`): `T` + +Parses the given JSON string and returns the object the JSON content represents. +By default javascript-style comments are allowed. + +#### Type parameters + +| Name | Type | +| :--- | :----------------------- | +| `T` | extends `object` = `any` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :------------------------------------------------------------------- | :--------------------- | +| `input` | `string` | JSON content as string | +| `options?` | [`JsonParseOptions`](../../default/nx-devkit/index#jsonparseoptions) | JSON parse options | + +#### Returns + +`T` + +Object the JSON content represents + +--- + +### parseTargetString + +▸ **parseTargetString**(`targetString`): [`Target`](../../default/nx-devkit/index#target) + +Parses a target string into {project, target, configuration} + +Examples: + +```typescript +parseTargetString('proj:test'); // returns { project: "proj", target: "test" } +parseTargetString('proj:test:production'); // returns { project: "proj", target: "test", configuration: "production" } +``` + +#### Parameters + +| Name | Type | Description | +| :------------- | :------- | :--------------- | +| `targetString` | `string` | target reference | + +#### Returns + +[`Target`](../../default/nx-devkit/index#target) + +--- + +### readJson + +▸ **readJson**<`T`\>(`tree`, `path`, `options?`): `T` + +Reads a json file, removes all comments and parses JSON. + +#### Type parameters + +| Name | Type | +| :--- | :----------------------- | +| `T` | extends `object` = `any` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :------------------------------------------------------------------- | :-------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | file system tree | +| `path` | `string` | file path | +| `options?` | [`JsonParseOptions`](../../default/nx-devkit/index#jsonparseoptions) | Optional JSON Parse Options | + +#### Returns + +`T` + +--- + +### readJsonFile + +▸ **readJsonFile**<`T`\>(`path`, `options?`): `T` + +Reads a JSON file and returns the object the JSON content represents. + +#### Type parameters + +| Name | Type | +| :--- | :----------------------- | +| `T` | extends `object` = `any` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :---------------- | :----------------- | +| `path` | `string` | A path to a file. | +| `options?` | `JsonReadOptions` | JSON parse options | + +#### Returns + +`T` + +Object the JSON content of the file represents + +--- + +### readProjectConfiguration + +▸ **readProjectConfiguration**(`tree`, `projectName`): [`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration) + +Reads a project configuration. + +The project configuration is stored in workspace.json or the associated project.json file. +The utility will read from either file. + +**`throws`** If supplied projectName cannot be found + +#### Parameters + +| Name | Type | Description | +| :------------ | :------------------------------------------- | :---------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | +| `projectName` | `string` | unique name. Often directories are part of the name (e.g., mydir-mylib) | + +#### Returns + +[`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration) + +--- + +### readTargetOptions + +▸ **readTargetOptions**<`T`\>(`__namedParameters`, `context`): `T` + +Reads and combines options for a given target. + +Works as if you invoked the target yourself without passing any command lint overrides. + +#### Type parameters + +| Name | Type | +| :--- | :---- | +| `T` | `any` | + +#### Parameters + +| Name | Type | +| :------------------ | :----------------------------------------------------------------- | +| `__namedParameters` | [`Target`](../../default/nx-devkit/index#target) | +| `context` | [`ExecutorContext`](../../default/nx-devkit/index#executorcontext) | + +#### Returns + +`T` + +--- + +### readWorkspaceConfiguration + +▸ **readWorkspaceConfiguration**(`tree`): [`WorkspaceConfiguration`](../../default/nx-devkit/index#workspaceconfiguration) + +Read general workspace configuration such as the default project or cli settings + +This does _not_ provide projects configuration, use [readProjectConfiguration](../../default/nx-devkit/index#readprojectconfiguration) instead. + +#### Parameters + +| Name | Type | +| :----- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | + +#### Returns + +[`WorkspaceConfiguration`](../../default/nx-devkit/index#workspaceconfiguration) + +--- + +### removeDependenciesFromPackageJson + +▸ **removeDependenciesFromPackageJson**(`tree`, `dependencies`, `devDependencies`, `packageJsonPath?`): [`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) + +Remove Dependencies and Dev Dependencies from package.json + +For example: + +```typescript +removeDependenciesFromPackageJson(tree, ['react'], ['jest']); +``` + +This will **remove** `react` and `jest` from the dependencies and devDependencies sections of package.json respectively. + +#### Parameters + +| Name | Type | Default value | Description | +| :---------------- | :------------------------------------------- | :--------------- | :-------------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | `undefined` | - | +| `dependencies` | `string`[] | `undefined` | Dependencies to be removed from the dependencies section of package.json | +| `devDependencies` | `string`[] | `undefined` | Dependencies to be removed from the devDependencies section of package.json | +| `packageJsonPath` | `string` | `'package.json'` | - | + +#### Returns + +[`GeneratorCallback`](../../default/nx-devkit/index#generatorcallback) + +Callback to uninstall dependencies only if necessary. undefined is returned if changes are not necessary. + +--- + +### removeProjectConfiguration + +▸ **removeProjectConfiguration**(`tree`, `projectName`): `void` + +Removes the configuration of an existing project. + +The project configuration is stored in workspace.json or the associated project.json file. +The utility will update either file. + +#### Parameters + +| Name | Type | +| :------------ | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | +| `projectName` | `string` | + +#### Returns + +`void` + +--- + +### runExecutor + +▸ **runExecutor**<`T`\>(`targetDescription`, `options`, `context`): `Promise`<`AsyncIterableIterator`<`T`\>\> + +Loads and invokes executor. + +This is analogous to invoking executor from the terminal, with the exception +that the params aren't parsed from the string, but instead provided parsed already. + +Apart from that, it works the same way: + +- it will load the workspace configuration +- it will resolve the target +- it will load the executor and the schema +- it will load the options for the appropriate configuration +- it will run the validations and will set the default +- and, of course, it will invoke the executor + +Example: + +```typescript +for await (const s of await runExecutor( + { project: 'myproj', target: 'serve' }, + { watch: true }, + context +)) { + // s.success +} +``` + +Note that the return value is a promise of an iterator, so you need to await before iterating over it. + +#### Type parameters + +| Name | Type | +| :--- | :--------------- | +| `T` | extends `Object` | + +#### Parameters + +| Name | Type | +| :--------------------------------- | :----------------------------------------------------------------- | +| `targetDescription` | `Object` | +| `targetDescription.configuration?` | `string` | +| `targetDescription.project` | `string` | +| `targetDescription.target` | `string` | +| `options` | `Object` | +| `context` | [`ExecutorContext`](../../default/nx-devkit/index#executorcontext) | + +#### Returns + +`Promise`<`AsyncIterableIterator`<`T`\>\> + +--- + +### serializeJson + +▸ **serializeJson**<`T`\>(`input`, `options?`): `string` + +Serializes the given data to a JSON string. +By default the JSON string is formatted with a 2 space intendation to be easy readable. + +#### Type parameters + +| Name | Type | +| :--- | :-------------------------- | +| `T` | extends `object` = `object` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :--------------------------------------------------------------------------- | :---------------------------------------- | +| `input` | `T` | Object which should be serialized to JSON | +| `options?` | [`JsonSerializeOptions`](../../default/nx-devkit/index#jsonserializeoptions) | JSON serialize options | + +#### Returns + +`string` + +the formatted JSON representation of the object + +--- + +### stripIndents + +▸ **stripIndents**(`strings`, ...`values`): `string` + +Removes indents, which is useful for printing warning and messages. + +Example: + +```typescript +stripIndents` + Options: + - option1 + - option2 +`; +``` + +#### Parameters + +| Name | Type | +| :---------- | :--------------------- | +| `strings` | `TemplateStringsArray` | +| `...values` | `any`[] | + +#### Returns + +`string` + +--- + +### stripJsonComments + +▸ `Const` **stripJsonComments**(`text`, `replaceCh?`): `string` + +Takes JSON with JavaScript-style comments and remove +them. Optionally replaces every none-newline character +of comments with a replaceCharacter + +#### Parameters + +| Name | Type | +| :----------- | :------- | +| `text` | `string` | +| `replaceCh?` | `string` | + +#### Returns + +`string` + +--- + +### targetToTargetString + +▸ **targetToTargetString**(`target`): `string` + +Returns a string in the format "project:target[:configuration]" for the target + +#### Parameters + +| Name | Type | Description | +| :------- | :----------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` | [`Target`](../../default/nx-devkit/index#target) | target object Examples: `typescript targetToTargetString({ project: "proj", target: "test" }) // returns "proj:test" targetToTargetString({ project: "proj", target: "test", configuration: "production" }) // returns "proj:test:production" ` | + +#### Returns + +`string` + +--- + +### toJS + +▸ **toJS**(`tree`): `void` + +Rename and transpile any new typescript files created to javascript files + +#### Parameters + +| Name | Type | +| :----- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | + +#### Returns + +`void` + +--- + +### updateJson + +▸ **updateJson**<`T`, `U`\>(`tree`, `path`, `updater`, `options?`): `void` + +Updates a JSON value to the file system tree + +#### Type parameters + +| Name | Type | +| :--- | :----------------------- | +| `T` | extends `object` = `any` | +| `U` | extends `object` = `T` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | File system tree | +| `path` | `string` | Path of JSON file in the Tree | +| `updater` | (`value`: `T`) => `U` | Function that maps the current value of a JSON document to a new value to be written to the document | +| `options?` | [`JsonParseOptions`](../../default/nx-devkit/index#jsonparseoptions) & [`JsonSerializeOptions`](../../default/nx-devkit/index#jsonserializeoptions) | Optional JSON Parse and Serialize Options | + +#### Returns + +`void` + +--- + +### updateProjectConfiguration + +▸ **updateProjectConfiguration**(`tree`, `projectName`, `projectConfiguration`): `void` + +Updates the configuration of an existing project. + +The project configuration is stored in workspace.json or the associated project.json file. +The utility will update either files. + +#### Parameters + +| Name | Type | Description | +| :--------------------- | :--------------------------------------------------------------------------- | :---------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | the file system tree | +| `projectName` | `string` | unique name. Often directories are part of the name (e.g., mydir-mylib) | +| `projectConfiguration` | [`ProjectConfiguration`](../../default/nx-devkit/index#projectconfiguration) | project configuration | + +#### Returns + +`void` + +--- + +### updateTsConfigsToJs + +▸ **updateTsConfigsToJs**(`tree`, `options`): `void` + +#### Parameters + +| Name | Type | +| :-------------------- | :------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | +| `options` | `Object` | +| `options.projectRoot` | `string` | + +#### Returns + +`void` + +--- + +### updateWorkspaceConfiguration + +▸ **updateWorkspaceConfiguration**(`tree`, `workspaceConfig`): `void` + +Update general workspace configuration such as the default project or cli settings. + +This does _not_ update projects configuration, use [updateProjectConfiguration](../../default/nx-devkit/index#updateprojectconfiguration) or [addProjectConfiguration](../../default/nx-devkit/index#addprojectconfiguration) instead. + +#### Parameters + +| Name | Type | +| :---------------- | :------------------------------------------------------------------------------- | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | +| `workspaceConfig` | [`WorkspaceConfiguration`](../../default/nx-devkit/index#workspaceconfiguration) | + +#### Returns + +`void` + +--- + +### visitNotIgnoredFiles + +▸ **visitNotIgnoredFiles**(`tree`, `dirPath?`, `visitor`): `void` + +Utility to act on all files in a tree that are not ignored by git. + +#### Parameters + +| Name | Type | Default value | +| :-------- | :------------------------------------------- | :------------ | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | `undefined` | +| `dirPath` | `string` | `tree.root` | +| `visitor` | (`path`: `string`) => `void` | `undefined` | + +#### Returns + +`void` + +--- + +### writeJson + +▸ **writeJson**<`T`\>(`tree`, `path`, `value`, `options?`): `void` + +Writes a JSON value to the file system tree + +#### Type parameters + +| Name | Type | +| :--- | :-------------------------- | +| `T` | extends `object` = `object` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :--------------------------------------------------------------------------- | :------------------------------ | +| `tree` | [`Tree`](../../default/nx-devkit/index#tree) | File system tree | +| `path` | `string` | Path of JSON file in the Tree | +| `value` | `T` | Serializable value to write | +| `options?` | [`JsonSerializeOptions`](../../default/nx-devkit/index#jsonserializeoptions) | Optional JSON Serialize Options | + +#### Returns + +`void` + +--- + +### writeJsonFile + +▸ **writeJsonFile**<`T`\>(`path`, `data`, `options?`): `void` + +Serializes the given data to JSON and writes it to a file. + +#### Type parameters + +| Name | Type | +| :--- | :-------------------------- | +| `T` | extends `object` = `object` | + +#### Parameters + +| Name | Type | Description | +| :--------- | :----------------- | :-------------------------------------------------------------- | +| `path` | `string` | A path to a file. | +| `data` | `T` | data which should be serialized to JSON and written to the file | +| `options?` | `JsonWriteOptions` | JSON serialize options | + +#### Returns + +`void` diff --git a/docs/default/api-nx-devkit/ngcli_adapter.md b/docs/default/api-nx-devkit/ngcli_adapter.md new file mode 100644 index 0000000000..6493643355 --- /dev/null +++ b/docs/default/api-nx-devkit/ngcli_adapter.md @@ -0,0 +1,118 @@ +# Module: ngcli-adapter + +## Table of contents + +### Ng CLI Adapter Classes + +- [NxScopedHost](../../default/nx-devkit/ngcli_adapter#nxscopedhost) + +### Functions + +- [mockSchematicsForTesting](../../default/nx-devkit/ngcli_adapter#mockschematicsfortesting) +- [overrideCollectionResolutionForTesting](../../default/nx-devkit/ngcli_adapter#overridecollectionresolutionfortesting) +- [wrapAngularDevkitSchematic](../../default/nx-devkit/ngcli_adapter#wrapangulardevkitschematic) + +## Ng CLI Adapter Classes + +### NxScopedHost + +• **NxScopedHost**: `Object` + +## Functions + +### mockSchematicsForTesting + +▸ **mockSchematicsForTesting**(`schematics`): `void` + +If you have an Nx Devkit generator invoking the wrapped Angular Devkit schematic, +and you don't want the Angular Devkit schematic to run, you can mock it up using this function. + +Unfortunately, there are some edge cases in the Nx-Angular devkit integration that +can be seen in the unit tests context. This function is useful for handling that as well. + +In this case, you can mock it up. + +Example: + +```typescript +mockSchematicsForTesting({ + 'mycollection:myschematic': (tree, params) => { + tree.write('README.md'); + }, +}); +``` + +#### Parameters + +| Name | Type | +| :----------- | :------- | +| `schematics` | `Object` | + +#### Returns + +`void` + +--- + +### overrideCollectionResolutionForTesting + +▸ **overrideCollectionResolutionForTesting**(`collections`): `void` + +By default, Angular Devkit schematic collections will be resolved using the Node resolution. +This doesn't work if you are testing schematics that refer to other schematics in the +same repo. + +This function can can be used to override the resolution behaviour. + +Example: + +```typescript +overrideCollectionResolutionForTesting({ + '@nrwl/workspace': path.join( + __dirname, + '../../../../workspace/generators.json' + ), + '@nrwl/angular': path.join(__dirname, '../../../../angular/generators.json'), + '@nrwl/linter': path.join(__dirname, '../../../../linter/generators.json'), +}); +``` + +#### Parameters + +| Name | Type | +| :------------ | :------- | +| `collections` | `Object` | + +#### Returns + +`void` + +--- + +### wrapAngularDevkitSchematic + +▸ **wrapAngularDevkitSchematic**(`collectionName`, `generatorName`): (`host`: [`Tree`](../../default/nx-devkit/index#tree), `generatorOptions`: { [k: string]: `any`; }) => `Promise`<`any`\> + +#### Parameters + +| Name | Type | +| :--------------- | :------- | +| `collectionName` | `string` | +| `generatorName` | `string` | + +#### Returns + +`fn` + +▸ (`host`, `generatorOptions`): `Promise`<`any`\> + +##### Parameters + +| Name | Type | +| :----------------- | :------------------------------------------- | +| `host` | [`Tree`](../../default/nx-devkit/index#tree) | +| `generatorOptions` | `Object` | + +##### Returns + +`Promise`<`any`\> diff --git a/docs/default/api-nx-plugin/executors/e2e.md b/docs/default/api-nx-plugin/executors/e2e.md new file mode 100644 index 0000000000..ef73868681 --- /dev/null +++ b/docs/default/api-nx-plugin/executors/e2e.md @@ -0,0 +1,32 @@ +--- +title: '@nrwl/nx-plugin:e2e executor' +description: 'Creates and runs the e2e tests for an Nx Plugin.' +--- + +# @nrwl/nx-plugin:e2e + +Creates and runs the e2e tests for an Nx Plugin. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### jestConfig (_**required**_) + +Type: `string` + +Jest config file. + +### target (_**required**_) + +Type: `string` + +The build target for the Nx Plugin project. + +### ~~tsSpecConfig~~ + +Type: `string` + +**Deprecated:** Use the `tsconfig` property for `ts-jest` in the e2e project `jest.config.js` file. It will be removed in the next major release. + +The tsconfig file for specs. diff --git a/docs/default/api-nx-plugin/generators/executor.md b/docs/default/api-nx-plugin/generators/executor.md new file mode 100644 index 0000000000..9ba010200f --- /dev/null +++ b/docs/default/api-nx-plugin/generators/executor.md @@ -0,0 +1,70 @@ +--- +title: '@nrwl/nx-plugin:executor generator' +description: 'Create a executor for an Nx Plugin' +--- + +# @nrwl/nx-plugin:executor + +Create a executor for an Nx Plugin + +## Usage + +```bash +nx generate executor ... +``` + +By default, Nx will search for `executor` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nx-plugin:executor ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g executor ... --dry-run +``` + +### Examples + +Generate libs/my-plugin/src/executors/my-executor: + +```bash +nx g executor my-executor --project=my-plugin +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Executor name + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### description + +Alias(es): d + +Type: `string` + +Executor description + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-nx-plugin/generators/generator.md b/docs/default/api-nx-plugin/generators/generator.md new file mode 100644 index 0000000000..9e93ca51e0 --- /dev/null +++ b/docs/default/api-nx-plugin/generators/generator.md @@ -0,0 +1,70 @@ +--- +title: '@nrwl/nx-plugin:generator generator' +description: 'Create a generator for an Nx Plugin' +--- + +# @nrwl/nx-plugin:generator + +Create a generator for an Nx Plugin + +## Usage + +```bash +nx generate generator ... +``` + +By default, Nx will search for `generator` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nx-plugin:generator ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g generator ... --dry-run +``` + +### Examples + +Generate libs/my-plugin/src/generators/my-generator: + +```bash +nx g generator my-generator --project=my-plugin +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Generator name + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### description + +Alias(es): d + +Type: `string` + +Generator description + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-nx-plugin/generators/migration.md b/docs/default/api-nx-plugin/generators/migration.md new file mode 100644 index 0000000000..0a89776490 --- /dev/null +++ b/docs/default/api-nx-plugin/generators/migration.md @@ -0,0 +1,78 @@ +--- +title: '@nrwl/nx-plugin:migration generator' +description: 'Create a migration for an Nx Plugin' +--- + +# @nrwl/nx-plugin:migration + +Create a migration for an Nx Plugin + +## Usage + +```bash +nx generate migration ... +``` + +By default, Nx will search for `migration` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nx-plugin:migration ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g migration ... --dry-run +``` + +### Examples + +Generate libs/my-plugin/src/migrations/my-migration: + +```bash +nx g migration my-migration --project=my-plugin --version=1.0.0 +``` + +## Options + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### version (_**required**_) + +Alias(es): v + +Type: `string` + +Version to use for the migration + +### description + +Alias(es): d + +Type: `string` + +Migration description + +### name + +Type: `string` + +Migration name + +### packageJsonUpdates + +Alias(es): p + +Default: `false` + +Type: `boolean` + +Whether or not to include package.json updates diff --git a/docs/default/api-nx-plugin/generators/plugin.md b/docs/default/api-nx-plugin/generators/plugin.md new file mode 100644 index 0000000000..7e55a8d674 --- /dev/null +++ b/docs/default/api-nx-plugin/generators/plugin.md @@ -0,0 +1,116 @@ +--- +title: '@nrwl/nx-plugin:plugin generator' +description: 'Create a Nx Plugin' +--- + +# @nrwl/nx-plugin:plugin + +Create a Nx Plugin + +## Usage + +```bash +nx generate plugin ... +``` + +By default, Nx will search for `plugin` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/nx-plugin:plugin ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g plugin ... --dry-run +``` + +### Examples + +Generate libs/plugins/my-plugin: + +```bash +nx g plugin my-plugin --directory=plugins --importPath=@myorg/my-plugin +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Plugin name + +### directory + +Alias(es): d + +Type: `string` + +A directory where the plugin is placed + +### importPath + +Type: `string` + +How the plugin will be published, like @myorg/my-awesome-plugin. Note this must be a valid npm name + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the library (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-react-native/executors/build-android.md b/docs/default/api-react-native/executors/build-android.md new file mode 100644 index 0000000000..311fc01671 --- /dev/null +++ b/docs/default/api-react-native/executors/build-android.md @@ -0,0 +1,18 @@ +--- +title: '@nrwl/react-native:build-android executor' +description: 'Release Build for Android.' +--- + +# @nrwl/react-native:build-android + +Release Build for Android. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### apk + +Type: `boolean` + +Generate apk file(s) rather than a bundle (.aab). diff --git a/docs/default/api-react-native/executors/bundle.md b/docs/default/api-react-native/executors/bundle.md new file mode 100644 index 0000000000..ef6a45e025 --- /dev/null +++ b/docs/default/api-react-native/executors/bundle.md @@ -0,0 +1,50 @@ +--- +title: '@nrwl/react-native:bundle executor' +description: 'Builds the JS bundle.' +--- + +# @nrwl/react-native:bundle + +Builds the JS bundle. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### bundleOutput (_**required**_) + +Type: `string` + +The output path of the generated files. + +### entryFile (_**required**_) + +Type: `string` + +The entry file relative to project root. + +### platform (_**required**_) + +Type: `string` + +Platform to build for (ios, android). + +### dev + +Default: `true` + +Type: `boolean` + +Generate a development build. + +### maxWorkers + +Type: `number` + +The number of workers we should parallelize the transformer on. + +### sourceMap + +Type: `boolean` + +Whether source maps should be generated or not. diff --git a/docs/default/api-react-native/executors/ensure-symlink.md b/docs/default/api-react-native/executors/ensure-symlink.md new file mode 100644 index 0000000000..db2e65b434 --- /dev/null +++ b/docs/default/api-react-native/executors/ensure-symlink.md @@ -0,0 +1,10 @@ +--- +title: '@nrwl/react-native:ensure-symlink executor' +description: "Ensure workspace node_modules is symlink under app's node_modules folder." +--- + +# @nrwl/react-native:ensure-symlink + +Ensure workspace node_modules is symlink under app's node_modules folder. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. diff --git a/docs/default/api-react-native/executors/run-android.md b/docs/default/api-react-native/executors/run-android.md new file mode 100644 index 0000000000..4ca387ab83 --- /dev/null +++ b/docs/default/api-react-native/executors/run-android.md @@ -0,0 +1,98 @@ +--- +title: '@nrwl/react-native:run-android executor' +description: 'Runs Android application.' +--- + +# @nrwl/react-native:run-android + +Runs Android application. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### appId + +Type: `string` + +Specify an applicationId to launch after build. If not specified, 'package' from AndroidManifest.xml will be used. + +### appIdSuffix + +Type: `string` + +Specify an applicationIdSuffix to launch after build. + +### deviceId + +Type: `string` + +Builds your app and starts it on a specific device/simulator with the given device id (listed by running "adb devices" on the command line). + +### jetifier + +Default: `true` + +Type: `boolean` + +Run jetifier – the AndroidX transition tool. By default it runs before Gradle to ease working with libraries that don't support AndroidX yet. + +### mainActivity + +Default: `MainActivity` + +Type: `string` + +Name of the activity to start. + +### packager + +Default: `true` + +Type: `boolean` + +Starts the packager server + +### port + +Default: `8081` + +Type: `number` + +The port where the packager server is listening on. + +### resetCache + +Default: `false` + +Type: `boolean` + +Resets metro cache + +### sync + +Default: `true` + +Type: `boolean` + +Syncs npm dependencies to package.json (for React Native autolink). + +### tasks + +Type: `string` + +Run custom gradle tasks. If this argument is provided, then --variant option is ignored. Example: yarn react-native run-android --tasks clean,installDebug. + +### terminal + +Type: `string` + +Launches the Metro Bundler in a new window using the specified terminal path. + +### variant + +Default: `debug` + +Type: `string` + +Specify your app's build variant (e.g. debug, release). diff --git a/docs/default/api-react-native/executors/run-ios.md b/docs/default/api-react-native/executors/run-ios.md new file mode 100644 index 0000000000..b96753151d --- /dev/null +++ b/docs/default/api-react-native/executors/run-ios.md @@ -0,0 +1,86 @@ +--- +title: '@nrwl/react-native:run-ios executor' +description: 'Runs iOS application.' +--- + +# @nrwl/react-native:run-ios + +Runs iOS application. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### device + +Type: `string` + +Explicitly set device to use by name. The value is not required if you have a single device connected. + +### install + +Default: `true` + +Type: `boolean` + +Runs 'pod install' for native modules before building iOS app. + +### packager + +Default: `true` + +Type: `boolean` + +Starts the packager server + +### port + +Default: `8081` + +Type: `number` + +The port where the packager server is listening on. + +### resetCache + +Default: `false` + +Type: `boolean` + +Resets metro cache + +### scheme + +Type: `string` + +Explicitly set the Xcode scheme to use + +### simulator + +Default: `iPhone X` + +Type: `string` + +Explicitly set simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version: "iPhone X (12.1)" + +### sync + +Default: `true` + +Type: `boolean` + +Syncs npm dependencies to package.json (for React Native autolink). Always true when --install is used. + +### terminal + +Type: `string` + +Launches the Metro Bundler in a new window using the specified terminal path. + +### xcodeConfiguration + +Default: `Debug` + +Type: `string` + +Explicitly set the Xcode configuration to use diff --git a/docs/default/api-react-native/executors/start.md b/docs/default/api-react-native/executors/start.md new file mode 100644 index 0000000000..fe04836cc7 --- /dev/null +++ b/docs/default/api-react-native/executors/start.md @@ -0,0 +1,28 @@ +--- +title: '@nrwl/react-native:start executor' +description: 'Starts the dev server for JS bundle.' +--- + +# @nrwl/react-native:start + +Starts the dev server for JS bundle. + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### port + +Default: `8081` + +Type: `number` + +The port to listen on. + +### resetCache + +Default: `false` + +Type: `boolean` + +Resets metro cache. diff --git a/docs/default/api-react-native/executors/sync-deps.md b/docs/default/api-react-native/executors/sync-deps.md new file mode 100644 index 0000000000..2d3c2649da --- /dev/null +++ b/docs/default/api-react-native/executors/sync-deps.md @@ -0,0 +1,18 @@ +--- +title: '@nrwl/react-native:sync-deps executor' +description: 'Syncs dependencies to package.json (required for autolinking).' +--- + +# @nrwl/react-native:sync-deps + +Syncs dependencies to package.json (required for autolinking). + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### include + +Type: `string` + +A comma-separated list of additional npm packages to include. e.g. 'nx sync-deps --include=react-native-gesture-handler,react-native-safe-area-context' diff --git a/docs/default/api-react-native/generators/application.md b/docs/default/api-react-native/generators/application.md new file mode 100644 index 0000000000..150e0a42ad --- /dev/null +++ b/docs/default/api-react-native/generators/application.md @@ -0,0 +1,130 @@ +--- +title: '@nrwl/react-native:application generator' +description: 'Create an application' +--- + +# @nrwl/react-native:application + +Create an application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react-native:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +### Examples + +Generate apps/nested/myapp: + +```bash +nx g app myapp --directory=nested +``` + +Use class components instead of functional components: + +```bash +nx g app myapp --classComponent +``` + +## Options + +### directory + +Alias(es): d + +Type: `string` + +The directory of the new application. + +### displayName + +Type: `string` + +The display name to show in the application. Defaults to name. + +### e2eTestRunner + +Default: `detox` + +Type: `string` + +Possible values: `detox`, `none` + +Adds the specified e2e test runner + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the application (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-react-native/generators/component.md b/docs/default/api-react-native/generators/component.md new file mode 100644 index 0000000000..a08108f0a9 --- /dev/null +++ b/docs/default/api-react-native/generators/component.md @@ -0,0 +1,124 @@ +--- +title: '@nrwl/react-native:component generator' +description: 'Create a component' +--- + +# @nrwl/react-native:component + +Create a component + +## Usage + +```bash +nx generate component ... +``` + +```bash +nx g c ... # same +``` + +By default, Nx will search for `component` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react-native:component ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component ... --dry-run +``` + +### Examples + +Generate a component in the mylib library: + +```bash +nx g component my-component --project=mylib +``` + +Generate a class component in the mylib library: + +```bash +nx g component my-component --project=mylib --classComponent +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### classComponent + +Alias(es): C + +Default: `false` + +Type: `boolean` + +Use class components instead of functional component. + +### directory + +Alias(es): d + +Type: `string` + +Create the component under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case component file name (e.g. App.tsx). + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new component. diff --git a/docs/default/api-react-native/generators/library.md b/docs/default/api-react-native/generators/library.md new file mode 100644 index 0000000000..1c08008708 --- /dev/null +++ b/docs/default/api-react-native/generators/library.md @@ -0,0 +1,162 @@ +--- +title: '@nrwl/react-native:library generator' +description: 'Create a library' +--- + +# @nrwl/react-native:library + +Create a library + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react-native:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### directory + +Alias(es): d + +Type: `string` + +A directory where the lib is placed. + +### globalCss + +Default: `false` + +Type: `boolean` + +When true, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is '_.css' rather than '_.module.css'). + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case component file name (e.g. App.tsx). + +### publishable + +Type: `boolean` + +Create a publishable library. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### strict + +Default: `true` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the library (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-react/generators/application.md b/docs/default/api-react/generators/application.md new file mode 100644 index 0000000000..ab20c580e4 --- /dev/null +++ b/docs/default/api-react/generators/application.md @@ -0,0 +1,210 @@ +--- +title: '@nrwl/react:application generator' +description: 'Create an application' +--- + +# @nrwl/react:application + +Create an application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +### Examples + +Generate apps/myorg/myapp and apps/myorg/myapp-e2e: + +```bash +nx g app myapp --directory=myorg +``` + +Use class components instead of functional components: + +```bash +nx g app myapp --classComponent +``` + +Set up React Router: + +```bash +nx g app myapp --routing +``` + +## Options + +### classComponent + +Alias(es): C + +Default: `false` + +Type: `boolean` + +Use class components instead of functional component. + +### compiler + +Default: `babel` + +Type: `string` + +Possible values: `babel`, `swc` + +The compiler to use + +### directory + +Alias(es): dir + +Type: `string` + +The directory of the new application. + +### e2eTestRunner + +Default: `cypress` + +Type: `string` + +Possible values: `cypress`, `none` + +Test runner to use for end to end (e2e) tests. + +### globalCss + +Default: `false` + +Type: `boolean` + +Default is false. When true, the component is generated with _.css/_.scss instead of _.module.css/_.module.scss + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case component file name (e.g. App.tsx). + +### routing + +Default: `false` + +Type: `boolean` + +Generate application with routes. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipWorkspaceJson + +Default: `false` + +Type: `boolean` + +Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style). + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### strict + +Default: `true` + +Type: `boolean` + +Creates an application with strict mode and strict type checking + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the application (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-react/generators/component-cypress-spec.md b/docs/default/api-react/generators/component-cypress-spec.md new file mode 100644 index 0000000000..f69d0785a5 --- /dev/null +++ b/docs/default/api-react/generators/component-cypress-spec.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/react:component-cypress-spec generator' +description: 'Create a cypress spec for a ui component that has a story' +--- + +# @nrwl/react:component-cypress-spec + +Create a cypress spec for a ui component that has a story + +## Usage + +```bash +nx generate component-cypress-spec ... +``` + +By default, Nx will search for `component-cypress-spec` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:component-cypress-spec ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component-cypress-spec ... --dry-run +``` + +## Options + +### componentPath (_**required**_) + +Type: `string` + +Relative path to the component file from the library root? + +### project (_**required**_) + +Type: `string` + +The project name for which to generate tests. + +### cypressProject + +Type: `string` + +The Cypress project to generate the stories under. By default, inferred from 'project' + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. diff --git a/docs/default/api-react/generators/component-story.md b/docs/default/api-react/generators/component-story.md new file mode 100644 index 0000000000..5812759ece --- /dev/null +++ b/docs/default/api-react/generators/component-story.md @@ -0,0 +1,42 @@ +--- +title: '@nrwl/react:component-story generator' +description: 'Generate storybook story for a react component' +--- + +# @nrwl/react:component-story + +Generate storybook story for a react component + +## Usage + +```bash +nx generate component-story ... +``` + +By default, Nx will search for `component-story` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:component-story ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component-story ... --dry-run +``` + +## Options + +### componentPath (_**required**_) + +Type: `string` + +Relative path to the component file from the library root + +### project (_**required**_) + +Type: `string` + +The project name where to add the components. diff --git a/docs/default/api-react/generators/component.md b/docs/default/api-react/generators/component.md new file mode 100644 index 0000000000..5ba5852cad --- /dev/null +++ b/docs/default/api-react/generators/component.md @@ -0,0 +1,166 @@ +--- +title: '@nrwl/react:component generator' +description: 'Create a component' +--- + +# @nrwl/react:component + +Create a component + +## Usage + +```bash +nx generate component ... +``` + +```bash +nx g c ... # same +``` + +By default, Nx will search for `component` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:component ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g component ... --dry-run +``` + +### Examples + +Generate a component in the mylib library: + +```bash +nx g component my-component --project=mylib +``` + +Generate a class component in the mylib library: + +```bash +nx g component my-component --project=mylib --classComponent +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the component. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### classComponent + +Alias(es): C + +Default: `false` + +Type: `boolean` + +Use class components instead of functional component. + +### directory + +Alias(es): dir + +Type: `string` + +Create the component under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the component is exported from the project index.ts (if it exists). + +### fileName + +Type: `string` + +Create a component with this file name. + +### flat + +Default: `false` + +Type: `boolean` + +Create component at the source root rather than its own directory. + +### globalCss + +Default: `false` + +Type: `boolean` + +Default is false. When true, the component is generated with _.css/_.scss instead of _.module.css/_.module.scss + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### pascalCaseDirectory + +Alias(es): R + +Default: `false` + +Type: `boolean` + +Use pascal case directory name (e.g. App/App.tsx). + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case component file name (e.g. App.tsx). + +### routing + +Type: `boolean` + +Generate a library with routes. + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new component. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. diff --git a/docs/default/api-react/generators/hook.md b/docs/default/api-react/generators/hook.md new file mode 100644 index 0000000000..93c6f2c85c --- /dev/null +++ b/docs/default/api-react/generators/hook.md @@ -0,0 +1,118 @@ +--- +title: '@nrwl/react:hook generator' +description: 'Create a hook' +--- + +# @nrwl/react:hook + +Create a hook + +## Usage + +```bash +nx generate hook ... +``` + +```bash +nx g h ... # same +``` + +By default, Nx will search for `hook` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:hook ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g hook ... --dry-run +``` + +### Examples + +Generate a hook in the mylib library: + +```bash +nx g hook my-hook --project=mylib +``` + +## Options + +### name (_**required**_) + +Type: `string` + +The name of the hook. + +### project (_**required**_) + +Alias(es): p + +Type: `string` + +The name of the project. + +### directory + +Alias(es): d + +Type: `string` + +Create the hook under this directory (can be nested). + +### export + +Alias(es): e + +Default: `false` + +Type: `boolean` + +When true, the hook is exported from the project index.ts (if it exists). + +### flat + +Default: `false` + +Type: `boolean` + +Create hook at the source root rather than its own directory. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### pascalCaseDirectory + +Alias(es): R + +Default: `false` + +Type: `boolean` + +Use pascal case directory name (e.g. useHook/useHook.ts). + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case hook file name (e.g. useHook.ts). + +### skipTests + +Default: `false` + +Type: `boolean` + +When true, does not create "spec.ts" test files for the new hook. diff --git a/docs/default/api-react/generators/library.md b/docs/default/api-react/generators/library.md new file mode 100644 index 0000000000..f636d12ccd --- /dev/null +++ b/docs/default/api-react/generators/library.md @@ -0,0 +1,218 @@ +--- +title: '@nrwl/react:library generator' +description: 'Create a library' +--- + +# @nrwl/react:library + +Create a library + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +Generate a library with routes and add them to myapp: + +```bash +nx g lib mylib --appProject=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### appProject + +Alias(es): a + +Type: `string` + +The application project to add the library route to. + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### compiler + +Default: `babel` + +Type: `string` + +Possible values: `babel`, `swc` + +Which compiler to use. + +### component + +Default: `true` + +Type: `boolean` + +Generate a default component. + +### directory + +Alias(es): dir + +Type: `string` + +A directory where the lib is placed. + +### globalCss + +Default: `false` + +Type: `boolean` + +When true, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is '_.css' rather than '_.module.css'). + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case component file name (e.g. App.tsx). + +### publishable + +Type: `boolean` + +Create a publishable library. + +### routing + +Type: `boolean` + +Generate library with routes. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### strict + +Default: `true` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### style + +Alias(es): s + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` + +The file extension to be used for style files. + +### tags + +Alias(es): t + +Type: `string` + +Add tags to the library (used for linting). + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests. diff --git a/docs/default/api-react/generators/redux.md b/docs/default/api-react/generators/redux.md new file mode 100644 index 0000000000..95929652f2 --- /dev/null +++ b/docs/default/api-react/generators/redux.md @@ -0,0 +1,72 @@ +--- +title: '@nrwl/react:redux generator' +description: 'Create a redux slice for a project' +--- + +# @nrwl/react:redux + +Create a redux slice for a project + +## Usage + +```bash +nx generate redux ... +``` + +```bash +nx g slice ... # same +``` + +By default, Nx will search for `redux` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:redux ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g redux ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Redux slice name. + +### appProject + +Alias(es): a + +Type: `string` + +The application project to add the slice to. + +### directory + +Alias(es): dir + +Type: `string` + +The name of the folder used to contain/group the generated Redux files. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### project + +Alias(es): p + +Type: `string` + +The name of the project to add the slice to. If it is an application, then the store configuration will be updated too. diff --git a/docs/default/api-react/generators/stories.md b/docs/default/api-react/generators/stories.md new file mode 100644 index 0000000000..65ff592c37 --- /dev/null +++ b/docs/default/api-react/generators/stories.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/react:stories generator' +description: 'Create stories/specs for all components declared in a library' +--- + +# @nrwl/react:stories + +Create stories/specs for all components declared in a library + +## Usage + +```bash +nx generate stories ... +``` + +By default, Nx will search for `stories` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:stories ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g stories ... --dry-run +``` + +## Options + +### project (_**required**_) + +Type: `string` + +Library or application name + +### cypressProject + +Type: `string` + +The Cypress project to generate the stories under. This is inferred from 'project' by default + +### generateCypressSpecs + +Type: `boolean` + +Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. diff --git a/docs/default/api-react/generators/storybook-configuration.md b/docs/default/api-react/generators/storybook-configuration.md new file mode 100644 index 0000000000..dfe1a2e6df --- /dev/null +++ b/docs/default/api-react/generators/storybook-configuration.md @@ -0,0 +1,90 @@ +--- +title: '@nrwl/react:storybook-configuration generator' +description: 'Set up storybook for a react library' +--- + +# @nrwl/react:storybook-configuration + +Set up storybook for a react library + +## Usage + +```bash +nx generate storybook-configuration ... +``` + +By default, Nx will search for `storybook-configuration` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:storybook-configuration ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g storybook-configuration ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Project name + +### configureCypress + +Default: `true` + +Type: `boolean` + +Run the cypress-configure generator. + +### cypressDirectory + +Type: `string` + +A directory where the Cypress project will be placed. Placed at the root by default. + +### generateCypressSpecs + +Default: `true` + +Type: `boolean` + +Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator + +### generateStories + +Default: `true` + +Type: `boolean` + +Automatically generate \*.stories.ts files for components declared in this project? + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files. + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json diff --git a/docs/default/api-react/generators/storybook-migrate-defaults-5-to-6.md b/docs/default/api-react/generators/storybook-migrate-defaults-5-to-6.md new file mode 100644 index 0000000000..c340edc3f0 --- /dev/null +++ b/docs/default/api-react/generators/storybook-migrate-defaults-5-to-6.md @@ -0,0 +1,52 @@ +--- +title: '@nrwl/react:storybook-migrate-defaults-5-to-6 generator' +description: 'Generate default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x.' +--- + +# @nrwl/react:storybook-migrate-defaults-5-to-6 + +Generate default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x. + +## Usage + +```bash +nx generate storybook-migrate-defaults-5-to-6 ... +``` + +By default, Nx will search for `storybook-migrate-defaults-5-to-6` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/react:storybook-migrate-defaults-5-to-6 ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g storybook-migrate-defaults-5-to-6 ... --dry-run +``` + +## Options + +### all + +Default: `true` + +Type: `boolean` + +Generate new Storybook configurations for all Storybook instances across all apps and libs. + +### keepOld + +Default: `true` + +Type: `boolean` + +Keep the old configuration files - put them in a folder called .old_storybook. + +### name + +Type: `string` + +Leave empty to upgrade all Storybook instances. Only use this if you want to do a gradual migration. Library or application name for which you want to generate the new Storybook configuration. diff --git a/docs/default/api-storybook/executors/build.md b/docs/default/api-storybook/executors/build.md new file mode 100644 index 0000000000..138ffdcfe9 --- /dev/null +++ b/docs/default/api-storybook/executors/build.md @@ -0,0 +1,48 @@ +--- +title: '@nrwl/storybook:build executor' +description: 'Build Storybook' +--- + +# @nrwl/storybook:build + +Build Storybook + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### uiFramework (_**required**_) (**hidden**) + +Default: `@storybook/angular` + +Type: `string` + +Storybook framework npm package + +### docsMode + +Default: `false` + +Type: `boolean` + +Build a documentation-only site using addon-docs. + +### outputPath + +Type: `string` + +The output path of the generated files. + +### projectBuildConfig + +Type: `string` + +Workspace project where Storybook reads the Webpack config from + +### quiet + +Default: `true` + +Type: `boolean` + +Suppress verbose build output. diff --git a/docs/default/api-storybook/executors/storybook.md b/docs/default/api-storybook/executors/storybook.md new file mode 100644 index 0000000000..3b42edcca3 --- /dev/null +++ b/docs/default/api-storybook/executors/storybook.md @@ -0,0 +1,94 @@ +--- +title: '@nrwl/storybook:storybook executor' +description: 'Serve Storybook' +--- + +# @nrwl/storybook:storybook + +Serve Storybook + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### uiFramework (_**required**_) (**hidden**) + +Default: `@storybook/angular` + +Type: `string` + +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`, `@storybook/svelte` + +Storybook framework npm package + +### docsMode + +Default: `false` + +Type: `boolean` + +Build a documentation-only site using addon-docs. + +### host + +Default: `localhost` + +Type: `string` + +Host to listen on. + +### https + +Default: `false` + +Type: `boolean` + +Serve using HTTPS. + +### port + +Default: `9009` + +Type: `number` + +Port to listen on. + +### projectBuildConfig + +Type: `string` + +Workspace project where Storybook reads the Webpack config from + +### quiet + +Default: `true` + +Type: `boolean` + +Suppress verbose build output. + +### sslCert + +Type: `string` + +SSL certificate to use for serving HTTPS. + +### sslKey + +Type: `string` + +SSL key to use for serving HTTPS. + +### staticDir + +Type: `array` + +Directory where to load static files from, array of strings + +### watch + +Default: `true` + +Type: `boolean` + +Watches for changes and rebuilds application diff --git a/docs/default/api-storybook/generators/configuration.md b/docs/default/api-storybook/generators/configuration.md new file mode 100644 index 0000000000..0fde868742 --- /dev/null +++ b/docs/default/api-storybook/generators/configuration.md @@ -0,0 +1,80 @@ +--- +title: '@nrwl/storybook:configuration generator' +description: 'Add storybook configuration to a ui library or an application' +--- + +# @nrwl/storybook:configuration + +Add storybook configuration to a ui library or an application + +## Usage + +```bash +nx generate configuration ... +``` + +By default, Nx will search for `configuration` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/storybook:configuration ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g configuration ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library or application name + +### configureCypress + +Type: `boolean` + +Run the cypress-configure generator + +### cypressDirectory + +Type: `string` + +A directory where the Cypress project will be placed. Added at root by default. + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint`, `none` + +The tool to use for running lint checks. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### uiFramework + +Type: `string` + +Possible values: `@storybook/angular`, `@storybook/react` + +Storybook UI Framework to use diff --git a/docs/default/api-storybook/generators/cypress-project.md b/docs/default/api-storybook/generators/cypress-project.md new file mode 100644 index 0000000000..6d7e27b712 --- /dev/null +++ b/docs/default/api-storybook/generators/cypress-project.md @@ -0,0 +1,66 @@ +--- +title: '@nrwl/storybook:cypress-project generator' +description: 'Add cypress e2e app to test a ui library that is set up for storybook' +--- + +# @nrwl/storybook:cypress-project + +Add cypress e2e app to test a ui library that is set up for storybook + +## Usage + +```bash +nx generate cypress-project ... +``` + +By default, Nx will search for `cypress-project` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/storybook:cypress-project ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g cypress-project ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library or application name + +### directory + +Type: `string` + +A directory where the project is placed + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint`, `none` + +The tool to use for running lint checks. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json diff --git a/docs/default/api-storybook/generators/migrate-defaults-5-to-6.md b/docs/default/api-storybook/generators/migrate-defaults-5-to-6.md new file mode 100644 index 0000000000..2d89444bb8 --- /dev/null +++ b/docs/default/api-storybook/generators/migrate-defaults-5-to-6.md @@ -0,0 +1,52 @@ +--- +title: '@nrwl/storybook:migrate-defaults-5-to-6 generator' +description: 'Generate default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x.' +--- + +# @nrwl/storybook:migrate-defaults-5-to-6 + +Generate default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x. + +## Usage + +```bash +nx generate migrate-defaults-5-to-6 ... +``` + +By default, Nx will search for `migrate-defaults-5-to-6` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/storybook:migrate-defaults-5-to-6 ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g migrate-defaults-5-to-6 ... --dry-run +``` + +## Options + +### all + +Default: `true` + +Type: `boolean` + +Generate new Storybook configurations for all Storybook instances across all apps and libs. + +### keepOld + +Default: `true` + +Type: `boolean` + +Keep the old configuration files - put them in a folder called .old_storybook. + +### name + +Type: `string` + +Leave empty to upgrade all Storybook instances. Only use this if you want to do a gradual migration. Library or application name for which you want to generate the new Storybook configuration. diff --git a/docs/default/api-storybook/generators/migrate-stories-to-6-2.md b/docs/default/api-storybook/generators/migrate-stories-to-6-2.md new file mode 100644 index 0000000000..a980e2e390 --- /dev/null +++ b/docs/default/api-storybook/generators/migrate-stories-to-6-2.md @@ -0,0 +1,28 @@ +--- +title: '@nrwl/storybook:migrate-stories-to-6-2 generator' +description: 'Migrate stories syntax to 6.2' +--- + +# @nrwl/storybook:migrate-stories-to-6-2 + +Migrate stories syntax to 6.2 + +## Usage + +```bash +nx generate migrate-stories-to-6-2 ... +``` + +By default, Nx will search for `migrate-stories-to-6-2` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/storybook:migrate-stories-to-6-2 ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g migrate-stories-to-6-2 ... --dry-run +``` diff --git a/docs/default/api-web/executors/dev-server.md b/docs/default/api-web/executors/dev-server.md new file mode 100644 index 0000000000..03b2d41927 --- /dev/null +++ b/docs/default/api-web/executors/dev-server.md @@ -0,0 +1,116 @@ +--- +title: '@nrwl/web:dev-server executor' +description: 'Serve a web application' +--- + +# @nrwl/web:dev-server + +Serve a web application + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### allowedHosts + +Type: `string` + +This option allows you to whitelist services that are allowed to access the dev server. + +### baseHref + +Type: `string` + +Base url for the application being built. + +### buildTarget + +Type: `string` + +Target which builds the application + +### hmr + +Default: `false` + +Type: `boolean` + +Enable hot module replacement. + +### host + +Default: `localhost` + +Type: `string` + +Host to listen on. + +### liveReload + +Default: `true` + +Type: `boolean` + +Whether to reload the page on change, using live-reload. + +### maxWorkers + +Type: `number` + +Number of workers to use for type checking. + +### memoryLimit + +Type: `number` + +Memory limit for type checking service process in MB. + +### open + +Default: `false` + +Type: `boolean` + +Open the application in the browser. + +### port + +Default: `4200` + +Type: `number` + +Port to listen on. + +### publicHost + +Type: `string` + +Public URL where the application will be served + +### ssl + +Default: `false` + +Type: `boolean` + +Serve using HTTPS. + +### sslCert + +Type: `string` + +SSL certificate to use for serving HTTPS. + +### sslKey + +Type: `string` + +SSL key to use for serving HTTPS. + +### watch + +Default: `true` + +Type: `boolean` + +Watches for changes and rebuilds application diff --git a/docs/default/api-web/executors/file-server.md b/docs/default/api-web/executors/file-server.md new file mode 100644 index 0000000000..52568a1071 --- /dev/null +++ b/docs/default/api-web/executors/file-server.md @@ -0,0 +1,82 @@ +--- +title: '@nrwl/web:file-server executor' +description: 'Serve a web application from a folder' +--- + +# @nrwl/web:file-server + +Serve a web application from a folder + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### buildTarget (_**required**_) + +Type: `string` + +Target which builds the application + +### host + +Default: `localhost` + +Type: `string` + +Host to listen on. + +### maxParallel + +Type: `number` + +Max number of parallel jobs + +### parallel + +Default: `true` + +Type: `boolean` + +Build the target in parallel + +### port + +Default: `4200` + +Type: `number` + +Port to listen on. + +### proxyUrl + +Type: `string` + +URL to proxy unhandled requests to. + +### ssl + +Default: `false` + +Type: `boolean` + +Serve using HTTPS. + +### sslCert + +Type: `string` + +SSL certificate to use for serving HTTPS. + +### sslKey + +Type: `string` + +SSL key to use for serving HTTPS. + +### withDeps + +Default: `true` + +Type: `boolean` + +Build the target and all its deps diff --git a/docs/default/api-web/executors/rollup.md b/docs/default/api-web/executors/rollup.md new file mode 100644 index 0000000000..538477c1a8 --- /dev/null +++ b/docs/default/api-web/executors/rollup.md @@ -0,0 +1,138 @@ +--- +title: '@nrwl/web:rollup executor' +description: 'Package a library using rollup' +--- + +# @nrwl/web:rollup + +Package a library using rollup + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### entryFile (_**required**_) + +Type: `string` + +The path to the entry file, relative to project. + +### outputPath (_**required**_) + +Type: `string` + +The output path of the generated files. + +### project (_**required**_) + +Type: `string` + +The path to package.json file. + +### tsConfig (_**required**_) + +Type: `string` + +The path to tsconfig file. + +### assets + +Type: `array` + +List of static assets. + +### buildableProjectDepsInPackageJsonType + +Default: `peerDependencies` + +Type: `string` + +Possible values: `dependencies`, `peerDependencies` + +When updateBuildableProjectDepsInPackageJson is true, this adds dependencies to either `peerDependencies` or `dependencies` + +### compiler + +Default: `babel` + +Type: `string` + +Possible values: `babel`, `swc` + +Which compiler to use. + +### deleteOutputPath + +Default: `true` + +Type: `boolean` + +Delete the output path before building. + +### external + +Type: `array` + +A list of external modules that will not be bundled (react, react-dom, etc.). + +### extractCss + +Default: `true` + +Type: `boolean` + +CSS files will be extracted to the output folder. + +### format + +Alias(es): f + +Type: `array` + +Only build the specified comma-separated formats (esm,umd,cjs) + +### globals + +Type: `object[]` + +A mapping of node modules to their UMD global names. Used by the UMD bundle + +#### moduleId + +Type: `string` + +The node module to map from (e.g. `react-dom`). + +#### global + +Type: `string` + +The global name to map to (e.g. `ReactDOM`). + +### rollupConfig + +Type: `array[] | string ` + +Path to a function which takes a rollup config and returns an updated rollup config + +### umdName + +Type: `string` + +The name of your module in UMD format. Defaulted to your project name. + +### updateBuildableProjectDepsInPackageJson + +Default: `true` + +Type: `boolean` + +Update buildable project dependencies in package.json + +### watch + +Default: `false` + +Type: `boolean` + +Enable re-building when files change. diff --git a/docs/default/api-web/executors/webpack.md b/docs/default/api-web/executors/webpack.md new file mode 100644 index 0000000000..243c29b9e7 --- /dev/null +++ b/docs/default/api-web/executors/webpack.md @@ -0,0 +1,272 @@ +--- +title: '@nrwl/web:webpack executor' +description: 'Build an application using webpack' +--- + +# @nrwl/web:webpack + +Build an application using webpack + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Options + +### index (_**required**_) + +Type: `string` + +HTML File which will be contain the application + +### main (_**required**_) + +Type: `string` + +The name of the main entry-point file. + +### tsConfig (_**required**_) + +Type: `string` + +The name of the Typescript configuration file. + +### assets + +Type: `array` + +List of static application assets. + +### baseHref + +Type: `string` + +Base url for the application being built. + +### budgets + +Type: `array` + +Budget thresholds to ensure parts of your application stay within boundaries which you set. + +### buildLibsFromSource + +Default: `true` + +Type: `boolean` + +Read buildable libraries from source instead of building them separately. + +### commonChunk + +Default: `true` + +Type: `boolean` + +Use a separate bundle containing code used across multiple bundles. + +### compiler + +Default: `babel` + +Type: `string` + +Possible values: `babel`, `swc` + +The compiler to use + +### crossOrigin + +Type: `string` + +The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials' + +### deleteOutputPath + +Default: `true` + +Type: `boolean` + +Delete the output path before building. + +### deployUrl + +Type: `string` + +URL where the application will be deployed. + +### es2015Polyfills + +Type: `string` + +Conditional polyfills loaded in browsers which do not support ES2015. + +### extractCss + +Default: `false` + +Type: `boolean` + +Extract css into a .css file + +### extractLicenses + +Default: `false` + +Type: `boolean` + +Extract all licenses in a separate file, in the case of production builds only. + +### fileReplacements + +Type: `object[]` + +Replace files with other files in the build. + +#### replace + +Type: `string` + +The file to be replaced. + +#### with + +Type: `string` + +The file to replace with. + +### generateIndexHtml + +Default: `true` + +Type: `boolean` + +Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin` + +### maxWorkers + +Type: `number` + +Number of workers to use for type checking. (defaults to # of CPUS - 2) + +### memoryLimit + +Type: `number` + +Memory limit for type checking service process in MB. (defaults to 2048) + +### namedChunks + +Default: `true` + +Type: `boolean` + +Names the produced bundles according to their entry file + +### optimization + +Type: `boolean` + +Enables optimization of the build output. + +### outputHashing + +Default: `none` + +Type: `string` + +Possible values: `none`, `all`, `media`, `bundles` + +Define the output filename cache-busting hashing mode. + +### outputPath + +Type: `string` + +The output path of the generated files. + +### polyfills + +Type: `string` + +Polyfills to load before application + +### progress + +Default: `false` + +Type: `boolean` + +Log progress to the console while building. + +### runtimeChunk + +Default: `true` + +Type: `boolean` + +Use a separate bundle containing the runtime. + +### scripts + +Type: `array` + +External Scripts which will be included before the main application entry + +### sourceMap + +Default: `true` + +Type: `boolean | string ` + +Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment. + +### statsJson + +Default: `false` + +Type: `boolean` + +Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or . + +### styles + +Type: `array` + +External Styles which will be included with the application + +### subresourceIntegrity + +Default: `false` + +Type: `boolean` + +Enables the use of subresource integrity validation. + +### vendorChunk + +Default: `true` + +Type: `boolean` + +Use a separate bundle containing only vendor libraries. + +### verbose + +Default: `false` + +Type: `boolean` + +Emits verbose output + +### watch + +Default: `false` + +Type: `boolean` + +Enable re-building when files change. + +### webpackConfig + +Type: `string` + +Path to a function which takes a webpack config, some context and returns the resulting webpack config diff --git a/docs/default/api-web/generators/application.md b/docs/default/api-web/generators/application.md new file mode 100644 index 0000000000..3d5a1cf708 --- /dev/null +++ b/docs/default/api-web/generators/application.md @@ -0,0 +1,124 @@ +--- +title: '@nrwl/web:application generator' +description: 'Create an application' +--- + +# @nrwl/web:application + +Create an application + +## Usage + +```bash +nx generate application ... +``` + +```bash +nx g app ... # same +``` + +By default, Nx will search for `application` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/web:application ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g application ... --dry-run +``` + +## Options + +### compiler + +Default: `babel` + +Type: `string` + +Possible values: `babel`, `swc` + +The compiler to use + +### directory + +Type: `string` + +The directory of the new application. + +### e2eTestRunner + +Default: `cypress` + +Type: `string` + +Possible values: `cypress`, `none` + +Test runner to use for end to end (e2e) tests + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint`, `tslint` + +The tool to use for running lint checks. + +### name + +Type: `string` + +The name of the application. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### style + +Default: `css` + +Type: `string` + +Possible values: `css`, `scss`, `styl`, `less` + +The file extension to be used for style files. + +### tags + +Type: `string` + +Add tags to the application (used for linting) + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-workspace/executors/run-commands.md b/docs/default/api-workspace/executors/run-commands.md new file mode 100644 index 0000000000..0f50b28e11 --- /dev/null +++ b/docs/default/api-workspace/executors/run-commands.md @@ -0,0 +1,230 @@ +--- +title: '@nrwl/workspace:run-commands executor' +description: 'Run any custom commands with Nx' +--- + +# @nrwl/workspace:run-commands + +Run any custom commands with Nx + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Examples + +`workspace.json`: + +```json +//... +"frontend": { + "targets": { + //... + "ls-project-root": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "command": "ls apps/frontend/src" + } + } + } +} +``` + +```bash +nx run frontend:ls-project-root +``` + +##### Chaining commands, interpolating args and setting the cwd + +Let's say each of our workspace projects has some custom bash scripts in a `scripts` folder. +We want a simple way to create empty bash script files for a given project, that have the execute permissions already set. + +Given that Nx knows our workspace structure, we should be able to give it a project and the name of our script, and it should take care of the rest. + +The `commands` option accepts as many commands as you want. By default, they all run in parallel. +You can run them sequentially by setting `parallel: false`: + +```json +"create-script": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "commands": [ + "mkdir -p scripts", + "touch scripts/{args.name}.sh", + "chmod +x scripts/{args.name}.sh" + ], + "cwd": "apps/frontend", + "parallel": false + } +} +``` + +By setting the `cwd` option, each command will run in the `apps/frontend` folder. + +We run the above with: + +```bash +nx run frontend:create-script --args="--name=example" +``` + +or simply with: + +```bash +nx run frontend:create-script --name=example +``` + +##### Arguments forwarding + +When interpolation is not present in the command, all arguments are forwarded to the command by default. + +This is useful when you need to pass raw argument strings to your command. + +For example, when you run: + +nx run frontend:webpack --args="--config=example.config.js" + +```json +"webpack": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "command": "webpack" + } +} +``` + +The above command will execute: `webpack --config=example.config.js` + +This functionality can be disabled by using `commands` and expanding each `command` into an object +that sets the `forwardAllArgs` option to `false` as shown below: + +```json +"webpack": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "commands": [ + { + "command": "webpack", + "forwardAllArgs": false + } + ] + } +} +``` + +##### Custom **done** conditions + +Normally, `run-commands` considers the commands done when all of them have finished running. If you don't need to wait until they're all done, you can set a special string that considers the commands finished the moment the string appears in `stdout` or `stderr`: + +```json +"finish-when-ready": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "commands": [ + "sleep 5 && echo 'FINISHED'", + "echo 'READY'" + ], + "readyWhen": "READY", + "parallel": true + } +} +``` + +```bash +nx run frontend:finish-when-ready +``` + +The above commands will finish immediately, instead of waiting for 5 seconds. + +##### Nx Affected + +The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your dependency graph. So you can run **custom commands** only for the projects that have been affected by a change. + +We can create some configurations to generate docs, and if run using `nx affected`, it will only generate documentation for the projects that have been changed: + +```bash +nx affected --target=generate-docs +``` + +```json +//... +"frontend": { + "targets": { + //... + "generate-docs": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "command": "npx compodoc -p apps/frontend/tsconfig.app.json" + } + } + } +}, +"api": { + "targets": { + //... + "generate-docs": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "command": "npx compodoc -p apps/api/tsconfig.app.json" + } + } + } +} +``` + +## Options + +### args + +Type: `string` + +Extra arguments. You can pass them as follows: nx run project:target --args='--wait=100'. You can then use {args.wait} syntax to interpolate them in the workspace config file. See example [above](#chaining-commands-interpolating-args-and-setting-the-cwd) + +### color + +Default: `false` + +Type: `boolean` + +Use colors when showing output of command + +### command + +Type: `string` + +Command to run in child process + +### commands + +Type: `array` + +Commands to run in child process + +### cwd + +Type: `string` + +Current working directory of the commands. If it's not specified the commands will run in the workspace root, if a relative path is specified the commands will run in that path relative to the workspace root and if it's an absolute path the commands will run in that path. + +### envFile + +Type: `string` + +You may specify a custom .env file path + +### outputPath + +Type: `string | string[] ` + +Allows you to specify where the build artifacts are stored. This allows Nx Cloud to pick them up correctly, in the case that the build artifacts are placed somewhere other than the top level dist folder. + +### parallel + +Default: `true` + +Type: `boolean` + +Run commands in parallel + +### readyWhen + +Type: `string` + +String to appear in `stdout` or `stderr` that indicates that the task is done. When running multiple commands, this option can only be used when `parallel` is set to `true`. If not specified, the task is done when all the child processes complete. diff --git a/docs/default/api-workspace/executors/run-script.md b/docs/default/api-workspace/executors/run-script.md new file mode 100644 index 0000000000..344a4eda77 --- /dev/null +++ b/docs/default/api-workspace/executors/run-script.md @@ -0,0 +1,61 @@ +--- +title: '@nrwl/workspace:run-script executor' +description: 'Run an npm script using Nx' +--- + +# @nrwl/workspace:run-script + +Run an npm script using Nx + +Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets. + +## Examples + +`workspace.json`: + +```json +"frontend": { + "root": "packages/frontend", + "targets": { + "build": { + "executor": "@nrwl/workspace:run-script", + "options": { + "script": "build-my-project" + } + } + } +} +``` + +```bash +nx run frontend:build +``` + +The `build` target is going to run `npm run build-my-project` (or `yarn build-my-project`) in the `packages/frontend` directory. + +#### Caching Artifacts + +By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/dist`, `packages/frontend/build`, `packages/frontend/public`. If your npm script writes files to other places, you can override the list of cached outputs as follows: + +```json +"frontend": { + "root": "packages/frontend", + "targets": { + "build": { + "executor": "@nrwl/workspace:run-script", + "outputs": ["packages/frontend/dist", "packaged/frontend/docs"], + "options": { + "script": "build-my-project" + } + } + } +} +``` + +## Options + +### script (_**required**_) + +Type: `string` + +An npm script name in the package.json file of the project (e.g., build) diff --git a/docs/default/api-workspace/generators/convert-to-nx-project.md b/docs/default/api-workspace/generators/convert-to-nx-project.md new file mode 100644 index 0000000000..abcba6ffdf --- /dev/null +++ b/docs/default/api-workspace/generators/convert-to-nx-project.md @@ -0,0 +1,56 @@ +--- +title: '@nrwl/workspace:convert-to-nx-project generator' +description: "Moves a project's configuration outside of workspace.json" +--- + +# @nrwl/workspace:convert-to-nx-project + +Moves a project's configuration outside of workspace.json + +## Usage + +```bash +nx generate convert-to-nx-project ... +``` + +By default, Nx will search for `convert-to-nx-project` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:convert-to-nx-project ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g convert-to-nx-project ... --dry-run +``` + +### Examples + +Convert the my-feature-lib project to use project.json file instead of workspace.json: + +```bash +nx g @nrwl/workspace:convert-to-nx-project --project my-feature-lib +``` + +Convert all projects in workspace.json to separate project.json files.: + +```bash +nx g @nrwl/workspace:convert-to-nx-project --all +``` + +## Options + +### all + +Type: `boolean` + +Should every project be converted? + +### project + +Type: `string` + +Project name diff --git a/docs/default/api-workspace/generators/library.md b/docs/default/api-workspace/generators/library.md new file mode 100644 index 0000000000..49245254c0 --- /dev/null +++ b/docs/default/api-workspace/generators/library.md @@ -0,0 +1,176 @@ +--- +title: '@nrwl/workspace:library generator' +description: 'Create a library' +--- + +# @nrwl/workspace:library + +Create a library + +## Usage + +```bash +nx generate library ... +``` + +```bash +nx g lib ... # same +``` + +By default, Nx will search for `library` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:library ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g library ... --dry-run +``` + +### Examples + +Generate libs/myapp/mylib: + +```bash +nx g lib mylib --directory=myapp +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Library name + +### babelJest + +Default: `false` + +Type: `boolean` + +Use babel instead ts-jest + +### buildable + +Default: `false` + +Type: `boolean` + +Generate a buildable library. + +### directory + +Type: `string` + +A directory where the lib is placed + +### importPath + +Type: `string` + +The library name used to import it, like @myorg/my-awesome-lib + +### js + +Default: `false` + +Type: `boolean` + +Generate JavaScript files rather than TypeScript files + +### linter + +Default: `eslint` + +Type: `string` + +Possible values: `eslint` + +The tool to use for running lint checks. + +### pascalCaseFiles + +Alias(es): P + +Default: `false` + +Type: `boolean` + +Use pascal case file names. + +### setParserOptionsProject + +Default: `false` + +Type: `boolean` + +Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons. + +### skipBabelrc + +Default: `false` + +Type: `boolean` + +Do not generate .babelrc file. Useful for Node libraries that are not compiled by Babel + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files + +### skipTsConfig + +Default: `false` + +Type: `boolean` + +Do not update tsconfig.json for development experience. + +### standaloneConfig + +Type: `boolean` + +Split the project configuration into /project.json rather than including it inside workspace.json + +### strict + +Default: `true` + +Type: `boolean` + +Whether to enable tsconfig strict mode or not. + +### tags + +Type: `string` + +Add tags to the library (used for linting) + +### testEnvironment + +Default: `jsdom` + +Type: `string` + +Possible values: `jsdom`, `node` + +The test environment to use if unitTestRunner is set to jest + +### unitTestRunner + +Default: `jest` + +Type: `string` + +Possible values: `jest`, `none` + +Test runner to use for unit tests diff --git a/docs/default/api-workspace/generators/move.md b/docs/default/api-workspace/generators/move.md new file mode 100644 index 0000000000..cde24e0be6 --- /dev/null +++ b/docs/default/api-workspace/generators/move.md @@ -0,0 +1,80 @@ +--- +title: '@nrwl/workspace:move generator' +description: 'Move an application or library to another folder' +--- + +# @nrwl/workspace:move + +Move an application or library to another folder + +## Usage + +```bash +nx generate move ... +``` + +```bash +nx g mv ... # same +``` + +By default, Nx will search for `move` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:move ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g move ... --dry-run +``` + +### Examples + +Move libs/my-feature-lib to libs/shared/my-feature-lib: + +```bash +nx g @nrwl/workspace:move --project my-feature-lib shared/my-feature-lib +``` + +## Options + +### destination (_**required**_) + +Type: `string` + +The folder to move the project into + +### projectName (_**required**_) + +Alias(es): project + +Type: `string` + +The name of the project to move + +### importPath + +Type: `string` + +The new import path to use in the tsconfig.base.json + +### skipFormat + +Alias(es): skip-format + +Default: `false` + +Type: `boolean` + +Skip formatting files. + +### updateImportPath + +Default: `true` + +Type: `boolean` + +Should the generator update the import path to reflect the new location? diff --git a/docs/default/api-workspace/generators/npm-package.md b/docs/default/api-workspace/generators/npm-package.md new file mode 100644 index 0000000000..ca5ad7bdc5 --- /dev/null +++ b/docs/default/api-workspace/generators/npm-package.md @@ -0,0 +1,36 @@ +--- +title: '@nrwl/workspace:npm-package generator' +description: 'Create a minimal npm package' +--- + +# @nrwl/workspace:npm-package + +Create a minimal npm package + +## Usage + +```bash +nx generate npm-package ... +``` + +By default, Nx will search for `npm-package` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:npm-package ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g npm-package ... --dry-run +``` + +## Options + +### name (_**required**_) + +Type: `string` + +Package name diff --git a/docs/default/api-workspace/generators/remove.md b/docs/default/api-workspace/generators/remove.md new file mode 100644 index 0000000000..494639ce26 --- /dev/null +++ b/docs/default/api-workspace/generators/remove.md @@ -0,0 +1,76 @@ +--- +title: '@nrwl/workspace:remove generator' +description: 'Remove an application or library' +--- + +# @nrwl/workspace:remove + +Remove an application or library + +## Usage + +```bash +nx generate remove ... +``` + +```bash +nx g rm ... # same +``` + +By default, Nx will search for `remove` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:remove ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g remove ... --dry-run +``` + +### Examples + +Remove my-feature-lib from the workspace: + +```bash +nx g @nrwl/workspace:remove my-feature-lib +``` + +Force removal of my-feature-lib from the workspace: + +```bash +nx g @nrwl/workspace:remove my-feature-lib --forceRemove +``` + +## Options + +### projectName (_**required**_) + +Alias(es): project + +Type: `string` + +The name of the project to remove + +### forceRemove + +Alias(es): force-remove + +Default: `false` + +Type: `boolean` + +When true, forces removal even if the project is still in use. + +### skipFormat + +Alias(es): skip-format + +Default: `false` + +Type: `boolean` + +Skip formatting files. diff --git a/docs/default/api-workspace/generators/run-commands.md b/docs/default/api-workspace/generators/run-commands.md new file mode 100644 index 0000000000..79cb2ee0ef --- /dev/null +++ b/docs/default/api-workspace/generators/run-commands.md @@ -0,0 +1,78 @@ +--- +title: '@nrwl/workspace:run-commands generator' +description: 'Generates a target to run any command in the terminal' +--- + +# @nrwl/workspace:run-commands + +Generates a target to run any command in the terminal + +## Usage + +```bash +nx generate run-commands ... +``` + +```bash +nx g run-command ... # same +``` + +By default, Nx will search for `run-commands` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:run-commands ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g run-commands ... --dry-run +``` + +### Examples + +Add the printhello target to my-feature-lib: + +```bash +nx g @nrwl/workspace:run-commands printhello --project my-feature-lib --command 'echo hello' +``` + +## Options + +### command (_**required**_) + +Type: `string` + +Command to run + +### name (_**required**_) + +Type: `string` + +Target name + +### project (_**required**_) + +Type: `string` + +Project name + +### cwd + +Type: `string` + +Current working directory of the command + +### envFile + +Type: `string` + +Env files to be loaded before executing the commands + +### outputs + +Type: `string` + +Allows you to specify where the build artifacts are stored. This allows Nx Cloud to pick them up correctly, in the case that the build artifacts are placed somewhere other than the top level dist folder. diff --git a/docs/default/api-workspace/generators/workspace-generator.md b/docs/default/api-workspace/generators/workspace-generator.md new file mode 100644 index 0000000000..99fdf2e494 --- /dev/null +++ b/docs/default/api-workspace/generators/workspace-generator.md @@ -0,0 +1,48 @@ +--- +title: '@nrwl/workspace:workspace-generator generator' +description: 'Generates a workspace generator' +--- + +# @nrwl/workspace:workspace-generator + +Generates a workspace generator + +## Usage + +```bash +nx generate workspace-generator ... +``` + +```bash +nx g workspace-schematic ... # same +``` + +By default, Nx will search for `workspace-generator` in the default collection provisioned in `workspace.json`. + +You can specify the collection explicitly as follows: + +```bash +nx g @nrwl/workspace:workspace-generator ... +``` + +Show what will be generated without writing to disk: + +```bash +nx g workspace-generator ... --dry-run +``` + +## Options + +### name + +Type: `string` + +Generator name + +### skipFormat + +Default: `false` + +Type: `boolean` + +Skip formatting files diff --git a/docs/default/cli/affected-apps.md b/docs/default/cli/affected-apps.md new file mode 100644 index 0000000000..8a7a9cdbd4 --- /dev/null +++ b/docs/default/cli/affected-apps.md @@ -0,0 +1,104 @@ +--- +title: 'affected:apps - CLI command' +description: 'Print applications affected by changes' +--- + +# affected:apps + +Print applications affected by changes + +## Usage + +```bash +nx affected:apps +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Print the names of all the apps affected by changing the index.ts file: + +```bash +nx affected:apps --files=libs/mylib/src/index.ts +``` + +Print the names of all the apps affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:apps --base=main --head=HEAD +``` + +Print the names of all the apps affected by the last commit on main: + +```bash +nx affected:apps --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### plain + +Produces a plain output for affected:apps and affected:libs + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected-build.md b/docs/default/cli/affected-build.md new file mode 100644 index 0000000000..496a757652 --- /dev/null +++ b/docs/default/cli/affected-build.md @@ -0,0 +1,116 @@ +--- +title: 'affected:build - CLI command' +description: 'Build applications and publishable libraries affected by changes' +--- + +# affected:build + +Build applications and publishable libraries affected by changes + +## Usage + +```bash +nx affected:build +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run build in parallel: + +```bash +nx affected:build --parallel=5 +``` + +Run the build target for all projects: + +```bash +nx affected:build --all +``` + +Run build for all the projects affected by changing the index.ts file: + +```bash +nx affected:build --files=libs/mylib/src/index.ts +``` + +Run build for all the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:build --base=main --head=HEAD +``` + +Run build for all the projects affected by the last commit on main: + +```bash +nx affected:build --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected-dep-graph.md b/docs/default/cli/affected-dep-graph.md new file mode 100644 index 0000000000..837fe6494f --- /dev/null +++ b/docs/default/cli/affected-dep-graph.md @@ -0,0 +1,150 @@ +--- +title: 'affected:dep-graph - CLI command' +description: 'Graph dependencies affected by changes' +--- + +# affected:dep-graph + +Graph dependencies affected by changes + +## Usage + +```bash +nx affected:dep-graph +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Open the dep graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file: + +```bash +nx affected:dep-graph --files=libs/mylib/src/index.ts +``` + +Open the dep graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:dep-graph --base=main --head=HEAD +``` + +Save the dep graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:dep-graph --base=main --head=HEAD --file=output.json +``` + +Generate a static website with dep graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:dep-graph --base=main --head=HEAD --file=output.html +``` + +Open the dep graph of the workspace in the browser, and highlight the projects affected by the last commit on main: + +```bash +nx affected:dep-graph --base=main~1 --head=main +``` + +Open the dep graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two: + +```bash +nx affected:dep-graph --exclude=project-one,project-two +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### file + +Output file (e.g. --file=output.json or --file=dep-graph.html) + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### focus + +Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant. + +### groupByFolder + +Group projects by folder in the dependency graph + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### host + +Bind the dependency graph server to a specific ip address. + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### open + +Default: `true` + +Open the dependency graph in the browser. + +### port + +Bind the dependency graph server to a specific port. + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number + +### watch + +Default: `false` + +Watch for changes to dependency graph and update in-browser diff --git a/docs/default/cli/affected-e2e.md b/docs/default/cli/affected-e2e.md new file mode 100644 index 0000000000..09e799bdb0 --- /dev/null +++ b/docs/default/cli/affected-e2e.md @@ -0,0 +1,116 @@ +--- +title: 'affected:e2e - CLI command' +description: 'Run e2e tests for the applications affected by changes' +--- + +# affected:e2e + +Run e2e tests for the applications affected by changes + +## Usage + +```bash +nx affected:e2e +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run tests in parallel: + +```bash +nx affected:e2e --parallel=5 +``` + +Run the test target for all projects: + +```bash +nx affected:e2e --all +``` + +Run tests for all the projects affected by changing the index.ts file: + +```bash +nx affected:e2e --files=libs/mylib/src/index.ts +``` + +Run tests for all the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:e2e --base=main --head=HEAD +``` + +Run tests for all the projects affected by the last commit on main: + +```bash +nx affected:e2e --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected-libs.md b/docs/default/cli/affected-libs.md new file mode 100644 index 0000000000..e75edf0984 --- /dev/null +++ b/docs/default/cli/affected-libs.md @@ -0,0 +1,104 @@ +--- +title: 'affected:libs - CLI command' +description: 'Print libraries affected by changes' +--- + +# affected:libs + +Print libraries affected by changes + +## Usage + +```bash +nx affected:libs +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Print the names of all the libs affected by changing the index.ts file: + +```bash +nx affected:libs --files=libs/mylib/src/index.ts +``` + +Print the names of all the libs affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:libs --base=main --head=HEAD +``` + +Print the names of all the libs affected by the last commit on main: + +```bash +nx affected:libs --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### plain + +Produces a plain output for affected:apps and affected:libs + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected-lint.md b/docs/default/cli/affected-lint.md new file mode 100644 index 0000000000..bfbf9c1c16 --- /dev/null +++ b/docs/default/cli/affected-lint.md @@ -0,0 +1,116 @@ +--- +title: 'affected:lint - CLI command' +description: 'Lint projects affected by changes' +--- + +# affected:lint + +Lint projects affected by changes + +## Usage + +```bash +nx affected:lint +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run lint in parallel: + +```bash +nx affected:lint --parallel=5 +``` + +Run the lint target for all projects: + +```bash +nx affected:lint --all +``` + +Run lint for all the projects affected by changing the index.ts file: + +```bash +nx affected:lint --files=libs/mylib/src/index.ts +``` + +Run lint for all the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:lint --base=main --head=HEAD +``` + +Run lint for all the projects affected by the last commit on main: + +```bash +nx affected:lint --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected-test.md b/docs/default/cli/affected-test.md new file mode 100644 index 0000000000..5859c7b8e1 --- /dev/null +++ b/docs/default/cli/affected-test.md @@ -0,0 +1,116 @@ +--- +title: 'affected:test - CLI command' +description: 'Test projects affected by changes' +--- + +# affected:test + +Test projects affected by changes + +## Usage + +```bash +nx affected:test +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run tests in parallel: + +```bash +nx affected:test --parallel=5 +``` + +Run the test target for all projects: + +```bash +nx affected:test --all +``` + +Run tests for all the projects affected by changing the index.ts file: + +```bash +nx affected:test --files=libs/mylib/src/index.ts +``` + +Run tests for all the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected:test --base=main --head=HEAD +``` + +Run tests for all the projects affected by the last commit on main: + +```bash +nx affected:test --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/affected.md b/docs/default/cli/affected.md new file mode 100644 index 0000000000..92b3cd456a --- /dev/null +++ b/docs/default/cli/affected.md @@ -0,0 +1,126 @@ +--- +title: 'affected - CLI command' +description: 'Run target for affected projects' +--- + +# affected + +Run target for affected projects + +## Usage + +```bash +nx affected +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run custom target for all affected projects: + +```bash +nx affected --target=custom-target +``` + +Run tests in parallel: + +```bash +nx affected --target=test --parallel=5 +``` + +Run the test target for all projects: + +```bash +nx affected --target=test --all +``` + +Run tests for all the projects affected by changing the index.ts file: + +```bash +nx affected --target=test --files=libs/mylib/src/index.ts +``` + +Run tests for all the projects affected by the changes between main and HEAD (e.g., PR): + +```bash +nx affected --target=test --base=main --head=HEAD +``` + +Run tests for all the projects affected by the last commit on main: + +```bash +nx affected --target=test --base=main~1 --head=main +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### target + +Task to run for affected projects + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/build.md b/docs/default/cli/build.md new file mode 100644 index 0000000000..3890bcd249 --- /dev/null +++ b/docs/default/cli/build.md @@ -0,0 +1,298 @@ +--- +title: 'build - CLI command' +description: 'Compiles an application into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.' +--- + +# build + +Compiles an application into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. + +## Usage + +The `build` command is a built-in alias to the [run command](/{{framework}}/cli/run). + +These two commands are equivalent: + +```bash +nx build [options] +``` + +```bash +nx run :build [options] +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Compile a `production` build of the `myapp` project: + +```bash +nx build myapp --prod +``` + +## Options + +The options below are common to the `build` command used within an Nx workspace. The Web and Angular-specific build options are listed after these options. + +### baseHref + +Default: `/` + +Base url for the application being built. + +### commonChunk + +Use a separate bundle containing code used across multiple bundles. + +Default: `true` + +### budgets + +Budget thresholds to ensure parts of your application stay within boundaries which you set. + +### namedChunks + +Default: `true` + +Names the produced bundles according to their entry file + +### deployUrl + +URL where the application will be deployed. + +### es2015Polyfills + +Conditional polyfills loaded in browsers which do not support ES2015. + +### extractCss + +Extract css into a .css file + +### extractLicenses + +Extract all licenses in a separate file, in the case of production builds only. + +### index + +HTML File which will be contain the application + +### main + +The name of the main entry-point file. + +### tsConfig + +The name of the Typescript configuration file. + +### outputPath + +The output path of the generated files. + +### progress + +Log progress to the console while building. + +### optimization + +Enables optimization of the build output. + +### outputHashing + +Default: `none` + +Define the output filename cache-busting hashing mode. + +### scripts + +External Scripts which will be included before the main application entry. + +### showCircularDependencies + +Default: `true` + +Show circular dependency warnings on builds. + +### sourceMap + +Default: `true` + +Output sourcemaps. + +### statsJson + +Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or . + +### styles + +External Styles which will be included with the application + +### subresourceIntegrity + +Enables the use of subresource integrity validation. + +### vendorChunk + +Default: `true` + +Use a separate bundle containing only vendor libraries. + +### verbose + +Emits verbose output + +### watch + +Enable re-building when files change. + +### help + +Show help information + +### version + +Show version number + +## Web-Build Options + +### assets + +List of static application assets. + +### fileReplacements + +Replace files with other files in the build. + +### maxWorkers + +Number of workers to use for type checking. + +Default: `# of CPUS - 2` + +### memoryLimit + +Memory limit for type checking service process in MB. + +Default: `2048` + +### polyfills + +Polyfills to load before application + +### stylePreprocessorOptions + +Options to pass to style preprocessors. + +### webpackConfig + +Path to a function which takes a webpack config, some context and returns the resulting webpack config + +## Angular Options + +### aot + +Build using Ahead of Time compilation. + +### buildEventLog + +**EXPERIMENTAL** Output file path for Build Event Protocol events + +### buildOptimizer + +Enables `@angular-devkit/build-optimizer` optimizations when using the `--aot` option. + +### configuration (-c) + +A named build target, as specified in the "configurations" section of angular.json. +Each named target is accompanied by a configuration of option defaults for that target. +Setting this explicitly overrides the "--prod" flag + +### crossOrigin + +Define the crossorigin attribute setting of elements that provide CORS support. + +### deleteOutputPath + +Delete the output path before building. + +### deployUrl + +URL where files will be deployed. + +### es5BrowserSupport + +Enables conditionally loaded ES2015 polyfills. + +### evalSourceMap + +Output in-file eval sourcemaps. + +### experimentalRollupPass + +Concatenate modules with Rollup before bundling them with Webpack. + +### forkTypeChecker + +Run the TypeScript type checker in a forked process. + +### i18nFile + +Localization file to use for i18n. + +### i18nFormat + +Format of the localization file specified with --i18n-file. + +### i18nLocale + +Locale to use for i18n. + +### i18nMissingTranslation + +How to handle missing translations for i18n. + +### localize + +### ngswConfigPath + +Path to ngsw-config.json. + +### poll + +Enable and define the file watching poll time period in milliseconds. + +### polyfills + +The full path for the polyfills file, relative to the current workspace. + +### preserveSymlinks + +Do not use the real path when resolving modules. + +### rebaseRootRelativeCssUrls + +Change root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release. + +### resourcesOutputPath + +The path where style resources will be placed, relative to outputPath. + +### serviceWorker + +Generates a service worker config for production builds. + +### skipAppShell + +Flag to prevent building an app shell. + +### vendorSourceMap + +Resolve vendor packages sourcemaps. + +### verbose + +Adds more details to output logging. + +### webWorkerTsConfig + +TypeScript configuration for Web Worker modules. diff --git a/docs/default/cli/connect-to-nx-cloud.md b/docs/default/cli/connect-to-nx-cloud.md new file mode 100644 index 0000000000..e5ddd7d468 --- /dev/null +++ b/docs/default/cli/connect-to-nx-cloud.md @@ -0,0 +1,26 @@ +--- +title: 'connect-to-nx-cloud - CLI command' +description: 'Makes sure the workspace is connected to Nx Cloud' +--- + +# connect-to-nx-cloud + +Makes sure the workspace is connected to Nx Cloud + +## Usage + +```bash +nx connect-to-nx-cloud +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/cli/daemon.md b/docs/default/cli/daemon.md new file mode 100644 index 0000000000..9f729602e9 --- /dev/null +++ b/docs/default/cli/daemon.md @@ -0,0 +1,30 @@ +--- +title: 'daemon - CLI command' +description: "EXPERIMENTAL: Nx DaemonThe Nx Daemon is a local server which runs in the background in order to intelligently cache information about the workspace's project graph." +--- + +# daemon + +EXPERIMENTAL: Nx DaemonThe Nx Daemon is a local server which runs in the background in order to intelligently cache information about the workspace's project graph. + +## Usage + +```bash +nx daemon +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### background + +Default: `true` + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/cli/dep-graph.md b/docs/default/cli/dep-graph.md new file mode 100644 index 0000000000..8356b56378 --- /dev/null +++ b/docs/default/cli/dep-graph.md @@ -0,0 +1,112 @@ +--- +title: 'dep-graph - CLI command' +description: 'Graph dependencies within workspace' +--- + +# dep-graph + +Graph dependencies within workspace + +## Usage + +```bash +nx dep-graph +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Open the dep graph of the workspace in the browser: + +```bash +nx dep-graph +``` + +Save the dep graph into a json file: + +```bash +nx dep-graph --file=output.json +``` + +Generate a static website with dep graph into an html file, accompanied by an asset folder called static: + +```bash +nx dep-graph --file=output.html +``` + +Show the graph where every node is either an ancestor or a descendant of todos-feature-main: + +```bash +nx dep-graph --focus=todos-feature-main +``` + +Include project-one and project-two in the dep graph: + +```bash +nx dep-graph --include=project-one,project-two +``` + +Exclude project-one and project-two from the dep graph: + +```bash +nx dep-graph --exclude=project-one,project-two +``` + +Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two: + +```bash +nx dep-graph --focus=todos-feature-main --exclude=project-one,project-two +``` + +Watch for changes to dep graph and update in-browser: + +```bash +nx dep-graph --watch +``` + +## Options + +### exclude + +List of projects delimited by commas to exclude from the dependency graph. + +### file + +Output file (e.g. --file=output.json or --file=dep-graph.html) + +### focus + +Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant. + +### groupByFolder + +Group projects by folder in the dependency graph + +### help + +Show help + +### host + +Bind the dependency graph server to a specific ip address. + +### open + +Default: `true` + +Open the dependency graph in the browser. + +### port + +Bind the dependency graph server to a specific port. + +### version + +Show version number + +### watch + +Default: `false` + +Watch for changes to dependency graph and update in-browser diff --git a/docs/default/cli/e2e.md b/docs/default/cli/e2e.md new file mode 100644 index 0000000000..6271b2d3e5 --- /dev/null +++ b/docs/default/cli/e2e.md @@ -0,0 +1,156 @@ +--- +title: 'e2e - CLI command' +description: 'Builds and serves an app, then runs end-to-end tests using the configured E2E test runner.' +--- + +# e2e + +Builds and serves an app, then runs end-to-end tests using the configured E2E test runner. + +## Usage + +The `e2e` command is a built-in alias to the [run command](/{{framework}}/cli/run). + +These two commands are equivalent: + +```bash +nx e2e +``` + +```bash +nx run :e2e +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run E2E test with a custom base url: + +```bash +nx e2e myapp-e2e --base-url http://localhost:4201 +``` + +Run E2E test with a specific target: + +```bash +nx e2e myapp-e2e --configuration smoke +``` + +Run E2E test in watch mode: + +```bash +nx e2e myapp-e2e --watch +``` + +## Common Options + +The options below are common to the E2E commands used within an Nx workspace. Cypress and Protractor-specific options are listed below. + +### baseUrl + +Use this to pass directly the address of your distant server address with the port running your application. Setting this will ignore any local server targets. To skip running local targets, reset the `devServerTarget` to empty string. + +### configuration (-c) + +A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the `--prod` option. + +### devServerTarget + +Dev server target to run tests against. + +### prod + +Shorthand for `--configuration=production`. When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination. + +### version + +Show version number + +### watch + +Open the Cypress test runner & automatically run tests when files are updated + +## Cypress Options + +### browser + +The browser to run tests in. + +### ci-build-id + +A unique identifier for a run to enable grouping or parallelization. + +### ci-build-id + +A unique identifier for a run to enable grouping or parallelization. + +### cypress-config + +The path of the Cypress configuration json file. + +### exit + +Whether or not the Cypress Test Runner will stay open after running tests in a spec file + +### group + +A named group for recorded runs in the Cypress dashboard. + +### headless + +Whether or not to open the Cypress application to run the tests. If set to 'true', will run in headless mode. + +### help + +Shows a help message for this command in the console. + +### key + +The key cypress should use to run tests in parallel/record the run (CI only). + +### parallel + +Whether or not Cypress should run its tests in parallel (CI only). + +### record + +Whether or not Cypress should record the results of the tests + +### spec + +A comma delimited glob string that is provided to the Cypress runner to specify which spec files to run. For example: '**examples/**,**actions.spec** + +### ts-config + +The path of the Cypress tsconfig configuration json file. + +## Protractor Options + +### element-explorer + +Start Protractor's Element Explorer for debugging. + +### host + +Host to listen on. + +### port + +The port to use to serve the application. + +### protractor-config + +The name of the Protractor configuration file. + +### specs + +Override specs in the protractor config. + +### suite + +Override suite in the protractor config. + +### webdriver-update + +Try to update webdriver. diff --git a/docs/default/cli/format-check.md b/docs/default/cli/format-check.md new file mode 100644 index 0000000000..54ce4ccb51 --- /dev/null +++ b/docs/default/cli/format-check.md @@ -0,0 +1,88 @@ +--- +title: 'format:check - CLI command' +description: 'Check for un-formatted files' +--- + +# format:check + +Check for un-formatted files + +## Usage + +```bash +nx format:check +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### libs-and-apps + +Format only libraries and applications files. + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### projects + +Projects to format (comma delimited) + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/format-write.md b/docs/default/cli/format-write.md new file mode 100644 index 0000000000..8f66ad7593 --- /dev/null +++ b/docs/default/cli/format-write.md @@ -0,0 +1,88 @@ +--- +title: 'format:write - CLI command' +description: 'Overwrite un-formatted files' +--- + +# format:write + +Overwrite un-formatted files + +## Usage + +```bash +nx format:write +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### libs-and-apps + +Format only libraries and applications files. + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### projects + +Projects to format (comma delimited) + +### runner + +This is the name of the tasks runner configured in nx.json + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/generate.md b/docs/default/cli/generate.md new file mode 100644 index 0000000000..ece284ea10 --- /dev/null +++ b/docs/default/cli/generate.md @@ -0,0 +1,98 @@ +--- +title: 'generate - CLI command' +description: 'Runs a generator that creates and/or modifies files based on a generator from a collection.' +--- + +# generate + +Runs a generator that creates and/or modifies files based on a generator from a collection. + +## Usage + +```bash +nx generate +``` + +```bash +nx g +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Generate a new Angular application: + +```bash +nx generate @nrwl/angular:app myapp +``` + +Generate a new React application: + +```bash +nx generate @nrwl/react:app myapp +``` + +Generate a new web component application: + +```bash +nx generate @nrwl/web:app myapp +``` + +Generate a new Node application: + +```bash +nx generate @nrwl/node:app myapp +``` + +Generate a new Angular library application: + +```bash +nx generate @nrwl/angular:library mylibrary +``` + +Generate a new React library application: + +```bash +nx generate @nrwl/react:library mylibrary +``` + +Generate a new Node library application: + +```bash +nx generate @nrwl/node:library mylibrary +``` + +## Options + +### defaults + +Default: `false` + +When true, disables interactive input prompts for options with a default. + +### dryRun + +Default: `false` + +When true, disables interactive input prompts for options with a default. + +### force + +Default: `false` + +When true, forces overwriting of existing files. + +### interactive + +Default: `true` + +When false, disables interactive input prompts. + +### help + +Show help and display available generators in the default collection. + +### version + +Show version number diff --git a/docs/default/cli/lint.md b/docs/default/cli/lint.md new file mode 100644 index 0000000000..d13a85b591 --- /dev/null +++ b/docs/default/cli/lint.md @@ -0,0 +1,110 @@ +--- +title: 'lint - CLI command' +description: 'Runs linting tools on application code in a given project folder using the configured linter.' +--- + +# lint + +Runs linting tools on application code in a given project folder using the configured linter. + +## Usage + +The `lint` command is a built-in alias to the [run command](/{{framework}}/cli/run). + +These two commands are equivalent: + +```bash +nx lint [options] +``` + +```bash +nx run :lint [options] +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run lint checks for the `myapp` project and fix linter errors: + +```bash +nx lint myapp --fix +``` + +## Common Options + +The options below are common to the `lint` command used within an Nx workspace. The ESLint and Angular-specific lint options are listed after these options. + +### exclude + +Files to exclude from linting. + +### files + +Files to include in linting. + +### fix + +Fixes linting errors (may overwrite linted files). + +### force + +Succeeds even if there was linting errors. + +### format + +ESLint Output formatter (https://eslint.org/docs/user-guide/formatters). (default: stylish) + +### silent + +Hide output text. + +### tsConfig + +The name of the TypeScript configuration file. + +### help + +Show help information + +### version + +Show version number + +## ESLint Options + +### cache + +Only check changed files. + +### cacheLocation + +Path to the cache file or directory. + +### config + +The name of the configuration file. + +### linter + +The tool to use for running lint checks. + +Default: `tslint` + +### outputFile + +File to write report to. + +## Angular-TSLint Options + +### configuration (-c) + +The linting configuration to use. + +### tslint-config + +The name of the TSLint configuration file. + +### type-check + +Controls the type check for linting. diff --git a/docs/default/cli/list.md b/docs/default/cli/list.md new file mode 100644 index 0000000000..9f055f0e2d --- /dev/null +++ b/docs/default/cli/list.md @@ -0,0 +1,46 @@ +--- +title: 'list - CLI command' +description: 'Lists installed plugins, capabilities of installed plugins and other available plugins.' +--- + +# list + +Lists installed plugins, capabilities of installed plugins and other available plugins. + +## Usage + +```bash +nx list +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +List the plugins installed in the current workspace: + +```bash +nx list +``` + +List the generators and executors available in the `@nrwl/web` plugin if it is installed (If the plugin is not installed `nx` will show advice on how to add it to your workspace): + +```bash +nx list @nrwl/web +``` + +## Options + +### help + +Show help + +### plugin + +Default: `null` + +The name of an installed plugin to query + +### version + +Show version number diff --git a/docs/default/cli/migrate.md b/docs/default/cli/migrate.md new file mode 100644 index 0000000000..83d5bae7ee --- /dev/null +++ b/docs/default/cli/migrate.md @@ -0,0 +1,70 @@ +--- +title: "migrate - CLI command" +description: "Creates a migrations file or runs migrations from the migrations file. +- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest) +- Run migrations (e.g., nx migrate --run-migrations=migrations.json) +" +--- + +# migrate + +Creates a migrations file or runs migrations from the migrations file. + +- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest) +- Run migrations (e.g., nx migrate --run-migrations=migrations.json) + +## Usage + +```bash +nx migrate +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Update @nrwl/workspace to "next". This will update other packages and will generate migrations.json: + +```bash +nx migrate next +``` + +Update @nrwl/workspace to "9.0.0". This will update other packages and will generate migrations.json: + +```bash +nx migrate 9.0.0 +``` + +Update @nrwl/workspace and generate the list of migrations starting with version 8.0.0 of @nrwl/workspace and @nrwl/node, regardless of what installed locally: + +```bash +nx migrate @nrwl/workspace@9.0.0 --from="@nrwl/workspace@8.0.0,@nrwl/node@8.0.0" +``` + +Update @nrwl/workspace to "9.0.0". If it tries to update @nrwl/react or @nrwl/angular, use version "9.0.1": + +```bash +nx migrate @nrwl/workspace@9.0.0 --to="@nrwl/react@9.0.1,@nrwl/angular@9.0.1" +``` + +Update another-package to "12.0.0". This will update other packages and will generate migrations.json file: + +```bash +nx migrate another-package@12.0.0 +``` + +Run migrations from the migrations.json file. You can modify migrations.json and run this command many times: + +```bash +nx migrate --run-migrations=migrations.json +``` + +## Options + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/cli/print-affected.md b/docs/default/cli/print-affected.md new file mode 100644 index 0000000000..d480fc4d43 --- /dev/null +++ b/docs/default/cli/print-affected.md @@ -0,0 +1,116 @@ +--- +title: 'print-affected - CLI command' +description: 'Prints information about the projects and targets affected by changes' +--- + +# print-affected + +Prints information about the projects and targets affected by changes + +## Usage + +```bash +nx print-affected +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Print information about affected projects and the dependency graph: + +```bash +nx print-affected +``` + +Print information about the projects affected by the changes between main and HEAD (e.g,. PR): + +```bash +nx print-affected --base=main --head=HEAD +``` + +Prints information about the affected projects and a list of tasks to test them: + +```bash +nx print-affected --target=test +``` + +Prints the projects property from the print-affected output: + +```bash +nx print-affected --target=build --select=projects +``` + +Prints the tasks.target.project property from the print-affected output: + +```bash +nx print-affected --target=build --select=tasks.target.project +``` + +## Options + +### all + +All projects + +### base + +Base of the current branch (usually main) + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### files + +Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas + +### head + +Latest commit of the current branch (usually HEAD) + +### help + +Show help + +### only-failed + +Default: `false` + +Isolate projects which previously failed + +### runner + +This is the name of the tasks runner configured in nx.json + +### select + +Select the subset of the returned json document (e.g., --selected=projects) + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### uncommitted + +Uncommitted changes + +### untracked + +Untracked changes + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number diff --git a/docs/default/cli/report.md b/docs/default/cli/report.md new file mode 100644 index 0000000000..ed66e158d1 --- /dev/null +++ b/docs/default/cli/report.md @@ -0,0 +1,26 @@ +--- +title: 'report - CLI command' +description: 'Reports useful version numbers to copy into the Nx issue template' +--- + +# report + +Reports useful version numbers to copy into the Nx issue template + +## Usage + +```bash +nx report +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/cli/reset.md b/docs/default/cli/reset.md new file mode 100644 index 0000000000..a81c0d4c4e --- /dev/null +++ b/docs/default/cli/reset.md @@ -0,0 +1,16 @@ +--- +title: 'reset - CLI command' +description: 'Clears all the cached Nx artifacts and metadata about the workspace and shuts down the Nx Daemon.' +--- + +# reset + +Clears all the cached Nx artifacts and metadata about the workspace and shuts down the Nx Daemon. + +## Usage + +```bash +nx reset +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. diff --git a/docs/default/cli/run-many.md b/docs/default/cli/run-many.md new file mode 100644 index 0000000000..85a37a222f --- /dev/null +++ b/docs/default/cli/run-many.md @@ -0,0 +1,100 @@ +--- +title: 'run-many - CLI command' +description: 'Run target for multiple listed projects' +--- + +# run-many + +Run target for multiple listed projects + +## Usage + +```bash +nx run-many +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Test all projects: + +```bash +nx run-many --target=test --all +``` + +Test proj1 and proj2: + +```bash +nx run-many --target=test --projects=proj1,proj2 +``` + +Test proj1 and proj2 in parallel: + +```bash +nx run-many --target=test --projects=proj1,proj2 --parallel=2 +``` + +## Options + +### all + +Run the target on all projects in the workspace + +### configuration + +This is the configuration to use when performing tasks on projects + +### exclude + +Default: `` + +Exclude certain projects from being processed + +### help + +Show help + +### only-failed + +Default: `false` + +Only run the target on projects which previously failed + +### parallel + +Max number of parallel processes [default is 3] + +### projects + +Projects to run (comma delimited) + +### runner + +Override the tasks runner in `nx.json` + +### skip-nx-cache + +Default: `false` + +Rerun the tasks even when the results are available in the cache + +### target + +Task to run for affected projects + +### verbose + +Print additional error stack trace on failure + +### version + +Show version number + +### ~~with-deps~~ + +Default: `false` + +**Deprecated:** Configure target dependencies instead. It will be removed in v14. + +Include dependencies of specified projects when computing what to run diff --git a/docs/default/cli/run.md b/docs/default/cli/run.md new file mode 100644 index 0000000000..91a720d5d6 --- /dev/null +++ b/docs/default/cli/run.md @@ -0,0 +1,44 @@ +--- +title: 'run - CLI command' +description: 'Runs an Architect target with an optional custom builder configuration defined in your project.' +--- + +# run + +Runs an Architect target with an optional custom builder configuration defined in your project. + +## Usage + +```bash +nx run [options] +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run the `build` target for the `myapp` : + +```bash +nx run myapp:build +``` + +Run the `build` target for the `myapp` project with a `production` configuration: + +```bash +nx run myapp:build:production +``` + +## Options + +### configuration (-c) + +A named builder configuration, defined in the "configurations" section of the workspace configuration file. The builder uses the named configuration to run the given target. + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/cli/serve.md b/docs/default/cli/serve.md new file mode 100644 index 0000000000..9eb3e6cec3 --- /dev/null +++ b/docs/default/cli/serve.md @@ -0,0 +1,204 @@ +--- +title: 'serve - CLI command' +description: 'Builds and serves an application, rebuilding on file changes.' +--- + +# serve + +Builds and serves an application, rebuilding on file changes. + +## Usage + +The `serve` command is a built-in alias to the [run command](/{{framework}}/cli/run). + +These two commands are equivalent: + +```bash +nx serve [options] +``` + +```bash +nx run :serve [options] +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Serve the `myapp` project: + +```bash +nx serve myapp +``` + +## Common Options + +The options below are common to the `serve` command used within an Nx workspace. The Web and Angular-specific serve options are listed after these options. + +### allowedHosts + +This option allows you to whitelist services that are allowed to access the dev server. + +### hmr + +Enable hot module replacement. + +### host + +Host to listen on. + +Default: `localhost` + +### liveReload + +Whether to reload the page on change, using live-reload. + +Default: `true` + +### open (-o) + +Open the application in the browser. + +### port + +Port to listen on. + +Default: `4200` + +### publicHost + +Public URL where the application will be served + +### ssl + +Serve using HTTPS. + +### sslKey + +SSL key to use for serving HTTPS. + +### sslCert + +SSL certificate to use for serving HTTPS. + +### watch + +Watches for changes and rebuilds application + +Default: `true` + +### help + +Show help + +### version + +Show version number + +## Web-Serve Options + +### buildTarget + +Target which builds the application + +### memoryLimit + +Memory limit for type checking service process in MB. + +### maxWorkers + +Number of workers to use for type checking. + +## Angular-Serve Options + +### aot + +Build using Ahead of Time compilation. + +### base-href + +Base url for the application being built. + +### browser-target + +Target to serve. + +### build-event-log + +**EXPERIMENTAL** Output file path for Build Event Protocol events. + +### common-chunk + +Use a separate bundle containing code used across multiple bundles. + +### configuration (-c) + +A named build target, as specified in the "configurations" section of the workspace configuration. +Each named target is accompanied by a configuration of option defaults for that target. +Setting this explicitly overrides the `--prod` flag + +### deploy-url + +URL where files will be deployed. + +### disable-host-check + +Don't verify connected clients are part of allowed hosts. + +### eval-source-map + +Output in-file eval sourcemaps. + +### hmr-warning + +Show a warning when the `--hmr` option is enabled. + +### optimization + +Enables optimization of the build output. + +### poll + +Enable and define the file watching poll time period in milliseconds. + +### prod + +Shorthand for `--configuration=production`. +When true, sets the build configuration to the production target. +By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination. + +### progress + +Log progress to the console while building. + +### proxy-config + +Proxy configuration file. + +### public-host + +The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies. + +### serve-path + +The pathname where the app will be served. + +### serve-path-default-warning + +Show a warning when deploy-url/base-href use unsupported serve path values. + +### source-map + +Output sourcemaps. + +### vendor-chunk + +Use a separate bundle containing only vendor libraries. + +### vendor-source-map + +Resolve vendor packages sourcemaps. + +### verbose + +Adds more details to output logging. diff --git a/docs/default/cli/test.md b/docs/default/cli/test.md new file mode 100644 index 0000000000..3c1483a640 --- /dev/null +++ b/docs/default/cli/test.md @@ -0,0 +1,263 @@ +--- +title: 'test - CLI command' +description: 'Runs unit tests in a project using the configured unit test runner.' +--- + +# test + +Runs unit tests in a project using the configured unit test runner. + +## Usage + +The `test` command is a built-in alias to the [run command](/{{framework}}/cli/run). + +These two commands are equivalent: + +```bash +nx test [options] +``` + +```bash +nx run :test [options] +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +### Examples + +Run unit tests: + +```bash +nx test myapp +``` + +## Common Options + +The options below are common to the `test` command used within an Nx workspace. The Jest and Karma-specific test options are listed after these options. + +### codeCoverage + +Indicates that test coverage information should be collected and reported in the output. (https://jestjs.io/docs/en/cli#coverage) + +### tsConfig + +The path to the Typescript configuration file. + +### watch + +Watch files for changes and rerun tests. + +### help + +Show help information. + +### version + +Show version number + +## Jest Options + +### bail + +Exit the test suite immediately after `n` number of failing tests. (https://jestjs.io/docs/en/cli#bail) + +### ci + +Whether to run Jest in continuous integration (CI) mode. This option is on by default in most popular CI environments. It will prevent snapshots from being written unless explicitly requested. (https://jestjs.io/docs/en/cli#ci) + +### color + +Forces test results output color highlighting (even if stdout is not a TTY). Set to false if you would like to have no colors. (https://jestjs.io/docs/en/cli#colors) + +### colors + +Forces test results output highlighting even if stdout is not a TTY. (https://jestjs.io/docs/en/cli#colors) + +### coverageReporters + +A list of reporter names that Jest uses when writing coverage reports. Any istanbul reporter + +### coverageDirectory + +An array of regexp pattern strings that are matched against all file paths before executing the test. If the file path matches any of the patterns, coverage information will be skipped. + +### config + +The path to a Jest config file specifying how to find and execute tests. If no rootDir is set in the config, the directory containing the config file is assumed to be the rootDir for the project. This can also be a JSON-encoded value which Jest will use as configuration + +### clearCache + +Deletes the Jest cache directory and then exits without running tests. Will delete Jest's default cache directory. _Note: clearing the cache will reduce performance_. + +### findRelatedTests + +Find and run the tests that cover a comma separated list of source files that were passed in as arguments. (https://jestjs.io/docs/en/cli#findrelatedtests-spaceseparatedlistofsourcefiles) + +### jestConfig + +The path of the Jest configuration. (https://jestjs.io/docs/en/configuration) + +### json + +Prints the test results in JSON. This mode will send all other test output and user messages to stderr. (https://jestjs.io/docs/en/cli#json) + +### maxWorkers + +Specifies the maximum number of workers the worker-pool will spawn for running tests. This defaults to the number of the cores available on your machine. Useful for CI. (its usually best not to override this default) (https://jestjs.io/docs/en/cli#maxworkers-num) + +### onlyChanged + +Attempts to identify which tests to run based on which files have changed in the current repository. Only works if you're running tests in a git or hg repository at the moment. (https://jestjs.io/docs/en/cli#onlychanged) + +### outputFile + +Write test results to a file when the --json option is also specified. (https://jestjs.io/docs/en/cli#outputfile-filename) + +### passWithNoTests + +Will not fail if no tests are found (for example while using `--testPathPattern`.) (https://jestjs.io/docs/en/cli#passwithnotests) + +### reporters + +Run tests with specified reporters. Reporter options are not available via CLI. Example with multiple reporters: jest --reporters="default" --reporters="jest-junit" (https://jestjs.io/docs/en/cli#reporters) + +### runInBand + +Run all tests serially in the current process (rather than creating a worker pool of child processes that run tests). This is sometimes useful for debugging, but such use cases are pretty rare. Useful for CI. (https://jestjs.io/docs/en/cli#runinband) + +### setupFile + +The name of a setup file used by Jest. (https://jestjs.io/docs/en/configuration#setupfilesafterenv-array) + +### silent + +Prevent tests from printing messages through the console. (https://jestjs.io/docs/en/cli#silent) + +### testFile + +The name of the file to test. + +### testNamePattern + +Run only tests with a name that matches the regex pattern. (https://jestjs.io/docs/en/cli#testnamepattern-regex) + +### testPathPattern + +An array of regexp pattern strings that is matched against all tests paths before executing the test. (https://jestjs.io/docs/en/cli#testpathpattern-regex) + +### testLocationInResults + +Adds a location field to test results. Used to report location of a test in a reporter. { "column": 4, "line": 5 } (https://jestjs.io/docs/en/cli#testlocationinresults) + +### testResultsProcessor + +Node module that implements a custom results processor. (https://jestjs.io/docs/en/configuration#testresultsprocessor-string) + +### updateSnapshot + +Use this flag to re-record snapshots. Can be used together with a test suite pattern or with `--testNamePattern` to re-record snapshot for test matching the pattern. (https://jestjs.io/docs/en/cli#updatesnapshot) + +### useStderr + +Divert all output to stderr. + +### verbose + +Display individual test results with the test suite hierarchy. (https://jestjs.io/docs/en/cli#verbose) + +### watchAll + +Watch files for changes and rerun all tests when something changes. If you want to re-run only the tests that depend on the changed files, use the `--watch` option. (https://jestjs.io/docs/en/cli#watchall) + +## Karma Options + +### browsers + +Override which browsers tests are run against. + +### codeCoverage + +Output a code coverage report. + +### codeCoverageExclude + +Globs to exclude from code coverage. + +### configuration (-c) + +A named build target, as specified in the "configurations" section of angular.json. +Each named target is accompanied by a configuration of option defaults for that target. +Setting this explicitly overrides the `--prod` flag. + +### environment + +Defines the build environment. + +### evalSourceMap + +Output in-file eval sourcemaps. + +### help + +Shows a help message for this command in the console. + +### include + +Globs of files to include, relative to workspace or project root. + +There are 2 special cases: + +- when a path to directory is provided, all spec files ending ".spec.@(ts|tsx)" will be included +- when a path to a file is provided, and a matching spec file exists it will be included instead + +### karmaConfig + +The name of the Karma configuration file. + +### main + +The name of the main entry-point file. + +### poll + +Enable and define the file watching poll time period in milliseconds. + +### polyfills + +The name of the polyfills file. + +### preserveSymlinks + +Do not use the real path when resolving modules. + +### prod + +Shorthand for "--configuration=production". When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination. + +### progress + +Log progress to the console while building. + +### reporters + +Karma reporters to use. Directly passed to the karma runner. + +### sourceMap + +Output sourcemaps. + +### tsConfig + +The name of the TypeScript configuration file. + +### vendorSourceMap + +Resolve vendor packages sourcemaps. + +### watch + +Run build when files change. + +### webWorkerTsConfig + +TypeScript configuration for Web Worker modules. diff --git a/docs/default/cli/workspace-generator.md b/docs/default/cli/workspace-generator.md new file mode 100644 index 0000000000..c9915c1a76 --- /dev/null +++ b/docs/default/cli/workspace-generator.md @@ -0,0 +1,34 @@ +--- +title: 'workspace-generator - CLI command' +description: 'Runs a workspace generator from the tools/generators directory' +--- + +# workspace-generator + +Runs a workspace generator from the tools/generators directory + +## Usage + +```bash +nx workspace-generator +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### help + +Show help + +### list-generators + +List the available workspace-generators + +### name + +The name of your generator` + +### version + +Show version number diff --git a/docs/default/cli/workspace-lint.md b/docs/default/cli/workspace-lint.md new file mode 100644 index 0000000000..193bf2a76b --- /dev/null +++ b/docs/default/cli/workspace-lint.md @@ -0,0 +1,26 @@ +--- +title: 'workspace-lint - CLI command' +description: 'Lint workspace or list of files. Note: To exclude files from this lint rule, you can add them to the `.nxignore` file' +--- + +# workspace-lint + +Lint workspace or list of files. Note: To exclude files from this lint rule, you can add them to the `.nxignore` file + +## Usage + +```bash +nx workspace-lint +``` + +[Install `nx` globally]({{framework}}/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`. + +## Options + +### help + +Show help + +### version + +Show version number diff --git a/docs/default/executors.json b/docs/default/executors.json new file mode 100644 index 0000000000..cb26dd84b8 --- /dev/null +++ b/docs/default/executors.json @@ -0,0 +1,16 @@ +[ + "angular", + "cypress", + "detox", + "gatsby", + "jest", + "js", + "linter", + "next", + "node", + "nx-plugin", + "react-native", + "storybook", + "web", + "workspace" +] diff --git a/docs/default/generators.json b/docs/default/generators.json new file mode 100644 index 0000000000..4bc621d6ae --- /dev/null +++ b/docs/default/generators.json @@ -0,0 +1,19 @@ +[ + "angular", + "cypress", + "detox", + "express", + "gatsby", + "jest", + "js", + "linter", + "nest", + "next", + "node", + "nx-plugin", + "react", + "react-native", + "storybook", + "web", + "workspace" +] diff --git a/docs/map.json b/docs/map.json index b3e27ca589..47b3f55dd3 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1,4 +1,1570 @@ [ + { + "name": "default", + "id": "default", + "itemList": [ + { + "name": "Getting Started", + "id": "getting-started", + "itemList": [ + { + "name": "Intro to Nx", + "id": "intro", + "file": "shared/getting-started/intro" + }, + { + "name": "Nx Setup", + "id": "nx-setup", + "file": "shared/getting-started/nx-setup" + }, + { + "name": "Nx Without Plugins", + "id": "nx-core", + "file": "shared/nx-core" + }, + { + "name": "Nx and TypeScript", + "id": "nx-and-typescript", + "file": "shared/guides/nx-and-ts" + }, + { + "name": "Nx Plugins and Devkit", + "id": "nx-devkit", + "file": "shared/devkit-and-nx-plugins" + }, + { + "name": "Nx and React", + "id": "nx-and-react", + "file": "shared/getting-started/nx-and-react" + }, + { + "name": "Nx and Angular", + "id": "nx-and-angular", + "file": "shared/getting-started/nx-and-angular" + } + ] + }, + { + "name": "Configuration", + "id": "configuration", + "itemList": [ + { + "name": "package.json and nx.json", + "id": "packagejson", + "file": "shared/configuration/packagejson" + }, + { + "name": "project.json and nx.json", + "id": "projectjson", + "file": "shared/configuration/projectjson" + }, + { + "name": "angular.json and nx.json", + "id": "angularjson", + "file": "shared/configuration/angularjson" + } + ] + }, + { + "name": "Using Nx", + "id": "using-nx", + "itemList": [ + { + "name": "Nx CLI", + "id": "nx-cli", + "file": "shared/using-nx/nx-cli" + }, + { + "name": "Nx Editor Plugins", + "id": "console", + "file": "shared/console" + }, + { + "name": "Mental Model", + "id": "mental-model", + "file": "shared/mental-model" + }, + { + "name": "Computation Caching", + "id": "caching", + "file": "shared/using-nx/caching" + }, + { + "name": "Distributed Task Execution", + "id": "dte", + "file": "shared/using-nx/dte" + }, + { + "name": "Affected", + "id": "affected", + "file": "shared/using-nx/affected" + }, + { + "name": "CI Setup", + "id": "ci-overview", + "file": "shared/ci-overview" + }, + { + "name": "Updating Nx", + "id": "updating-nx", + "file": "shared/update" + } + ] + }, + { + "name": "Migration", + "id": "migration", + "itemList": [ + { + "name": "From CRA", + "id": "migration-cra", + "file": "shared/migration/migration-cra" + }, + { + "name": "Lerna/Yarn/PNPM", + "id": "adding-to-monorepo", + "file": "shared/migration/adding-to-monorepo" + }, + { + "name": "From Angular CLI", + "id": "migration-angular", + "file": "shared/migration/migration-angular" + }, + { + "name": "From AngularJS", + "id": "migration-angularjs", + "file": "shared/migration/migration-angularjs" + }, + { + "name": "Preserving Git Histories", + "id": "preserving-git-histories", + "file": "shared/migration/preserving-git-histories" + }, + { + "name": "Manual migration", + "id": "manual", + "file": "shared/migration/manual" + } + ] + }, + { + "name": "React Tutorial", + "id": "react-tutorial", + "itemList": [ + { + "name": "1 - Create Application", + "id": "01-create-application", + "file": "shared/react-tutorial/01-create-application" + }, + { + "name": "2 - Add E2E Test", + "id": "02-add-e2e-test", + "file": "shared/react-tutorial/02-add-e2e-test" + }, + { + "name": "3 - Display Todos", + "id": "03-display-todos", + "file": "shared/react-tutorial/03-display-todos" + }, + { + "name": "4 - Connect to API", + "id": "04-connect-to-api", + "file": "shared/react-tutorial/04-connect-to-api" + }, + { + "name": "5 - Add Node Application", + "id": "05-add-node-app", + "file": "shared/react-tutorial/05-add-node-app" + }, + { + "name": "6 - Proxy Configuration", + "id": "06-proxy", + "file": "shared/react-tutorial/06-proxy" + }, + { + "name": "7 - Share Code", + "id": "07-share-code", + "file": "shared/react-tutorial/07-share-code" + }, + { + "name": "8 - Create Libraries", + "id": "08-create-libs", + "file": "shared/react-tutorial/08-create-libs" + }, + { + "name": "9 - Dep Graph", + "id": "09-dep-graph", + "file": "shared/react-tutorial/09-dep-graph" + }, + { + "name": "10 - Use Computation Caching", + "id": "10-computation-caching", + "file": "shared/react-tutorial/10-computation-caching" + }, + { + "name": "11 - Test Affected Projects", + "id": "11-test-affected-projects", + "file": "shared/react-tutorial/11-test-affected-projects" + }, + { + "name": "12 - Summary", + "id": "12-summary", + "file": "shared/react-tutorial/12-summary" + } + ] + }, + { + "name": "Angular Tutorial", + "id": "angular-tutorial", + "itemList": [ + { + "name": "1 - Create Application", + "id": "01-create-application", + "file": "shared/angular-tutorial/01-create-application" + }, + { + "name": "2 - Add E2E Test", + "id": "02-add-e2e-test", + "file": "shared/angular-tutorial/02-add-e2e-test" + }, + { + "name": "3 - Display Todos", + "id": "03-display-todos", + "file": "shared/angular-tutorial/03-display-todos" + }, + { + "name": "4 - Connect to API", + "id": "04-connect-to-api", + "file": "shared/angular-tutorial/04-connect-to-api" + }, + { + "name": "5 - Add Node Application", + "id": "05-add-node-app", + "file": "shared/angular-tutorial/05-add-node-app" + }, + { + "name": "6 - Proxy Configuration", + "id": "06-proxy", + "file": "shared/angular-tutorial/06-proxy" + }, + { + "name": "7 - Share Code", + "id": "07-share-code", + "file": "shared/angular-tutorial/07-share-code" + }, + { + "name": "8 - Create Libraries", + "id": "08-create-libs", + "file": "shared/angular-tutorial/08-create-libs" + }, + { + "name": "9 - Dep Graph", + "id": "09-dep-graph", + "file": "shared/angular-tutorial/09-dep-graph" + }, + { + "name": "10 - Use Computation Caching", + "id": "10-computation-caching", + "file": "shared/angular-tutorial/10-computation-caching" + }, + { + "name": "11 - Test Affected Projects", + "id": "11-test-affected-projects", + "file": "shared/angular-tutorial/11-test-affected-projects" + }, + { + "name": "12 - Summary", + "id": "12-summary", + "file": "shared/angular-tutorial/12-summary" + } + ] + }, + { + "name": "Node Tutorial", + "id": "node-tutorial", + "itemList": [ + { + "name": "1 - Create Application", + "id": "01-create-application", + "file": "shared/node-tutorial/01-create-application" + }, + { + "name": "2 - Display Todos", + "id": "02-display-todos", + "file": "shared/node-tutorial/02-display-todos" + }, + { + "name": "3 - Share Code", + "id": "03-share-code", + "file": "shared/node-tutorial/03-share-code" + }, + { + "name": "4 - Create Libraries", + "id": "04-create-libs", + "file": "shared/node-tutorial/04-create-libs" + }, + { + "name": "5 - Dep Graph", + "id": "05-dep-graph", + "file": "shared/node-tutorial/05-dep-graph" + }, + { + "name": "6 - Use Computation Caching", + "id": "06-computation-caching", + "file": "shared/node-tutorial/06-computation-caching" + }, + { + "name": "7 - Test Affected Projects", + "id": "07-test-affected-projects", + "file": "shared/node-tutorial/07-test-affected-projects" + }, + { + "name": "8 - Summary", + "id": "08-summary", + "file": "shared/node-tutorial/08-summary" + } + ] + }, + + { + "name": "CLI", + "id": "cli", + "itemList": [ + { + "name": "generate", + "id": "generate", + "file": "default/cli/generate" + }, + { + "name": "serve", + "id": "serve", + "file": "default/cli/serve" + }, + { + "name": "build", + "id": "build", + "file": "default/cli/build" + }, + { + "name": "test", + "id": "test", + "file": "default/cli/test" + }, + { + "name": "lint", + "id": "lint", + "file": "default/cli/lint" + }, + { + "name": "e2e", + "id": "e2e", + "file": "default/cli/e2e" + }, + { + "name": "run", + "id": "run", + "file": "default/cli/run" + }, + { + "name": "daemon", + "id": "daemon", + "file": "default/cli/daemon" + }, + { + "name": "dep-graph", + "id": "dep-graph", + "file": "default/cli/dep-graph" + }, + { + "name": "run-many", + "id": "run-many", + "file": "default/cli/run-many" + }, + { + "name": "affected", + "id": "affected", + "file": "default/cli/affected" + }, + { + "name": "affected:build", + "id": "affected-build", + "file": "default/cli/affected-build" + }, + { + "name": "affected:test", + "id": "affected-test", + "file": "default/cli/affected-test" + }, + { + "name": "affected:lint", + "id": "affected-lint", + "file": "default/cli/affected-lint" + }, + { + "name": "affected:e2e", + "id": "affected-e2e", + "file": "default/cli/affected-e2e" + }, + { + "name": "affected:dep-graph", + "id": "affected-dep-graph", + "file": "default/cli/affected-dep-graph" + }, + { + "name": "affected:apps", + "id": "affected-apps", + "file": "default/cli/affected-apps" + }, + { + "name": "affected:libs", + "id": "affected-libs", + "file": "default/cli/affected-libs" + }, + { + "name": "print-affected", + "id": "print-affected", + "file": "default/cli/print-affected" + }, + { + "name": "format:check", + "id": "format-check", + "file": "default/cli/format-check" + }, + { + "name": "format:write", + "id": "format-write", + "file": "default/cli/format-write" + }, + { + "name": "migrate", + "id": "migrate", + "file": "default/cli/migrate" + }, + { + "name": "report", + "id": "report", + "file": "default/cli/report" + }, + { + "name": "list", + "id": "list", + "file": "default/cli/list" + }, + { + "name": "workspace-lint", + "id": "workspace-lint", + "file": "default/cli/workspace-lint" + }, + { + "name": "workspace-generator", + "id": "workspace-generator", + "file": "default/cli/workspace-generator" + }, + { + "name": "connect-to-nx-cloud", + "id": "connect-to-nx-cloud", + "file": "default/cli/connect-to-nx-cloud" + }, + { + "name": "reset", + "id": "reset", + "file": "default/cli/reset" + } + ] + }, + { + "name": "Workspace", + "id": "workspace", + "itemList": [ + { + "id": "nrwl-workspace-overview", + "name": "Overview", + "searchResultsName": "@nrwl/workspace Overview", + "file": "shared/workspace-plugin" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-workspace/generators/library" + }, + { + "name": "npm-package generator", + "id": "npm-package", + "file": "default/api-workspace/generators/npm-package" + }, + { + "name": "move generator", + "id": "move", + "file": "default/api-workspace/generators/move" + }, + { + "name": "remove generator", + "id": "remove", + "file": "default/api-workspace/generators/remove" + }, + { + "name": "run-commands generator", + "id": "run-commands-generator", + "file": "default/api-workspace/generators/run-commands" + }, + { + "name": "workspace-generator generator", + "id": "workspace-generator", + "file": "default/api-workspace/generators/workspace-generator" + }, + { + "name": "convert-to-nx-project generator", + "id": "convert-to-nx-project-generator", + "file": "default/api-workspace/generators/convert-to-nx-project" + }, + { + "name": "run-commands executor", + "id": "run-commands-executor", + "file": "default/api-workspace/executors/run-commands" + }, + { + "name": "run-script executor", + "id": "run-script", + "file": "default/api-workspace/executors/run-script" + } + ] + }, + { + "name": "js", + "id": "js", + "itemList": [ + { + "name": "application generator", + "id": "application", + "file": "default/api-js/generators/application" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-js/generators/library" + }, + { + "name": "convert-to-swc generator", + "id": "library", + "file": "default/api-js/generators/convert-to-swc" + }, + { + "name": "node executor", + "id": "node", + "file": "default/api-js/executors/node" + }, + { + "name": "tsc executor", + "id": "tsc", + "file": "default/api-js/executors/tsc" + }, + { + "name": "swc executor", + "id": "swc", + "file": "default/api-js/executors/swc" + } + ] + }, + { + "name": "web", + "id": "web", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/web Overview", + "file": "shared/web-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-web/generators/application" + }, + { + "name": "build executor", + "id": "build", + "file": "default/api-web/executors/webpack" + }, + { + "name": "dev-server executor", + "id": "dev-server", + "file": "default/api-web/executors/dev-server" + }, + { + "name": "file-server executor", + "id": "file-server", + "file": "default/api-web/executors/file-server" + }, + { + "name": "package executor", + "id": "package", + "file": "default/api-web/executors/rollup" + } + ] + }, + { + "name": "angular", + "id": "angular", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/angular Overview", + "file": "shared/angular-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-angular/generators/application" + }, + { + "name": "convert-tslint-to-eslint", + "id": "convert-tslint-to-eslint", + "file": "default/api-angular/generators/convert-tslint-to-eslint" + }, + { + "name": "downgrade-module generator", + "id": "downgrade-module", + "file": "default/api-angular/generators/downgrade-module" + }, + { + "name": "karma generator", + "id": "karma", + "file": "default/api-angular/generators/karma" + }, + { + "name": "karma-project generator", + "id": "karma-project", + "file": "default/api-angular/generators/karma-project" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-angular/generators/library" + }, + { + "name": "library-secondary-entry-point generator", + "id": "library", + "file": "default/api-angular/generators/library-secondary-entry-point" + }, + { + "name": "move generator", + "id": "move", + "file": "default/api-angular/generators/move" + }, + { + "name": "ngrx generator", + "id": "ngrx", + "file": "default/api-angular/generators/ngrx" + }, + { + "name": "scam generator", + "id": "scam", + "file": "default/api-angular/generators/scam" + }, + { + "name": "scam-directive generator", + "id": "scam-directive", + "file": "default/api-angular/generators/scam-directive" + }, + { + "name": "scam-pipe generator", + "id": "scam-pipe", + "file": "default/api-angular/generators/scam-pipe" + }, + { + "name": "setup-mfe generator", + "id": "setup-mfe", + "file": "default/api-angular/generators/setup-mfe" + }, + { + "name": "setup-tailwind generator", + "id": "setup-tailwind", + "file": "default/api-angular/generators/setup-tailwind" + }, + { + "name": "stories generator", + "id": "stories", + "file": "default/api-angular/generators/stories" + }, + { + "name": "storybook-configuration generator", + "id": "storybook-configuration", + "file": "default/api-angular/generators/storybook-configuration" + }, + { + "name": "storybook-migrate-defaults-5-to-6 generator", + "id": "storybook-migrate-defaults-5-to-6", + "file": "default/api-angular/generators/storybook-migrate-defaults-5-to-6" + }, + { + "name": "storybook-migrate-stories-to-6-2 generator", + "id": "storybook-migrate-stories-to-6-2", + "file": "default/api-angular/generators/storybook-migrate-stories-to-6-2" + }, + { + "name": "upgrade-module generator", + "id": "upgrade-module", + "file": "default/api-angular/generators/upgrade-module" + }, + { + "name": "web-worker generator", + "id": "web-worker", + "file": "default/api-angular/generators/web-worker" + }, + { + "name": "delegate-build executor", + "id": "delegate-build", + "file": "default/api-angular/executors/delegate-build" + }, + { + "name": "ng packagr lite executor", + "id": "ng-packagr-lite", + "file": "default/api-angular/executors/ng-packagr-lite" + }, + { + "name": "package executor", + "id": "package", + "file": "default/api-angular/executors/package" + }, + { + "name": "webpack-browser executor", + "id": "webpack-browser", + "file": "default/api-angular/executors/webpack-browser" + }, + { + "name": "webpack-server executor", + "id": "webpack-server", + "file": "default/api-angular/executors/webpack-server" + } + ] + }, + { + "name": "react", + "id": "react", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/react Overview", + "file": "shared/react-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-react/generators/application" + }, + { + "name": "component generator", + "id": "component", + "file": "default/api-react/generators/component" + }, + { + "name": "component-cypress-spec generator", + "id": "component-cypress-spec", + "file": "default/api-react/generators/component-cypress-spec" + }, + { + "name": "component-story generator", + "id": "component-story", + "file": "default/api-react/generators/component-story" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-react/generators/library" + }, + { + "name": "redux generator", + "id": "redux", + "file": "default/api-react/generators/redux" + }, + { + "name": "stories generator", + "id": "stories", + "file": "default/api-react/generators/stories" + }, + { + "name": "storybook-configuration generator", + "id": "storybook-configuration", + "file": "default/api-react/generators/storybook-configuration" + }, + { + "name": "storybook-migrate-defaults-5-to-6 generator", + "id": "storybook-migrate-defaults-5-to-6", + "file": "default/api-react/generators/storybook-migrate-defaults-5-to-6" + }, + { + "name": "hook generator", + "id": "hook", + "file": "default/api-react/generators/hook" + } + ] + }, + { + "name": "jest", + "id": "jest", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/jest Overview", + "file": "shared/jest-plugin" + }, + { + "name": "jest executor", + "id": "jest", + "file": "default/api-jest/executors/jest" + } + ] + }, + { + "name": "cypress", + "id": "cypress", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/cypress Overview", + "file": "shared/cypress-plugin" + }, + { + "name": "cypress executor", + "id": "cypress", + "file": "default/api-cypress/executors/cypress" + }, + { + "name": "cypress-project generator", + "id": "cypress-project", + "file": "default/api-cypress/generators/cypress-project" + } + ] + }, + { + "name": "storybook", + "id": "storybook", + "itemList": [ + { + "id": "overview-react", + "name": "Overview (React)", + "searchResultsName": "@nrwl/storybook Overview (React)", + "file": "shared/guides/storybook/plugin-react" + }, + { + "id": "overview-angular", + "name": "Overview (Angular)", + "searchResultsName": "@nrwl/storybook Overview (Angular)", + "file": "shared/guides/storybook/plugin-angular" + }, + { + "id": "migrate-webpack-final-react", + "name": "Migrate to the Nrwl React Storybook Preset", + "file": "shared/guides/storybook/migrate-webpack-final-react" + }, + { + "id": "migrate-webpack-final-angular", + "name": "Migrate to the Nrwl Angular Storybook Preset", + "file": "shared/guides/storybook/migrate-webpack-final-angular" + }, + { + "id": "upgrade-storybook-v6-react", + "name": "Upgrading to Storybook 6 (React)", + "file": "shared/guides/storybook/storybook-v6-react" + }, + { + "id": "upgrade-storybook-v6-angular", + "name": "Upgrading to Storybook 6 (Angular)", + "file": "shared/guides/storybook/storybook-v6-angular" + }, + { + "name": "configuration generator", + "id": "configuration", + "file": "default/api-storybook/generators/configuration" + }, + { + "name": "cypress-project generator", + "id": "cypress-project", + "file": "default/api-storybook/generators/cypress-project" + }, + { + "name": "migrate-defaults-5-to-6 generator", + "id": "migrate-defaults-5-to-6", + "file": "default/api-storybook/generators/migrate-defaults-5-to-6" + }, + { + "name": "migrate-stories-to-6-2 generator", + "id": "migrate-stories-to-6-2", + "file": "default/api-storybook/generators/migrate-stories-to-6-2" + }, + { + "id": "executors", + "name": "Executors / Builders", + "itemList": [ + { + "name": "build", + "id": "build", + "file": "default/api-storybook/executors/build" + }, + { + "name": "storybook", + "id": "storybook", + "file": "default/api-storybook/executors/storybook" + } + ] + } + ] + }, + { + "name": "linter", + "id": "linter", + "itemList": [ + { + "name": "eslint executor", + "id": "eslint", + "file": "default/api-linter/executors/eslint" + }, + { + "name": "lint executor", + "id": "lint", + "file": "default/api-linter/executors/lint" + }, + { + "name": "workspace-rule generator", + "id": "workspace-rule", + "file": "default/api-linter/generators/workspace-rule" + } + ] + }, + { + "name": "node", + "id": "node", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/node Overview", + "file": "shared/node-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-node/generators/application" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-node/generators/library" + }, + { + "name": "build executor", + "id": "build", + "file": "default/api-node/executors/build" + }, + { + "name": "execute executor", + "id": "execute", + "file": "default/api-node/executors/execute" + }, + { + "name": "package executor", + "id": "package", + "file": "default/api-node/executors/package" + } + ] + }, + { + "name": "express", + "id": "express", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/express Overview", + "file": "shared/express-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-express/generators/application" + } + ] + }, + { + "name": "nest", + "id": "nest", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/nest Overview", + "file": "shared/nest-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-nest/generators/application" + }, + { + "name": "class generator", + "id": "class", + "file": "default/api-nest/generators/class" + }, + { + "name": "controller generator", + "id": "controller", + "file": "default/api-nest/generators/controller" + }, + { + "name": "decorator generator", + "id": "decorator", + "file": "default/api-nest/generators/decorator" + }, + { + "name": "filter generator", + "id": "filter", + "file": "default/api-nest/generators/filter" + }, + { + "name": "gateway generator", + "id": "gateway", + "file": "default/api-nest/generators/gateway" + }, + { + "name": "guard generator", + "id": "guard", + "file": "default/api-nest/generators/guard" + }, + { + "name": "interceptor generator", + "id": "interceptor", + "file": "default/api-nest/generators/interceptor" + }, + { + "name": "interface generator", + "id": "interface", + "file": "default/api-nest/generators/interface" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-nest/generators/library" + }, + { + "name": "middleware generator", + "id": "middleware", + "file": "default/api-nest/generators/middleware" + }, + { + "name": "module generator", + "id": "module", + "file": "default/api-nest/generators/module" + }, + { + "name": "pipe generator", + "id": "pipe", + "file": "default/api-nest/generators/pipe" + }, + { + "name": "provider generator", + "id": "provider", + "file": "default/api-nest/generators/provider" + }, + { + "name": "resolver generator", + "id": "resolver", + "file": "default/api-nest/generators/resolver" + }, + { + "name": "resource generator", + "id": "resource", + "file": "default/api-nest/generators/resource" + }, + { + "name": "service generator", + "id": "service", + "file": "default/api-nest/generators/service" + }, + { + "name": "convert-tslint-to-eslint", + "id": "convert-tslint-to-eslint", + "file": "default/api-nest/generators/convert-tslint-to-eslint" + } + ] + }, + { + "name": "next", + "id": "next", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/next Overview", + "file": "shared/next-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-next/generators/application" + }, + { + "name": "component generator", + "id": "component", + "file": "default/api-next/generators/component" + }, + { + "name": "page generator", + "id": "page", + "file": "default/api-next/generators/page" + }, + { + "name": "build executor", + "id": "build", + "file": "default/api-next/executors/build" + }, + { + "name": "server executor", + "id": "server", + "file": "default/api-next/executors/server" + }, + { + "name": "export executor", + "id": "export", + "file": "default/api-next/executors/export" + } + ] + }, + { + "name": "gatsby", + "id": "gatsby", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/gatsby Overview", + "file": "shared/gatsby-plugin" + }, + { + "name": "application generator", + "id": "application", + "file": "default/api-gatsby/generators/application" + }, + { + "name": "component generator", + "id": "component", + "file": "default/api-gatsby/generators/component" + }, + { + "name": "page generator", + "id": "page", + "file": "default/api-gatsby/generators/page" + }, + { + "name": "build executor", + "id": "build", + "file": "default/api-gatsby/executors/build" + }, + { + "name": "server executor", + "id": "server", + "file": "default/api-gatsby/executors/server" + } + ] + }, + { + "name": "detox", + "id": "detox", + "itemList": [ + { + "name": "application generator", + "id": "application", + "file": "default/api-detox/generators/application" + }, + { + "name": "build executor", + "id": "build", + "file": "default/api-detox/executors/build" + }, + { + "name": "test executor", + "id": "test", + "file": "default/api-detox/executors/test" + } + ] + }, + { + "name": "react native", + "id": "react-native", + "itemList": [ + { + "name": "application generator", + "id": "application", + "file": "default/api-react-native/generators/application" + }, + { + "name": "component generator", + "id": "component", + "file": "default/api-react-native/generators/component" + }, + { + "name": "library generator", + "id": "library", + "file": "default/api-react-native/generators/library" + }, + { + "name": "build android executor", + "id": "build-android", + "file": "default/api-react-native/executors/build-android" + }, + { + "name": "bundle executor", + "id": "bundle", + "file": "default/api-react-native/executors/bundle" + }, + { + "name": "ensure symlink executor", + "id": "ensure-symlink", + "file": "default/api-react-native/executors/ensure-symlink" + }, + { + "name": "run android executor", + "id": "run-android", + "file": "default/api-react-native/executors/run-android" + }, + { + "name": "run ios executor", + "id": "run-ios", + "file": "default/api-react-native/executors/run-ios" + }, + { + "name": "start executor", + "id": "start", + "file": "default/api-react-native/executors/start" + }, + { + "name": "sync deps executor", + "id": "sync-deps", + "file": "default/api-react-native/executors/sync-deps" + } + ] + }, + { + "name": "Nx Plugin", + "id": "nx-plugin", + "itemList": [ + { + "id": "overview", + "name": "Overview", + "searchResultsName": "@nrwl/nx-plugin Overview", + "file": "shared/nx-plugin" + }, + { + "name": "executor generator", + "id": "executor", + "file": "default/api-nx-plugin/generators/executor" + }, + { + "name": "migration generator", + "id": "migration", + "file": "default/api-nx-plugin/generators/migration" + }, + { + "name": "plugin generator", + "id": "plugin", + "file": "default/api-nx-plugin/generators/plugin" + }, + { + "name": "generator generator", + "id": "schematic", + "file": "default/api-nx-plugin/generators/generator" + }, + { + "name": "e2e executor", + "id": "e2e", + "file": "default/api-nx-plugin/executors/e2e" + } + ] + }, + { + "name": "Nx Devkit", + "id": "nx-devkit", + "itemList": [ + { + "id": "index", + "name": "Overview", + "searchResultsName": "Nx Devkit", + "file": "default/api-nx-devkit/index" + }, + { + "id": "ngcli_adapter", + "name": "Ng CLI Adapter", + "searchResultsName": "Ng CLI Adapter", + "file": "default/api-nx-devkit/ngcli_adapter" + } + ] + }, + { + "name": "Executors / Builders", + "id": "executors", + "itemList": [ + { + "name": "Using Executors / Builders", + "id": "using-builders", + "file": "shared/using-executors" + }, + { + "name": "Running Custom Commands", + "id": "run-commands-builder", + "file": "shared/running-custom-commands" + }, + { + "name": "Creating Custom Builders", + "id": "creating-custom-builders", + "file": "shared/tools-workspace-builders" + } + ] + }, + { + "name": "Generators", + "id": "generators", + "itemList": [ + { + "name": "Using Generators", + "id": "using-schematics", + "file": "shared/generators/using-generators" + }, + { + "name": "Workspace Generators", + "id": "workspace-generators", + "file": "shared/generators/workspace-generators" + }, + { + "name": "Composing Generators", + "id": "composing-generators", + "file": "shared/generators/composing-generators" + }, + { + "name": "Generator Options", + "id": "generator-options", + "file": "shared/generators/generator-options" + }, + { + "name": "Creating Files", + "id": "creating-files", + "file": "shared/generators/creating-files" + }, + { + "name": "Modifying Files", + "id": "modifying-files", + "file": "shared/generators/modifying-files" + } + ] + }, + { + "name": "Workspace Structure", + "id": "structure", + "itemList": [ + { + "name": "Creating Libraries", + "id": "creating-libraries", + "file": "shared/workspace/creating-libraries" + }, + { + "name": "Library Types", + "id": "library-types", + "file": "shared/workspace/library-types" + }, + { + "name": "Grouping Libraries", + "id": "grouping-libraries", + "file": "shared/workspace/grouping-libraries" + }, + { + "name": "Buildable and Publishable Libraries", + "id": "buildable-and-publishable-libraries", + "file": "shared/workspace/buildable-and-publishable-libraries" + }, + { + "name": "Using Tags", + "id": "monorepo-tags", + "file": "shared/monorepo-tags" + }, + { + "name": "Dependency Graph", + "id": "dependency-graph", + "file": "shared/workspace/structure/dependency-graph" + }, + { + "name": "Extending the Project Graph", + "id": "project-graph-plugins", + "file": "shared/workspace/project-graph-plugins" + } + ] + }, + { + "name": "CI", + "id": "ci", + "itemList": [ + { + "name": "Setting up Azure Pipelines", + "id": "monorepo-ci-azure", + "file": "shared/monorepo-ci-azure" + }, + { + "name": "Setting up CircleCI", + "id": "monorepo-ci-circle-ci", + "file": "shared/monorepo-ci-circle-ci" + }, + { + "name": "Setting up GitHub Actions", + "id": "monorepo-ci-github-actions", + "file": "shared/monorepo-ci-github-actions" + }, + { + "name": "Setting up Jenkins", + "id": "monorepo-ci-jenkins", + "file": "shared/monorepo-ci-jenkins" + }, + { + "name": "Setting up GitLab", + "id": "monorepo-ci-gitlab", + "file": "shared/monorepo-ci-gitlab" + }, + { + "name": "Distributed CI", + "id": "distributed-builds", + "file": "shared/distributed-builds" + }, + { + "name": "Incremental Builds", + "id": "incremental-builds", + "file": "shared/incremental-builds" + }, + { + "name": "Setup incremental builds for Angular applications", + "id": "setup-incremental-builds-angular", + "file": "shared/guides/setup-incremental-builds-angular" + } + ] + }, + { + "name": "Guides", + "id": "guides", + "itemList": [ + { + "name": "Nx and Lerna/Yarn", + "id": "lerna-and-nx", + "file": "shared/guides/lerna-and-nx" + }, + { + "name": "Nx and Turborepo", + "id": "turbo-and-nx", + "file": "shared/guides/turbo-and-nx" + }, + { + "name": "Monorepos", + "id": "why-monorepos", + "file": "shared/guides/why-monorepos" + }, + { + "name": "Adding Images, Fonts, and Files", + "id": "adding-assets-react", + "file": "shared/guides/adding-assets" + }, + { + "name": "Using Environment Variables", + "id": "environment-variables", + "file": "shared/guides/environment-variables" + }, + { + "name": "Using Nx at Enterprises", + "id": "monorepo-nx-enterprise", + "file": "shared/monorepo-nx-enterprise" + }, + { + "name": "Using ESLint in Nx Workspaces", + "id": "eslint", + "file": "shared/eslint" + }, + { + "name": "Nx Daemon", + "id": "nx-daemon", + "file": "shared/daemon" + }, + { + "name": "JavaScript and TypeScript", + "id": "js-and-ts", + "file": "shared/guides/js-and-ts" + }, + { + "name": "Configuring Browser Support", + "id": "browser-support", + "file": "shared/guides/browser-support" + }, + { + "name": "Next.js projects with Nx", + "id": "nextjs", + "file": "shared/guides/nextjs" + }, + { + "name": "Deploying Next.js applications to Vercel", + "id": "deploy-nextjs-to-vercel", + "file": "shared/guides/deploy-nextjs-to-vercel" + }, + { + "name": "Webpack 5 Migration", + "id": "webpack-5", + "file": "shared/guides/webpack-5" + }, + { + "name": "Using Tailwind CSS in React", + "id": "using-tailwind-css-in-react", + "file": "shared/guides/using-tailwind-css-in-react" + }, + { + "name": "Using NgRx", + "id": "misc-ngrx", + "file": "shared/guides/misc-ngrx" + }, + { + "name": "Using DataPersistence", + "id": "misc-data-persistence", + "file": "shared/guides/misc-data-persistence" + }, + { + "name": "Nx Devkit and Angular Devkit", + "id": "nx-devkit-angular-devkit", + "file": "shared/guides/nx-devkit-angular-devkit" + }, + { + "name": "Setup MFE with Angular and Nx", + "id": "setup-mfe-with-angular", + "file": "shared/guides/setup-mfe-with-angular" + } + ] + }, + { + "name": "Examples", + "id": "examples", + "itemList": [ + { + "name": "Nx Micro-Frontend Example", + "id": "nx-examples", + "file": "shared/examples/nx-examples" + }, + { + "name": "Powering Up React Development With Nx", + "id": "react-nx", + "file": "shared/examples/react-nx" + }, + { + "name": "Using Apollo GraphQL", + "id": "apollo-react", + "file": "shared/examples/apollo-react" + } + ] + } + ] + }, { "id": "angular", "itemList": [ diff --git a/docs/node/getting-started/intro.md b/docs/node/getting-started/intro.md index 69ac104b83..3bfee16a24 100644 --- a/docs/node/getting-started/intro.md +++ b/docs/node/getting-started/intro.md @@ -37,7 +37,7 @@ Nx works especially well for monorepos. Each new app added to a monorepo provide ## Learn Nx Fundamentals -- [Interactive Nx Tutorial (with videos)](/{{framework}}/tutorial/01-create-application) +- [Interactive Nx Tutorial (with videos)](/default/node-tutorial/01-create-application) - [Using Nx Core Without Plugins](/{{framework}}/getting-started/nx-core) - [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo) - [Nx CLI](/{{framework}}/using-nx/nx-cli) diff --git a/docs/react/getting-started/intro.md b/docs/react/getting-started/intro.md index 7a53e55048..2280117003 100644 --- a/docs/react/getting-started/intro.md +++ b/docs/react/getting-started/intro.md @@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system with first class monorepo suppor Nx helps you develop [React](/{{framework}}/react/overview) applications with fully integrated support for modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress](/{{framework}}/cypress/overview), -[Storybook](/{{framework}}/storybook/overview), [ESLint](/{{framework}}/linter/eslint), and more. Nx also supports React +Storybook, [ESLint](/{{framework}}/linter/eslint), and more. Nx also supports React frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js](/{{version}}/react/guides/nextjs). ## 10-Minute Nx Overview @@ -61,7 +61,7 @@ begin. Check out [Nx and Typescript](/{{framework}}/getting-started/nx-and-types ## Learn Nx Fundamentals -- [Interactive Nx Tutorial (with videos)](/{{framework}}/tutorial/01-create-application) +- [Interactive Nx Tutorial (with videos)](/default/react-tutorial/01-create-application) - [Free Nx Course on Egghead: Scale React Development with Nx](https://egghead.io/playlists/scale-react-development-with-nx-4038) - [45-Minute Walkthrough](https://www.youtube.com/watch?v=jCf92IyR-GE) diff --git a/docs/react/guides/nextjs.md b/docs/react/guides/nextjs.md index a64a412cf0..58e5c0815a 100644 --- a/docs/react/guides/nextjs.md +++ b/docs/react/guides/nextjs.md @@ -2,7 +2,7 @@ ![](/shared/nextjs-logo.png) -Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Cypress](/{{version}}/{{framework}}/cypress/overview), [Storybook](/{{version}}/{{framework}}/storybook/overview), Jest, and more. +Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Cypress](/{{version}}/{{framework}}/cypress/overview), Storybook, Jest, and more. In this guide we will show you how to develop [Next.js](https://nextjs.org/) applications with Nx. diff --git a/docs/shared/angular-tutorial/01-create-application.md b/docs/shared/angular-tutorial/01-create-application.md new file mode 100644 index 0000000000..0b61a2e51c --- /dev/null +++ b/docs/shared/angular-tutorial/01-create-application.md @@ -0,0 +1,137 @@ +# Angular Nx Tutorial - Step 1: Create Application + + + +In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest. + +> This tutorial uses several Nx plugins to provide a rich dev experience. **All the plugins are optional.** [Read about using Nx Core without plugins](/{{framework}}/getting-started/nx-core). + +## Create a new workspace + +**Start by creating a new workspace.** + +```bash +npx create-nx-workspace@latest +``` + +You then receive the following prompts in your command line: + +```bash +Workspace name (e.g., org name) myorg +What to create in the new workspace angular +Application name todos +Default stylesheet format CSS +``` + +> You can also choose to add [Nx Cloud](https://nx.app), but its not required for the tutorial. + +When asked about 'preset', select `angular`, and `todos` for the app name. + +```treeview +myorg/ +├── apps/ +│ ├── todos/ +│ │ ├── src/ +│ │ │ ├── app/ +│ │ │ ├── assets/ +│ │ │ ├── environments/ +│ │ │ ├── favicon.ico +│ │ │ ├── index.html +│ │ │ ├── main.ts +│ │ │ ├── polyfills.ts +│ │ │ ├── styles.scss +│ │ │ └── test.ts +│ │ ├── .babelrc +│ │ ├── .browserslistrc +│ │ ├── .eslintrc.json +│ │ ├── jest.conf.js +│ │ ├── tsconfig.app.json +│ │ ├── tsconfig.json +│ │ └── tsconfig.spec.json +│ └── todos-e2e/ +│ ├── src/ +│ │ ├── fixtures/ +│ │ │ └── example.json +│ │ ├── integration/ +│ │ │ └── app.spec.ts +│ │ ├── plugins/ +│ │ │ └── index.ts +│ │ └── support/ +│ │ ├── app.po.ts +│ │ ├── commands.ts +│ │ └── index.ts +│ ├── cypress.json +│ ├── tsconfig.e2e.json +│ └── tsconfig.json +├── libs/ +├── tools/ +├── .eslintrc.json +├── .prettierrc +├── babel.config.json +├── jest.config.js +├── jest.preset.js +├── nx.json +├── package.json +├── README.md +├── tsconfig.base.json +└── workspace.json +``` + +The generate command added two projects to our workspace: + +- An Angular application +- E2E tests for the Angular application + +## Serve the newly created application + +Now that the application is set up, run it locally via: + +```bash +npx nx serve todos +``` + +## Note on the Nx CLI + +If you would prefer to run using a global installation of Nx, you can run: + +```bash +nx serve todos +``` + +Depending on how your dev env is set up, the command above might result in `Command 'nx' not found`. + +To fix it, you can either install the `nx` cli globally by running: + +```bash +npm install -g nx +``` + +or + +```bash +yarn global add nx +``` + +Alternatively, you can run the local installation of Nx by prepending every command with `npm run`: + +```bash +npx nx serve todos +``` + +or + +```bash +yarn nx serve todos +``` + +## Note on `nx serve` and `ng serve` + +Internally, the Nx CLI delegates to the Angular CLI when running commands or generating code. The `nx serve` command +produces the same result as `ng serve`, and `nx build` produces the same results as `ng build`. However, the Nx CLI +supports advanced capabilities that aren't supported by the Angular CLI. For instance, Nx's computation cache only +works when using the Nx CLI. In other words, using `nx` instead `ng` results in the same output, but often performs +a lot better. [Read more about Nx CLI and Angular CLI.](/{{framework}}/using-nx/nx-cli) + +## What's Next + +- Continue to [Step 2: Add E2E Tests](/latest/angular/tutorial/02-add-e2e-test) diff --git a/docs/shared/angular-tutorial/02-add-e2e-test.md b/docs/shared/angular-tutorial/02-add-e2e-test.md new file mode 100644 index 0000000000..1cadd90768 --- /dev/null +++ b/docs/shared/angular-tutorial/02-add-e2e-test.md @@ -0,0 +1,42 @@ +# Angular Nx Tutorial - Step 2: Add E2E Tests + + + +By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests. + +**Open `apps/todos-e2e/src/support/app.po.ts`.** It's a page object file that contains helpers for querying the page. + +**Add the following two helpers:** + +```typescript +export const getTodos = () => cy.get('li.todo'); +export const getAddTodoButton = () => cy.get('button#add-todo'); +``` + +**Next, update `apps/todos-e2e/src/integration/app.spec.ts`.** + +```typescript +import { getAddTodoButton, getTodos } from '../support/app.po'; + +describe('TodoApps', () => { + beforeEach(() => cy.visit('/')); + + it('should display todos', () => { + getTodos().should((t) => expect(t.length).equal(2)); + getAddTodoButton().click(); + getTodos().should((t) => expect(t.length).equal(3)); + }); +}); +``` + +This is a simple example of an E2E test, but it suffices for the purposes of this tutorial. + +If you have not done so already, stop the `npx nx serve` command and run `npx nx e2e todos-e2e --watch`. + +A UI opens. Click the button in the top right corner that says "Run 1 integration spec". Keep the E2E tests running. + +As you progress through the tutorial, you work on making these E2E tests pass. + +## What's Next + +- Continue to [Step 3: Display Todos](/latest/angular/tutorial/03-display-todos) diff --git a/docs/shared/angular-tutorial/03-display-todos.md b/docs/shared/angular-tutorial/03-display-todos.md new file mode 100644 index 0000000000..96cf20fb5b --- /dev/null +++ b/docs/shared/angular-tutorial/03-display-todos.md @@ -0,0 +1,85 @@ +# Angular Nx Tutorial - Step 3: Display Todos + + + +Great! You have a failing E2E test. Now you can make it pass! + +The best way to work with Cypress is to keep the failing E2E test running while working on the app. This helps you see the progress you are making. + +## Show todos + +**Open `apps/todos`.** If you have used Angular CLI, this should look very familiar: same layout, same module and component files. The only difference is that Nx uses Jest instead of Karma. + +To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.component.ts`: + +```typescript +import { Component } from '@angular/core'; + +interface Todo { + title: string; +} + +@Component({ + selector: 'myorg-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }]; +} +``` + +and `apps/todos/src/app/app.component.html`: + +```html +

Todos

+ +
    +
  • {{ t.title }}
    • +
+``` + +**Rerun the specs by clicking the button in the top right corner of the left pane.** Now the tests fail while trying to find the add todo button. + +## Add todos + +**Add the `add-todo` button with the corresponding click handler.** + +```typescript +import { Component } from '@angular/core'; + +interface Todo { + title: string; +} + +@Component({ + selector: 'myorg-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }]; + + addTodo() { + this.todos.push({ + title: `New todo ${Math.floor(Math.random() * 1000)}`, + }); + } +} +``` + +```html +

Todos

+ +
    +
  • {{ t.title }}
    • +
+ + +``` + +The tests should pass now. + +## What's Next + +- Continue to [Step 4: Connect to an API](/latest/angular/tutorial/04-connect-to-api) diff --git a/docs/shared/angular-tutorial/04-connect-to-api.md b/docs/shared/angular-tutorial/04-connect-to-api.md new file mode 100644 index 0000000000..b03850f62d --- /dev/null +++ b/docs/shared/angular-tutorial/04-connect-to-api.md @@ -0,0 +1,61 @@ +# Angular Nx Tutorial - Step 4: Connect to an API + + + +Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. + +**Open `apps/todos/src/app/app.module.ts` to import `HttpClientModule`.** + +```typescript +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, HttpClientModule], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +**Now, use `HttpClient` in the component to get the data from the api.** + +```typescript +import { Component } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +interface Todo { + title: string; +} + +@Component({ + selector: 'myorg-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + todos: Todo[] = []; + + constructor(private http: HttpClient) { + this.fetch(); + } + + fetch() { + this.http.get('/api/todos').subscribe((t) => (this.todos = t)); + } + + addTodo() { + this.http.post('/api/addTodo', {}).subscribe(() => { + this.fetch(); + }); + } +} +``` + +## What's Next + +- Continue to [Step 5: Add Node Application Implementing an API](/latest/angular/tutorial/05-add-node-app) diff --git a/docs/shared/angular-tutorial/05-add-node-app.md b/docs/shared/angular-tutorial/05-add-node-app.md new file mode 100644 index 0000000000..ccc56e6b68 --- /dev/null +++ b/docs/shared/angular-tutorial/05-add-node-app.md @@ -0,0 +1,191 @@ +# Angular Nx Tutorial - Step 5: Add Node Application Implementing an API + + + +The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service. + +## Add NestJS plugin to your workspace + +Nx is an extensible framework with plugins for many modern tools and frameworks. **To see some plugins, run `nx list`:** + +```bash +> NX Installed plugins: + + @nrwl/angular (executors,generators) + @nrwl/cypress (executors,generators) + @nrwl/jest (executors,generators) + @nrwl/workspace (executors,generators) + + +> NX Also available: + + @nrwl/express (executors,generators) + @nrwl/linter (builders) + @nrwl/nest (executors,generators) + @nrwl/next (executors,generators) + @nrwl/node (executors,generators) + @nrwl/nx-plugin (executors,generators) + @nrwl/react (executors,generators) + @nrwl/storybook (executors,generators) + @nrwl/web (executors,generators) + + +> NX Community plugins: + + @angular-architects/ddd - Nx plugin for structuring a monorepo with domains and layers + @offeringsolutions/nx-karma-to-jest - Nx plugin for replacing karma with jest in an Nx workspace + @dev-thought/nx-deploy-it - Nx plugin to deploy applications on your favorite cloud provider +``` + +**Now run `npx nx list @nrwl/nest`, and you will see:** + +```bash +> NX NOTE @nrwl/nest is not currently installed + + Use "yarn add --dev @nrwl/nest" to add new capabilities +``` + +**Add the dependency:** + +```bash +npm install --save-dev @nrwl/nest +``` + +or + +```bash +yarn add --dev @nrwl/nest +``` + +> `@nrwl/nest` also added `@nrwl/node`. Run `nx list @nrwl/nest` and `nx list @nrwl/node` to see what those plugins provide. + +## Create a NestJS application + +**Run the following to generate a new Nest application:** + +```bash +npx nx g @nrwl/nest:app api --frontendProject=todos +``` + +Nx asks you a few questions, and, as with the Angular application, the defaults work well here. + +After this is done, you should see something like this: + +```treeview +myorg/ +├── apps/ +│ ├── todos/ +│ ├── todos-e2e/ +│ └── api/ +│ ├── src/ +│ │ ├── app/ +│ │ │ ├── app.controller.ts +│ │ │ ├── app.controller.spec.ts +│ │ │ ├── app.module.ts +│ │ │ ├── app.service.ts +│ │ │ └── app.service.spec.ts +│ │ ├── assets/ +│ │ ├── environments/ +│ │ │ ├── environment.ts +│ │ │ └── environment.prod.ts +│ │ └── main.ts +│ ├── jest.conf.js +│ ├── proxy.conf.json +│ ├── tsconfig.app.json +│ ├── tsconfig.json +│ └── tsconfig.spec.json +├── libs/ +├── angular.json +├── nx.json +├── package.json +├── tools/ +└── tsconfig.base.json +``` + +The `apps` directory is where Nx places anything you can run: frontend applications, backend applications, e2e test suites. That's why the `api` application appeared there. + +You can run: + +- `npx nx serve api` to serve the application +- `npx nx build api` to build the application +- `npx nx test api` to test the application + +**Open `apps/api/src/app/app.module.ts`.** + +```typescript +import { Module } from '@nestjs/common'; + +import { AppController } from './app.controller'; +import { AppService } from './app.service'; + +@Module({ + imports: [], + controllers: [AppController], + providers: [AppService], +}) +export class AppModule {} +``` + +We recommend using the [Nest](/{{framework}}/nest/overview) framework when creating node applications. Nest is a powerful framework which helps develop robust node applications. You can also use Express or any node libraries with Nx. + +In this case you have an application that registers a service and a controller. Services in Nest are responsible for the business logic, and controllers are responsible for implementing Http endpoints. + +**Update `apps/api/src/app/app.service.ts`:** + +```typescript +import { Injectable } from '@nestjs/common'; + +interface Todo { + title: string; +} + +@Injectable() +export class AppService { + todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }]; + + getData(): Todo[] { + return this.todos; + } + + addTodo() { + this.todos.push({ + title: `New todo ${Math.floor(Math.random() * 1000)}`, + }); + } +} +``` + +**Next, update the controller to invoke the service:** + +```typescript +import { Controller, Get, Post } from '@nestjs/common'; + +import { AppService } from './app.service'; + +@Controller() +export class AppController { + constructor(private readonly appService: AppService) {} + + @Get('todos') + getData() { + return this.appService.getData(); + } + + @Post('addTodo') + addTodo() { + return this.appService.addTodo(); + } +} +``` + +In a new terminal window, serve the API. + +```bash +npx nx serve api +``` + +The API starts running on port `3333`. + +## What's Next + +- Continue to [Step 6: Proxy](/latest/angular/tutorial/06-proxy) diff --git a/docs/shared/angular-tutorial/06-proxy.md b/docs/shared/angular-tutorial/06-proxy.md new file mode 100644 index 0000000000..6694a6acbb --- /dev/null +++ b/docs/shared/angular-tutorial/06-proxy.md @@ -0,0 +1,45 @@ +# Angular Nx Tutorial - Step 6: Proxy + + + +You passed `--frontendProject=todos` when creating the node application. What did that argument do? + +It created a proxy configuration that allows the Angular application to talk to the API in development. + +**To see how it works, open `angular.json` and find the `serve` target of the todos app.** + +```json +{ + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "todos:build", + "proxyConfig": "apps/todos/proxy.conf.json" + }, + "configurations": { + "production": { + "browserTarget": "todos:build:production" + } + } + } +} +``` + +**Note the `proxyConfig` property.** + +**Now open `proxy.conf.json`:** + +```json +{ + "/api": { + "target": "http://localhost:3333", + "secure": false + } +} +``` + +This configuration tells `nx serve` to forward all requests starting with `/api` to the process listening on port `3333`. + +## What's Next + +- Continue to [Step 7: Share Code](/latest/angular/tutorial/07-share-code) diff --git a/docs/shared/angular-tutorial/07-share-code.md b/docs/shared/angular-tutorial/07-share-code.md new file mode 100644 index 0000000000..78147f9ec4 --- /dev/null +++ b/docs/shared/angular-tutorial/07-share-code.md @@ -0,0 +1,124 @@ +# Angular Nx Tutorial - Step 7: Share Code + + + +Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library. + +**Run the following command to create a library:** + +```bash +npx nx g @nrwl/workspace:lib data +``` + +The result should look like this: + +```treeview +myorg/ +├── apps/ +│ ├── todos/ +│ ├── todos-e2e/ +│ └── api/ +├── libs/ +│ └── data/ +│ ├── src/ +│ │ ├── lib/ +│ │ │ └── data.ts +│ │ └── index.ts +│ ├── .eslintrc +│ ├── jest.config.js +│ ├── tsconfig.app.json +│ ├── tsconfig.json +│ └── tsconfig.spec.json +├── workspace.json +├── nx.json +├── package.json +├── tools/ +└── tsconfig.base.json +``` + +**Copy the interface into `libs/data/src/lib/data.ts`.** + +```typescript +export interface Todo { + title: string; +} +``` + +### A note about VS Code : + +If you're using [VS Code](https://code.visualstudio.com/) it may be necessary at this point to restart the TS server so that the new `@myorg/data` package is recognized. This may need to be done **every time a new workspace library is added**. + +## Refactor the API + +**Now update `apps/api/src/app/app.service.ts` to import the interface:** + +```typescript +import { Injectable } from '@nestjs/common'; +import { Todo } from '@myorg/data'; + +@Injectable() +export class AppService { + todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }]; + + getData(): Todo[] { + return this.todos; + } + + addTodo() { + this.todos.push({ + title: `New todo ${Math.floor(Math.random() * 1000)}`, + }); + } +} +``` + +## Update the Angular application + +**Next import the interface in `apps/todos/src/app/app.component.ts`:** + +```typescript +import { Component } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Todo } from '@myorg/data'; + +@Component({ + selector: 'myorg-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + todos: Todo[] = []; + + constructor(private http: HttpClient) { + this.fetch(); + } + + fetch() { + this.http.get('/api/todos').subscribe((t) => (this.todos = t)); + } + + addTodo() { + this.http.post('/api/addTodo', {}).subscribe(() => { + this.fetch(); + }); + } +} +``` + +> Every time you add a new library, you have to restart `npx nx serve`. + +Restart the api and application in separate terminal windows + +```bash +npx nx serve api +``` + +```bash +npx nx serve todos +``` + +And you should see the application running. + +## What's Next + +- Continue to [Step 8: Create Libraries](/latest/angular/tutorial/08-create-libs) diff --git a/docs/shared/angular-tutorial/08-create-libs.md b/docs/shared/angular-tutorial/08-create-libs.md new file mode 100644 index 0000000000..91b2f850a4 --- /dev/null +++ b/docs/shared/angular-tutorial/08-create-libs.md @@ -0,0 +1,170 @@ +# Angular Nx Tutorial - Step 8: Create Libs + + + +Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. + +## Public API + +Every library has an `index.ts` file, which defines its public API. Other applications and libraries should only access what the `index.ts` exports. Everything else in the library is private. + +## UI libraries + +To illustrate how useful libraries can be, create a library of Angular components. + +Use the generate to scaffold a new library: + +```sh +npx nx g @nrwl/angular:lib ui +``` + +You should see the following: + +```treeview +myorg/ +├── apps/ +│ ├── todos/ +│ ├── todos-e2e/ +│ └── api/ +├── libs/ +│ ├── data/ +│ └── ui/ +│ ├── src/ +│ │ ├── lib/ +│ │ │ ├── ui.module.spec.ts +│ │ │ └── ui.module.ts +│ │ └── index.ts +│ ├── .eslintrc +│ ├── jest.conf.js +│ ├── tsconfig.app.json +│ ├── tsconfig.json +│ └── tsconfig.spec.json +├── .eslintrc +├── nx.json +├── package.json +├── tools/ +└── tsconfig.base.json +``` + +The `libs/ui/src/lib/ui.module.ts` file looks like this: + +```typescript +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + imports: [CommonModule], +}) +export class UiModule {} +``` + +## Add a component + +**Add a component to the newly created ui library by running:** + +```bash +npx nx g component todos --project=ui --export +``` + +```treeview +myorg/ +├── apps/ +│ ├── todos/ +│ ├── todos-e2e/ +│ └── api/ +├── libs/ +│ ├── data/ +│ └── ui/ +│ ├── src/ +│ │ ├── lib/ +│ │ │ ├── todos/ +│ │ │ │ ├── todos.component.css +│ │ │ │ ├── todos.component.html +│ │ │ │ ├── todos.component.spec.ts +│ │ │ │ └── todos.component.ts +│ │ │ ├── ui.module.spec.ts +│ │ │ └── ui.module.ts +│ │ └── index.ts +│ ├── .eslintrc +│ ├── jest.conf.js +│ ├── tsconfig.app.json +│ ├── tsconfig.json +│ └── tsconfig.spec.json +├── nx.json +├── package.json +├── tools/ +└── tsconfig.base.json +``` + +**Add a `todos` input to `libs/ui/src/lib/todos/todos.component.ts`.** + +```typescript +import { Component, OnInit, Input } from '@angular/core'; +import { Todo } from '@myorg/data'; + +@Component({ + selector: 'myorg-todos', + templateUrl: './todos.component.html', + styleUrls: ['./todos.component.css'], +}) +export class TodosComponent implements OnInit { + @Input() todos: Todo[] = []; + + constructor() {} + + ngOnInit() {} +} +``` + +**And update `todos.component.html` to display the given todos:** + +```html +
    +
  • {{ t.title }}
    • +
+``` + +## Use the UI library + +**Now import `UiModule` into `apps/todos/src/app/app.module.ts`.** + +```typescript +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; +import { HttpClientModule } from '@angular/common/http'; +import { UiModule } from '@myorg/ui'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, HttpClientModule, UiModule], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +**And update `app.component.html`:** + +```html +

Todos

+ + + + +``` + +Restart the api and application in separate terminal windows + +```bash +npx nx serve api +``` + +```bash +npx nx serve todos +``` + +## What's Next + +- Continue to [Step 9: Using the Dependency Graph](/latest/angular/tutorial/09-dep-graph) diff --git a/docs/shared/angular-tutorial/09-dep-graph.md b/docs/shared/angular-tutorial/09-dep-graph.md new file mode 100644 index 0000000000..c8429ed3c8 --- /dev/null +++ b/docs/shared/angular-tutorial/09-dep-graph.md @@ -0,0 +1,19 @@ +# Angular Nx Tutorial - Step 9: Using the Depedency Graph + + + +An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. + +Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day. + +With Nx, you can do better than that. + +Run the command to see the dependency graph for your workspace. + +```sh +npx nx dep-graph +``` + +## What's Next + +- Continue to [Step 10: Using Computation Caching](/latest/angular/tutorial/10-computation-caching) diff --git a/docs/shared/angular-tutorial/10-computation-caching.md b/docs/shared/angular-tutorial/10-computation-caching.md new file mode 100644 index 0000000000..976c5b7c47 --- /dev/null +++ b/docs/shared/angular-tutorial/10-computation-caching.md @@ -0,0 +1,72 @@ +# Angular Nx Tutorial - Step 10: Computation Caching + + + +Nx has built-in computation caching, which helps drastically improve the performance of the commands. + +**To see it in action, run `npx nx build todos`:** + +```bash +> npx nx run todos:build +Generating ES5 bundles for differential loading... +ES5 bundle generation complete. + +chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered] +chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered] +chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered] +chunk {main} main-es2015.js, main-es2015.js.map (main) 22.7 kB [initial] [rendered] +chunk {main} main-es5.js, main-es5.js.map (main) 24.1 kB [initial] [rendered] +chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 9.88 kB [initial] [rendered] +chunk {styles} styles-es5.js, styles-es5.js.map (styles) 11.1 kB [initial] [rendered] +chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 759 kB [initial] [rendered] +chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.35 MB [initial] [rendered] +chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 2.75 MB [initial] [rendered] +``` + +**Now, run `npx nx build todos` again, and you will see the results appearing instantly:** + +```bash +> npx nx run todos:build + +> NX NOTE Cached Output: + +Generating ES5 bundles for differential loading... +ES5 bundle generation complete. + +chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 759 kB [initial] [rendered] +chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered] +chunk {main} main-es2015.js, main-es2015.js.map (main) 22.5 kB [initial] [rendered] +chunk {main} main-es5.js, main-es5.js.map (main) 23.9 kB [initial] [rendered] +chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.35 MB [initial] [rendered] +chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 2.75 MB [initial] [rendered] +chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 9.88 kB [initial] [rendered] +chunk {styles} styles-es5.js, styles-es5.js.map (styles) 11.1 kB [initial] [rendered] +chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered] +chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered] +``` + +Based on the state of the source code and the environment, Nx was able to figure out that it had already run this exact command. Nx found the artifact in the local cache and replayed the output and restored the necessary files. + +> Caching only works with the Nx CLI. Running `ng build todos` runs the command every single time. + +## Building multiple projects + +Use the `run-many` command to rebuild the two applications: + +```sh +npx nx run-many --target=build --projects=todos,api +``` + +And notice the output: + +```bash +Nx read the output from cache instead of running the command for 1 out of 2 projects. +``` + +Nx built `api` and retrieved `todos` from its computation cache. Read more about the cache here [here](/{{framework}}/using-nx/caching). + +> Add --parallel to any command, and Nx does most of the work in parallel. + +## What's Next + +- Continue to [Step 11: Test Affected Projects](/latest/angular/tutorial/11-test-affected-projects) diff --git a/docs/shared/angular-tutorial/11-test-affected-projects.md b/docs/shared/angular-tutorial/11-test-affected-projects.md new file mode 100644 index 0000000000..f8a8f6771d --- /dev/null +++ b/docs/shared/angular-tutorial/11-test-affected-projects.md @@ -0,0 +1,85 @@ +# Angular Nx Tutorial - Step 11: Testing Affected Projects + + + +Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects. + +**Commit all the changes in the repo**: + +```bash +git add . +git commit -am 'init' +git checkout -b testbranch +``` + +**Open `libs/ui/src/lib/todos/todos.component.html` and change the template:** + +```html +
    +
  • {{ t.title }}!
    • +
+``` + +Run the command to see affected apps. + +```sh +npx nx affected:apps +``` + +You should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change. + +Run the command to see affected libraries + +```sh +npx nx affected:libs +``` + +You should see `ui` printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs. + +## Test affected projects + +Printing the affected projects can be handy, but usually you want to do something with them. For instance, you may want to test everything that has been affected. + +Run the command to retest only the projects affected by the change: + +```sh +npx nx affected:test +``` + +You will see the following: + +```bash +> NX Running target test for projects: + + - ui + - todos + +... + + Failed projects: + + - todos + - ui +``` + +Note that Nx only tried to retest `ui` and `todos`. It didn't retest `api` or `data` because there is no way that could be affected by the changes in this branch. + +Run the command to retest the failed projects. + +```sh +npx nx affected:test -- --only-failed +``` + +## Affected: + +You can run any target against the affected projects in the graph like this: + +```bash +# The following are equivalent +npx nx affected --target=build +npx nx affected:build +``` + +## What's Next + +- Continue to [Step 12: Summary](/latest/angular/tutorial/12-summary) diff --git a/docs/shared/angular-tutorial/12-summary.md b/docs/shared/angular-tutorial/12-summary.md new file mode 100644 index 0000000000..fb5f6b8834 --- /dev/null +++ b/docs/shared/angular-tutorial/12-summary.md @@ -0,0 +1,18 @@ +# Angular Nx Tutorial - Step 12: Summary + +In this tutorial you: + +- Built a full stack application using Angular and Nest +- Shared code between the frontend and the backend +- Created a UI library +- Used Nx affected commands to only retest and rebuild what is affected + +## Learn more + +- [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo) + +**Dive Deep:** + +- [Nx CLI](/{{framework}}/using-nx/nx-cli) +- [Computation Caching](/{{framework}}/using-nx/caching) +- [Rebuilding What is Affected](/{{framework}}/using-nx/affected) diff --git a/docs/shared/examples/apollo-react.md b/docs/shared/examples/apollo-react.md new file mode 100644 index 0000000000..e3aa0cbe28 --- /dev/null +++ b/docs/shared/examples/apollo-react.md @@ -0,0 +1,12 @@ +# Using Apollo GraphQL with React in an Nx Workspace + +In this article, you’ll learn how to: + +- Create an Nx workspace for both frontend and backend applications +- Create a GraphQL API using NestJS +- Autogenerate frontend code based on your GraphQL schema +- Create a React application to consume your GraphQL api + +**Blog Post:** [Using Apollo GraphQL with React in an Nx Workspace](https://blog.nrwl.io/using-apollo-graphql-with-react-in-an-nx-workspace-99db8d69cebe) + +**Repository:** [nx-apollo-react-example](https://github.com/nrwl/nx-apollo-react-example) diff --git a/docs/shared/examples/react-nx.md b/docs/shared/examples/react-nx.md new file mode 100644 index 0000000000..69add2be32 --- /dev/null +++ b/docs/shared/examples/react-nx.md @@ -0,0 +1,12 @@ +# Powering Up React Development With Nx + +Learn to: + +- Generate a new React monorepo workspace with one application. +- Add new feature libraries and route to them from our application. +- Create React components with a generator +- Generate a NestJS app in the same monorepo + +**Blog post:** [Powering Up React Development With Nx](https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec) + +**Repository:** [nrwl/react-nx-example](https://github.com/nrwl/react-nx-example) diff --git a/docs/shared/getting-started/EGH_ScalingReactNx.png b/docs/shared/getting-started/EGH_ScalingReactNx.png new file mode 100644 index 0000000000..308795a5a6 Binary files /dev/null and b/docs/shared/getting-started/EGH_ScalingReactNx.png differ diff --git a/docs/shared/getting-started/advanced-nx-workspace-course.png b/docs/shared/getting-started/advanced-nx-workspace-course.png new file mode 100644 index 0000000000..bf8a9f31fe Binary files /dev/null and b/docs/shared/getting-started/advanced-nx-workspace-course.png differ diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md new file mode 100644 index 0000000000..1273f5bf42 --- /dev/null +++ b/docs/shared/getting-started/intro.md @@ -0,0 +1,55 @@ +# Intro to Nx + +Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations. + +## Philosophy + +Nx shares the design philosophy with Visual Studio Code. Code is a powerful text editor, and you can be very productive +with it even if you don't install any extensions. The ecosystem of VSCode's extensions though is what can really level +up your productivity. + +Nx is similar. The core of Nx is generic, simple, and unobtrusive. Nx plugins, although very useful for many projects, +are completely optional. + +Most examples on this site use Nx plugins. It's just easier to demonstrate many features Nx offers when Nx generates all +the boilerplate. The vast majority of the features though will work the same way in a workspace with no plugins. + +## Getting Started + +These guides will help you get started: + +- [Installing Nx CLI & creating a new Nx Workspace](/{{framework}}/getting-started/nx-setup) +- [Adding Nx to an existing monorepo](/{{framework}}/migration/adding-to-monorepo) +- [Using Nx without plugins](/{{framework}}/getting-started/nx-core) +- [Nx and TypeScript](/{{framework}}/getting-started/nx-and-typescript) +- [Nx and React](/default/getting-started/nx-and-react) +- [Nx and Angular](/default/getting-started/nx-and-angular) + +## Features + +**Best-in-Class Support for Monorepos** + +- [Smart rebuilds of affected projects](/{{framework}}/using-nx/affected) +- [Computation caching](/{{framework}}/using-nx/caching) +- [Distributed task execution](/{{framework}}/using-nx/dte) +- [Code sharing and ownership management](/{{framework}}/structure/monorepo-tags) + +**Integrated Development Experience** + +- [High-quality editor plugins](/{{framework}}/using-nx/console) & [GitHub apps](https://github.com/apps/nx-cloud) +- [Powerful code generators](/{{framework}}/generators/using-schematics) +- [Workspace visualizations](/{{framework}}/structure/dependency-graph) + +**Supports Your Ecosystem** + +- [Rich plugin ecosystem](/{{framework}}/getting-started/nx-devkit) from Nrwl and the [community](/community) +- Consistent dev experience for any framework +- [Automatic upgrade to the latest versions of all frameworks and tools](/{{framework}}/using-nx/updating-nx) + +## Learn While Doing + +- [Using Nx without plugins](/{{framework}}/getting-started/nx-core) +- [Nx and TypeScript](/{{framework}}/getting-started/nx-and-typescript) +- [React: Interactive Nx Tutorial (with videos)](/default/react-tutorial/01-create-application) +- [Node: Interactive Nx Tutorial (with videos)](/default/node-tutorial/01-create-application) +- [Angular: Interactive Nx Tutorial (with videos)](/default/angular-tutorial/01-create-application) diff --git a/docs/shared/getting-started/nx-and-angular.md b/docs/shared/getting-started/nx-and-angular.md new file mode 100644 index 0000000000..ee7bf86933 --- /dev/null +++ b/docs/shared/getting-started/nx-and-angular.md @@ -0,0 +1,9 @@ +# Intro to Nx + +## 10-Minute Nx Overview + + + +## Learn Nx Fundamentals + +- [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo) diff --git a/docs/shared/getting-started/nx-and-react.md b/docs/shared/getting-started/nx-and-react.md new file mode 100644 index 0000000000..37aa38e334 --- /dev/null +++ b/docs/shared/getting-started/nx-and-react.md @@ -0,0 +1,10 @@ +# Nx and React + +## 10-Minute Nx Overview + + + +## Learn + +- [Free Nx Course on Egghead: Scale React Development with Nx](https://egghead.io/playlists/scale-react-development-with-nx-4038) +- [45-Minute Walkthrough](https://www.youtube.com/watch?v=jCf92IyR-GE) diff --git a/docs/shared/getting-started/nx-setup.md b/docs/shared/getting-started/nx-setup.md index 6f35b56d54..d15ce5cc5a 100644 --- a/docs/shared/getting-started/nx-setup.md +++ b/docs/shared/getting-started/nx-setup.md @@ -44,7 +44,7 @@ If you have an existing Create React App project, you can gain the benefits of N npx cra-to-nx ``` -For more information on adding Nx to an existing repository see the [migration guide](/react/migration/migration-cra) +For more information on adding Nx to an existing repository see the [migration guide](/default/migration/migration-cra) ## Install Nx CLI diff --git a/docs/shared/guides/adding-assets.md b/docs/shared/guides/adding-assets.md new file mode 100644 index 0000000000..7c3b2b2cdd --- /dev/null +++ b/docs/shared/guides/adding-assets.md @@ -0,0 +1,49 @@ +# Adding Images, Fonts, and Files + +With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**. + +```typescript +import React from 'react'; +import logo from './logo.png'; + +const Header = () => Logo; + +export default Header; +``` + +This import will be replaced by a string of the image path when the application builds. To reduce the number of network requests, if the image file size is less than 10 kB, then the image will be inlined using [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. + +This works in CSS files as well. + +```css +.logo { + background-image: url(./logo.png); +} +``` + +## Adding SVGs + +SVG images can be imported using the method described above. + +Alternatively, you can import SVG images as React components. + +```typescript +import React from 'react'; +import { ReactComponent as Logo } from './logo.svg'; + +const Header = () => ; + +export default Header; +``` + +This method of import allow you to work with the SVG the same way you would with any other React component. You can style it using CSS, styled-components, etc. The SVG component accepts a `title` prop, as well as any other props that the `svg` element accepts. + +Note that if you are using Next.js, you have to opt into this behavior. To import SVGs as React components with Next.js, you need to make sure that `nx.svgr` value is set to `true` in your Next.js application's `next.config.js` file: + +```js +module.exports = withNx({ + nx: { + svgr: true, + }, +}); +``` diff --git a/docs/shared/guides/deploy-nextjs-to-vercel.md b/docs/shared/guides/deploy-nextjs-to-vercel.md new file mode 100644 index 0000000000..e97c8e48b9 --- /dev/null +++ b/docs/shared/guides/deploy-nextjs-to-vercel.md @@ -0,0 +1,79 @@ +# Deploying Next.js applications to Vercel + +Starting from Nx 11, your Next.js application should already be ready for deployment to Vercel. + +## Configure your Vercel project's settings appropriately + +### New Vercel project + +1. If you are "importing" your Nx workspace's repository for the first time, make sure you do _not_ choose a root directory as part of the repo selection process (therefore leaving it to be the root of the full repo/workspace) +2. Ensure the Next.js "Framework Preset" is selected +3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For example, for an application named `tuskdesk` the value will look like this: + +```bash +npx nx build tuskdesk --prod +``` + +4. Toggle the override switch for the output directory. Point it to the `.next` directory inside the built app: + +```bash +dist/apps/tuskdesk/.next +``` + +Therefore, our full configuration (based on a repo called "nx-workspace" and a project called "tuskdesk") will look like this: + +![New Vercel Project](/shared/guides/next-deploy-vercel-1.png) + +### Existing Vercel project + +If you have an existing project on Vercel then the exact same guidance applies as for the section above, it's just that you will need to update the project's existing settings. + +When everything is updated appropriately, for our `tuskdesk` example we would see the following in our "General" settings UI: + +![Existing Vercel Project](/shared/guides/next-deploy-vercel-2.png) + +## Skipping build if the application is not affected + +One of the core features of Nx is to run code quality checks and builds only for projects that are affected by recent code changes. We can use [Vercel's ignored build step feature](https://vercel.com/docs/platform/projects#ignored-build-step) to only build our application if it is affected. + +We are going to achieve this by creating a shell script in our Nx workspace that will be invoked by Vercel. + +```sh + +# Name of the app to check. Change this to your application name! +APP=tuskdesk + +# Determine version of Nx installed +NX_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@nrwl/workspace'])") +TS_VERSION=$(node -e "console.log(require('./package.json').devDependencies['typescript'])") + +# Install @nrwl/workspace in order to run the affected command +npm install -D @nrwl/workspace@$NX_VERSION --prefer-offline +npm install -D typescript@$TS_VERSION --prefer-offline + +# Run the affected command, comparing latest commit to the one before that +npx nx affected:apps --plain --base HEAD~1 --head HEAD | grep $APP -q + +# Store result of the previous command (grep) +IS_AFFECTED=$? + +if [ $IS_AFFECTED -eq 1 ]; then + echo "🛑 - Build cancelled" + exit 0 +elif [ $IS_AFFECTED -eq 0 ]; then + echo "✅ - Build can proceed" + exit 1 +fi +``` + +There are a few points worth noting about this script. + +Firstly, you might have noticed that we are running `npm install` (feel free to use `yarn add` instead) in this script, as a result running it will take some time. Having said that, it is usually still much faster than installing all dependencies and running the build of your application unconditionally. + +Secondly, this script only compares changes introduced in a single latest commit. So if you push multiple new commits - the script will only check if your application is affected by changes in the latest commit. In the future, there should be an environment variable in Vercel to determine what the base for the affected comparison should be. + +Once you've saved this script in your Nx workspace, for example in `tools/ignore-vercel-build.sh`, we need to point Vercel to use this script. + +![Ignore build step](/shared/guides/next-deploy-vercel-3.png) + +Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Next.js projects from Nx workspaces on Vercel! diff --git a/docs/shared/guides/environment-variables.md b/docs/shared/guides/environment-variables.md new file mode 100644 index 0000000000..d701361a1d --- /dev/null +++ b/docs/shared/guides/environment-variables.md @@ -0,0 +1,85 @@ +# Environment Variables + +Environment variables are global system variables accessible by all the processes running under the Operating System (OS). Environment variables are useful to store system-wide values such as the directories to search for executable programs (PATH), OS version, Network Information, and custom variables. These env variables are passed at build time and used at the runtime of an app. + +## How to Use + +It's important to note that NX will only include in the process: + +- default env vars such as: `NODE_ENV` +- any environment variable prefixed with `NX_` such as: `NX_CUSTOM_VAR` + +Defining environment variables can vary between OSes. It’s also important to know that this is temporary for the life of the shell session. + +**Unix systems** + +In Unix systems, we need to pass the env vars before passing the (or other) commands \ + +Let's say we want to build with development mode, with env vars we can do that like so: + +```bash +NODE_ENV=development nx build myapp +``` + +And if we want to add a custom env var for the command above, it would look like: + +```bash +NODE_ENV=development NX_BUILD_NUMBER=123 nx build myapp +``` + +**Windows (cmd.exe)** + +```bash +set "NODE_ENV=development" && nx build myapp +``` + +**Windows (Powershell)** + +```bash +($env:NODE_ENV = "development") -and (nx build myapp) +``` + +## Loading Environment Variables + +By default, Nx will load any environment variables you place in the following files: + +1. `workspaceRoot/apps/my-app/.local.env` +2. `workspaceRoot/apps/my-app/.env.local` +3. `workspaceRoot/apps/my-app/.env` +4. `workspaceRoot/.local.env` +5. `workspaceRoot/.env.local` +6. `workspaceRoot/.env` + +Order is important. Nx will move through the above list, ignoring files it can't find, and loading environment variables into the current process for the ones it can find. If it finds a variable that has already been loaded into the process, it will ignore it. It does this for two reasons: + +1. Developers can't accidentally overwrite important system level variables (like `NODE_ENV`) +2. Allows developers to create `.env.local` or `.local.env` files for their local environment and override any project defaults set in `.env` + +For example: + +1. `workspaceRoot/apps/my-app/.env.local` contains `AUTH_URL=http://localhost/auth` +2. `workspaceRoot/apps/my-app/.env` contains `AUTH_URL=https://prod-url.com/auth` +3. Nx will first load the variables from `apps/my-app/.env.local` into the process. When it tries to load the variables from `apps/my-app/.env`, it will notice that `AUTH_URL` already exists, so it will ignore it. + +We recommend nesting your **app** specific `env` files in `apps/your-app`, and creating workspace/root level `env` files for workspace-specific settings (like the [Nx Cloud token](/{{framework}}/using-nx/caching#distributed-computation-caching)). + +### Pointing to custom env files + +If you want to load variables from `env` files other than the ones listed above: + +1. Use the [env-cmd](https://www.npmjs.com/package/env-cmd) package: `env-cmd -f .qa.env nx serve` +2. Use the `envFile` option of the [run-commands](/{{framework}}/workspace/run-commands-executor#envfile) builder and execute your command inside of the builder + +## Using Environment Variables in index.html + +Nx supports interpolating environment variables into your `index.html` file for React and Web applications. + +To interpolate an environment variable named `NX_DOMAIN_NAME` into your `index.html`, surround it with `%` symbols like so: + +```html + + +

The domain name is %NX_DOMAIN_NAME%.

+ + +``` diff --git a/docs/shared/guides/js-and-ts.md b/docs/shared/guides/js-and-ts.md new file mode 100644 index 0000000000..542d457d3d --- /dev/null +++ b/docs/shared/guides/js-and-ts.md @@ -0,0 +1,14 @@ +# JavaScript and TypeScript + +Nx is a general-purpose build system and a general-purpose CLI. It works with JavaScript, TypeScript, Java, C#, Go, etc.. The core plugins Nx comes with do work best with JavaScript or TypeScript. + +TypeScript is a great choice for many teams, but not for everyone. If you want to use Nx with JavaScript, simply pass `--js` to all generate commands, as follows: + +```bash +nx g @nrwl/react:app myapp --js +nx g @nrwl/react:component mycmp --project=myapp --js +``` + +You can build/test/lint/serve your applications and libraries the same way whether you use JavaScript and TypeScript. You can also mix and match them. + +Regardless whether you use JavaScript or TypeScript, you will have a `tsconfig.base.json` file at the root of the workspace. **It's not used to build the applications and libraries in the workspace. It's only used to improve the editor experience.** diff --git a/docs/shared/guides/misc-data-persistence.md b/docs/shared/guides/misc-data-persistence.md new file mode 100644 index 0000000000..d5f0bdd266 --- /dev/null +++ b/docs/shared/guides/misc-data-persistence.md @@ -0,0 +1,216 @@ +# Using DataPersistence + +Managing state is a hard problem. We need to coordinate multiple backends, web workers, and UI components, all of which update the state concurrently. + +What should we store in memory and what in the URL? What about the local UI state? How do we synchronize the persistent state, the URL, and the state on the server? All these questions have to be answered when designing the state management of our applications. **Nx** provides a set of helper functions that enables the developer to manage state in Angular with an intentional synchronization strategy and handle error state. Check out the [Managing State in Angular Applications using NgRx](https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b) for more detailed example of the state problem Nx is solving. + +## Optimistic Updates + +For a better user experience, the `optimisticUpdate` operator updates the state on the client application first, before updating the data on the server-side. While it addresses fetching data in order, removing the race conditions and handling error, it is optimistic about not failing to update the server. In case of a failure, when using `optimisticUpdate`, the local state on the client is already updated. The developer must provide an undo action to restore the previous state to keep it consistent with the server state. The error handling must be done in the callback, or by means of the undo action. + +```typescript +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { optimisticUpdate } from '@nrwl/angular'; + +@Injectable() +class TodoEffects { + updateTodo$ = createEffect(() => + this.actions$.pipe( + ofType('UPDATE_TODO'), + optimisticUpdate({ + // provides an action + run: (action: UpdateTodo) => { + return this.backend.updateTodo(action.todo.id, action.todo).pipe( + mapTo({ + type: 'UPDATE_TODO_SUCCESS', + }) + ); + }, + undoAction: (action: UpdateTodo, error: any) => { + // dispatch an undo action to undo the changes in the client state + return { + type: 'UNDO_TODO_UPDATE', + todo: action.todo, + }; + }, + }) + ) + ); + + constructor(private actions$: Actions, private backend: Backend) {} +} +``` + +## Pessimistic Updates + +To achieve a more reliable data synchronization, the `pessimisticUpdate` operator updates the server data first. When the change is reflected in the server state, changes the client state by dispatching an action. `pessimisticUpdate` method enforces the order of the fetches and error handling. + +```typescript +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { pessimisticUpdate } from '@nrwl/angular'; + +@Injectable() +class TodoEffects { + updateTodo$ = createEffect(() => + this.actions$.pipe( + ofType('UPDATE_TODO'), + pessimisticUpdate({ + // provides an action + run: (action: UpdateTodo) => { + // update the backend first, and then dispatch an action that will + // update the client side + return this.backend.updateTodo(action.todo.id, action.todo).pipe( + map((updated) => ({ + type: 'UPDATE_TODO_SUCCESS', + todo: updated, + })) + ); + }, + onError: (action: UpdateTodo, error: any) => { + // we don't need to undo the changes on the client side. + // we can dispatch an error, or simply log the error here and return `null` + return null; + }, + }) + ) + ); + + constructor(private actions$: Actions, private backend: Backend) {} +} +``` + +## Data Fetching + +The `fetch` operator provides consistency when fetching data. If there are multiple requests scheduled for the same action, it will only run the last one. + +```typescript +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { fetch } from '@nrwl/angular'; + +@Injectable() +class TodoEffects { + loadTodos$ = createEffect(() => + this.actions$.pipe( + ofType('GET_TODOS'), + fetch({ + // provides an action + run: (a: GetTodos) => { + return this.backend.getAll().pipe( + map((response) => ({ + type: 'TODOS', + todos: response.todos, + })) + ); + }, + + onError: (action: GetTodos, error: any) => { + // dispatch an undo action to undo the changes in the client state + return null; + }, + }) + ) + ); + + constructor(private actions$: Actions, private backend: Backend) {} +} +``` + +This is correct, but we can improve the performance by supplying an id of the data by using an accessor function and adding concurrency to the fetch action for different ToDo's. + +```typescript +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { fetch } from '@nrwl/angular'; + +@Injectable() +class TodoEffects { + loadTodo$ = createEffect(() => + this.actions$.pipe( + ofType('GET_TODO'), + fetch({ + id: (todo: GetTodo) => { + return todo.id; + }, + + // provides an action + run: (todo: GetTodo) => { + return this.backend.getTodo(todo.id).map((response) => ({ + type: 'LOAD_TODO_SUCCESS', + todo: response.todo, + })); + }, + + onError: (action: GetTodo, error: any) => { + // dispatch an undo action to undo the changes in the client state + return null; + }, + }) + ) + ); + + constructor(private actions$: Actions, private backend: Backend) {} +} +``` + +With this setup, the requests for Todo will run concurrently with the requests for Todo 2. + +## Data Fetching On Router Navigation + +Since the user can always interact with the URL directly, we should treat the router as the source of truth and the initiator of actions. In other words, the router should invoke the reducer, not the other way around. + +When our state depends on navigation, we can not assume the route change happened when a new url is triggered but when we actually know the user was able to navigate to the url. The `navigation` operator checks if an activated router state contains the passed in component type, and, if it does, runs the `run` callback. It provides the activated snapshot associated with the component and the current state. And it only runs the last request. + +```typescript +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { navigation } from '@nrwl/angular'; + +@Injectable() +class TodoEffects { + loadTodo$ = createEffect(() => + this.actions$.pipe( + // listens for the routerNavigation action from @ngrx/router-store + navigation(TodoComponent, { + run: (activatedRouteSnapshot: ActivatedRouteSnapshot) => { + return this.backend + .fetchTodo(activatedRouteSnapshot.params['id']) + .pipe( + map((todo) => ({ + type: 'LOAD_TODO_SUCCESS', + todo: todo, + })) + ); + }, + + onError: ( + activatedRouteSnapshot: ActivatedRouteSnapshot, + error: any + ) => { + // we can log and error here and return null + // we can also navigate back + return null; + }, + }) + ) + ); + + constructor(private action$: Actions, private backend: Backend) {} +} +``` + +The StoreRouterConnectingModule must be configured with an appropriate serializer. The `DefaultRouterStateSerializer` provides the full router state instead of the `MinimalRouterStateSerializer` that is used without configuration. + +```typescript +import { NgModule } from '@angular/core'; +import { + StoreRouterConnectingModule, + DefaultRouterStateSerializer, +} from '@ngrx/router-store'; + +@NgModule({ + imports: [ + StoreRouterConnectingModule.forRoot({ + serializer: DefaultRouterStateSerializer, + }), + ], +}) +export class TodosModule {} +``` diff --git a/docs/shared/guides/misc-ngrx.md b/docs/shared/guides/misc-ngrx.md new file mode 100644 index 0000000000..8113c3513a --- /dev/null +++ b/docs/shared/guides/misc-ngrx.md @@ -0,0 +1,119 @@ +# State Management with NgRx + +Using [NgRx](https://ngrx.io) for state management in an Angular application allows you to +build out application flows that track unique events and manage the state of shared data in a reactive, explicit, and consistent way. + +## Overview + +Nx provides a schematic to build out a new NgRx feature area that manages shared state. + +The **@nrwl/angular** package has an `ngrx` schematic to generate files that implement best practices when using NgRx for state management. This schematic generates source files that include enhancements to NgRx for data persistence strategies, and simplified testing. + +The `ngrx` schematic generates an NgRx feature set containing the following files: + +- `actions` - Express unique events throughout your application. +- `reducer` - Handle state changes from dispatched actions to perform state changes in an immutable way. +- `effects` - Handle side effects for isolating external interactions from UI components. +- `selectors` - Composable functions that select pieces of state and update when their inputs change. +- `facade` - Optional class that provides further encapsulation of NgRx from your component. + +> The `ngrx` schematic only provides a sub-set of schematics for the NgRx libraries. See [@ngrx/schematics](https://ngrx.io/guide/schematics) for the full set of available schematics. + +## Command + +The following command is used to run the `ngrx` schematic: + +```bash +ng g @nrwl/angular:ngrx --module= --defaults [options] +``` + +> Note: the `name` and the `--module=` arguments are required. The `defaults` option chooses the recommended defaults for the schematic, unless you override them. + +The most common additional options are: + +- `root` - Set up the initial NgModule imports for NgRx Store, Effects, Router-Store, and Store DevTools. +- `syntax` - NgRx introduced new creator functions for actions, reducers, and effects that provide the same type-safety with less code than action classes. +- `facade` - Optional. If you prefer to further encapsulate NgRx from your components, add an injectable facade. See the blog [Better State Management with Facades](https://blog.nrwl.io/nrwl-nx-6-2-angular-6-1-and-better-state-management-e139da2cd074#cb93) for details. + +See the [API Docs](/{{framework}}/angular/ngrx) for detailed descriptions of all the available options. Also visit the [NgRx](https://ngrx.io) website for more guides and documentation about the libraries. + +--- + +## Initial Setup + +To get started with NgRx in an Angular application, you set up the root level store. As your application grows, you add feature level states, ensuring that your code follows a common pattern each time. + +The example below shows you how to setup NgRx in the root of your application. + +```bash +ng g @nrwl/angular:ngrx app --module=apps//src/app/app.module.ts --root +``` + +The above command applies the following changes to the provided module: + +- Registers `StoreModule.forRoot({})` in the imports array for state management, with recommended runtime checks enabled for maintaining immutable actions and state. +- Registers `EffectsModule.forRoot([])` in the `imports` array for isolation of side effects. +- Registers `StoreRouterConnectingModule.forRoot()` in the `imports` array for integration with the [Angular Router](https://angular.io/guide/router). +- Registers `StoreDevtools.instrument()` in the `imports` array for integration with the [Redux Devtools browser extension](http://extension.remotedev.io/). + +You manage separate slices of state using libraries and feature states. + +## Feature Workflow + +When building new features using NgRx, you want to manage the state from within a separate library. This allows your +state to be easily shared across other libraries and applications. The steps below go through the workflow of using NgRx within the context of a library. + +The example below generates a library to begin a new feature. For this example, `products` is used as the library name. + +```bash +ng g @nrwl/angular:lib products +``` + +To manage the feature state: + +- Use the `ngrx` schematic with the feature name in plural form, such as `products`. +- Provide a path to the `products` library module. + +```bash +ng g @nrwl/angular:ngrx products --module=libs/products/src/lib/products.module.ts --directory +state/products --defaults +``` + +> Use the `--facade` option to generate an injectable Facade class along with the feature. + +The following files are created, or updated: + +```treeview +myorg/ +├── apps/ +└── libs/ + └── products/ + └── src/ + ├── lib/ + │ ├── +state/ + │ │ ├── products.actions.ts + │ │ ├── products.effects.ts + │ │ ├── products.effects.spec.ts + │ │ ├── products.facade.ts # optional + │ │ ├── products.facade.spec.ts # optional + │ │ ├── products.models.ts + │ │ ├── products.reducer.ts + │ │ ├── products.reducer.spec.ts + │ │ ├── products.selectors.ts + │ │ └── products.selectors.spec.ts + │ ├── products.module.spec.ts + │ └── products.module.ts + └── index.ts +``` + +The above command also does the following changes: + +- Updates the feature module and registers `StoreModule.forFeature()` with the name of your feature state in the `imports` array. +- Updates the feature module and registers `EffectsModule.forFeature()` in the `imports` array. + +The feature library's barrel `index.ts` is also updated to export the updated _public API_ for the state including: + +- The NgRx selectors. +- The NgRx feature reducer. +- The optional facade class for the NgRx feature. + +> When generating multiple feature states within a single library, make sure there are no naming collisions in the barrel `index.ts` file. diff --git a/docs/shared/guides/next-deploy-vercel-1.png b/docs/shared/guides/next-deploy-vercel-1.png new file mode 100644 index 0000000000..4aba0a892a Binary files /dev/null and b/docs/shared/guides/next-deploy-vercel-1.png differ diff --git a/docs/shared/guides/next-deploy-vercel-2.png b/docs/shared/guides/next-deploy-vercel-2.png new file mode 100644 index 0000000000..c609cc7f1b Binary files /dev/null and b/docs/shared/guides/next-deploy-vercel-2.png differ diff --git a/docs/shared/guides/next-deploy-vercel-3.png b/docs/shared/guides/next-deploy-vercel-3.png new file mode 100644 index 0000000000..e8107659cb Binary files /dev/null and b/docs/shared/guides/next-deploy-vercel-3.png differ diff --git a/docs/shared/guides/nextjs.md b/docs/shared/guides/nextjs.md new file mode 100644 index 0000000000..d0b6546850 --- /dev/null +++ b/docs/shared/guides/nextjs.md @@ -0,0 +1,250 @@ +# Next.js with Nx + +![](/shared/nextjs-logo.png) + +Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Cypress](/{{version}}/{{framework}}/cypress/overview), Storybook, Jest, and more. + +In this guide we will show you how to develop [Next.js](https://nextjs.org/) applications with Nx. + +## Creating Nx Workspace + +The easiest way to create your workspace is via `npx`. + +```bash +npx create-nx-workspace happynrwl \ +--preset=next \ +--style=css \ +--appName=tuskdesk +``` + +**Note:** You can also run the command without arguments to go through the interactive prompts. + +```bash +npx create-nx-workspace happynrwl +``` + +Once the command completes, the workspace will look as follows: + +```treeview +happynrwl/ +├── apps +│ ├── tuskdesk +│ │ ├── index.d.ts +│ │ ├── jest.config.js +│ │ ├── next-env.d.ts +│ │ ├── next.config.js +│ │ ├── pages +│ │ │ ├── _app.tsx +│ │ │ ├── index.module.css +│ │ │ ├── index.tsx +│ │ │ └── styles.css +│ │ ├── public +│ │ │ ├── nx-logo-white.svg +│ │ │ └── star.svg +│ │ ├── specs +│ │ │ └── index.spec.tsx +│ │ ├── tsconfig.json +│ │ └── tsconfig.spec.json +│ └── tuskdesk-e2e +│ ├── cypress.json +│ ├── src +│ │ ├── fixtures +│ │ ├── integration +│ │ ├── plugins +│ │ └── support +│ ├── tsconfig.e2e.json +│ └── tsconfig.json +├── babel.config.json +├── jest.config.js +├── jest.preset.js +├── libs +├── nx.json +├── package-lock.json +├── package.json +├── tools +│ ├── generators +│ └── tsconfig.tools.json +├── tsconfig.base.json +└── workspace.json +``` + +Run `npx nx serve tuskdesk` to start the dev server at http://localhost:4200. Try out other commands as well. + +- `nx lint tuskdesk` to lint the application +- `nx test tuskdesk` to test the application using Jest +- `nx e2e tuskdesk-e2e` to test the application using Cypress +- `nx build tuskdesk` to build the application +- `nx serve tuskdesk --prod` to serve the application in the production mode + +When using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work. + +### Adding Next.js to an Existing Workspace + +For existing Nx workspaces, install the `@nrwl/next` package to add Next.js capabilities to it. + +```bash +npm install @nrwl/next + +# Or with yarn +yarn add @nrwl/next +``` + +## Generating an Application + +To create additional Next.js apps run: + +```bash +npx nx g @nrwl/next:app +``` + +## Generating a Library + +Nx allows you to create libraries with just one command. Some reasons you might want to create a library include: + +- Share code between applications +- Publish a package to be used outside the monorepo +- Better visualize the architecture using `npx nx dep-graph` + +For more information on Nx libraries, see our documentation on [Creating Libraries](/{{version}}/{{framework}}/structure/creating-libraries) +and [Library Types](/{{version}}/{{framework}}/structure/library-types). + +To generate a new library run: + +```bash +npx nx g @nrwl/react:lib shared-ui-components +``` + +And you will see the following: + +```treeview +happynrwl/ +├── apps +│ └── tuskdesk +│ └── tuskdesk-e2e +├── babel.config.json +├── jest.config.js +├── jest.preset.js +├── libs +│ └── shared-ui-layout +│ ├── README.md +│ ├── jest.config.js +│ ├── src +│ │ ├── index.ts +│ │ └── lib +│ ├── tsconfig.json +│ ├── tsconfig.lib.json +│ └── tsconfig.spec.json +├── nx.json +├── package-lock.json +├── package.json +├── tools +├── tsconfig.base.json +└── workspace.json +``` + +Run: + +- `npx nx test shared-ui-layout` to test the library +- `npx nx lint shared-ui-layout` to lint the library + +### Using Nx Library in your Application + +You can import the `shared-ui-layout` library in your application as follows. + +```typescript jsx +// apps/tuskapp/pages/index.tsx +import { SharedUiLayout } from '@happynrwl/shared-ui-layout'; + +export function Index() { + return ( + +

The main content

+ + ); +} + +export default Index; +``` + +That's it! There is no need to build the library prior to using it. When you update your library, the Next.js application will automatically pick up the changes. + +### Publishable libraries + +For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options. + +```bash +npx nx g @nrwl/react:lib shared-ui-components --publishable --importPath=@happynrwl/ui-components +``` + +Run `npx nx build shared-ui-layout` to build the library. It will generate the following: + +```treeview +dist/libs/shared-ui-layout/ +├── README.md +├── index.d.ts +├── lib +│ └── shared-ui-layout.d.ts +├── package.json +├── shared-ui-layout.esm.css +├── shared-ui-layout.esm.js +├── shared-ui-layout.umd.css +└── shared-ui-layout.umd.js +``` + +This dist folder is ready to be published to a registry. + +## Generating Pages and Components + +Nx also provides commands to quickly generate new pages and components for your application. + +- `npx nx g @nrwl/next:page about` to add an about page +- `npx nx g @nrwl/next:component banner` to add a banner component + +Running the above commands will result in: + +```treeview +apps/tuskdesk/ +├── components +│ └── banner +│ ├── banner.module.css +│ ├── banner.spec.tsx +│ └── banner.tsx +├── index.d.ts +├── jest.config.js +├── next-env.d.ts +├── next.config.js +├── pages +│ ├── _app.tsx +│ ├── about.module.css +│ ├── about.tsx +│ ├── index.module.css +│ ├── index.tsx +│ └── styles.css +├── public +├── specs +├── tsconfig.json +└── tsconfig.spec.json +``` + +Nx generates components with tests by default. For pages, you can pass the `--withTests` option to generate tests under the `specs` folder. + +Run the tests again for the application: `npx nx test tuskdesk`. + +## Code Sharing + +Without Nx, creating a new shared library can take from several hours or even weeks: a new repo needs to be provisioned, CI needs to be set up, etc.. In an Nx Workspace, it only takes minutes. + +You can share React components between multiple Next.js applications. You can also share web components between Next.js and plain React applications. You can even share code between the backend and the frontend. All can be done without any unnecessary ceremony. + +## Deploying your Next.js Application + +Once you are ready to deploy your Next.js application, you have absolute freedom to choose any hosting provider that fits your needs. + +You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/default/guides/deploy-nextjs-to-vercel). + +## Resources + +Here are other resources that you may find useful to learn more about Next.js and Nx. + +- **Blog post:** [Building a blog with Next.js and Nx Series](https://blog.nrwl.io/create-a-next-js-web-app-with-nx-bcf2ab54613) by Juri Strumpflohner +- **Video tutorial:** [Typescript NX Monorepo with NextJS and Express](https://www.youtube.com/watch?v=WOfL5q2HznI) by Jack Herrington diff --git a/docs/shared/guides/nx-devkit-angular-devkit.md b/docs/shared/guides/nx-devkit-angular-devkit.md new file mode 100644 index 0000000000..bea39f2bd0 --- /dev/null +++ b/docs/shared/guides/nx-devkit-angular-devkit.md @@ -0,0 +1,199 @@ +# Nx Devkit and Angular Devkit + +> Note: this document covers the difference between Nx Devkit and Angular Devkit. See the [Nx Devkit](/{{framework}}/getting-started/nx-devkit) guide for more in-depth details about Nx Devkit. + +Nx comes with a devkit to write generators and executors, but you can also use Angular devkit (schematics and builders). In other words, you can use an Angular schematic to implement a generator, and you can use an Angular builder to implement an executor. + +**What are the differences between Nx Devkit and Angular Devkit?** + +## Generators + +The following is a generator written using Nx Devkit: + +```typescript +import { Tree, formatFiles, generateFiles } from '@nrwl/devkit'; +import * as path from 'path'; + +interface Schema { + name: string; + skipFormat: boolean; +} + +export default async function (tree: Tree, options: Schema) { + generateFiles( + tree, + path.join(__dirname, 'files'), + path.join('tools/generators', schema.name), + options + ); + if (!schema.skipFormat) { + await formatFiles(tree); + } +} +``` + +The following is an analogous generator written as an Angular Schematic. + +```typescript +import { + apply, + branchAndMerge, + chain, + mergeWith, + Rule, + template, + url, + move, +} from '@angular-devkit/schematics'; +import { formatFiles } from '@nrwl/workspace'; +import { toFileName } from '@nrwl/workspace'; + +interface Schema { + name: string; + skipFormat: boolean; +} + +export default function (options: Schema): Rule { + const templateSource = apply(url('./files'), [ + template({ + dot: '.', + tmpl: '', + ...(options as any), + }), + move('tools/generators'), + ]); + return chain([ + branchAndMerge(chain([mergeWith(templateSource)])), + formatFiles(options), + ]); +} +``` + +### Notable Differences + +- Nx Devkit generators do not use partial application. An Angular Schematic returns a rule that is then invoked with a tree. +- Nx Devkit generators do not use RxJS observables. Instead you invoke the helpers directly, which makes them more debuggable. As you step through the generator you can see the tree being updated. +- There are more affordances for commonly used operations. For instance, `chain([mergeWith(apply(url` is replaced with `generateFiles`) +- Nx Devkit generators return a function that performs side effects. Angular Schematics have to create a custom task runner and register a task using it. +- Nx Devkit generators are composed as any other JS function. You do need to go through a special resolution step (`externalSchematic`) that is required when using Angular Schematics. +- No special utilities are needed to test Nx Devkit generators. Special utilities are needed to test Angular Schematics. + +### Conversions + +The Nx CLI can invoke Nx Generator or Angular Schematics directly. When the user runs: + +```bash +nx g mygenerator params +ng g mygenerator params # will work exactly the same same as the line above +``` + +The Nx CLI will see what type of generator `mygenerator` is and will invoke it using the right machinery. The user doesn't have to know how the generator is implemented. + +At times, however, it might be useful to use an Nx Devkit generator in an Angular Schematic or vice versa. + +**Making an Angular Schematic out of Nx Devkit Generator:** + +First, you need to + +```typescript +export async function mygenerator(tree: Tree, options: Schema) { + // ... +} +export const mygeneratorSchematic = convertNxGenerator(mygenerator); +``` + +Then, you might need to register it in the `collections.json`: + +```json +{ + "name": "Nx React", + "version": "0.1", + "extends": ["@nrwl/workspace"], + "schematics": { + "mygenerator": { + "factory": "./src/generators/mygenerator/mygenerator#mygeneratorSchematic", + "schema": "./src/generators/mygenerator/schema.json" + } + }, + "generators": { + "init": { + "factory": "./src/generators/mygenerator/mygenerator#mygenerator", + "schema": "./src/generators/mygenerator/schema.json" + } + } +} +``` + +**Making an Nx Devkit Generator out of Angular Schematic:** + +```typescript +export const libraryGenerator = wrapAngularDevkitSchematic( + '@nrwl/angular', + 'library' +); + +export async function mygenerator(tree: Tree, options: Schema) { + await libraryGenerator(tree, options); +} +``` + +## Executors + +The following is an executor written using Nx Devkit: + +```typescript +interface Schema { + message: string; + allCaps: boolean; +} + +export default async function ( + options: Schema, + context: ExecutorContext +): Promise<{ success: true }> { + if (options.allCaps) { + console.log(options.message.toUpperCase()); + } else { + console.log(options.message); + } + return { success: true }; +} +``` + +The following is an analogous executor written as an Angular builder: + +```typescript +interface Schema { + message: string; + allCaps: boolean; +} +export function run( + options: Schema, + context: BuilderContext +): Observable<{ success: true }> { + if (options.allCaps) { + console.log(options.message.toUpperCase()); + } else { + console.log(options.message); + } + return of({ success: true }); +} +export default createBuilder(run); +``` + +### Notable Differences + +- Nx Devkit executors return a Promise (or async iterable). If you want, you can always convert an observable to a promise or an async iterable. See [Using Rxjs Observables](/{{framework}}/executors/using-builders#using-rxjs-observables) +- Nx Devkit executors do not have to be wrapped using `createBuilder`. + +The schema files for both Nx Devkit executors and Angular Builders are the same. Nx can run both of them in the same way. + +## When to Use What + +If you are writing an Nx plugin, use Nx Devkit. It's **much** easier to use and debug. It has better docs and more people supporting it. + +Do you have to rewrite your Nx Plugin if it is written using Angular Devkit? No. Nx supports both and will always support both. And, most importantly, the end user might not even know what you used to write a generator or an executor. + +``` + +``` diff --git a/docs/shared/guides/setup-incremental-builds-angular.md b/docs/shared/guides/setup-incremental-builds-angular.md new file mode 100644 index 0000000000..a364c5de85 --- /dev/null +++ b/docs/shared/guides/setup-incremental-builds-angular.md @@ -0,0 +1,135 @@ +# Setup incremental builds for Angular applications + +In this guide we’ll specifically look into which changes need to be made to enable incremental builds for Angular applications. + +> Incremental builds requires Nx version 10.4.0 or later. + +## Requirements + +It’s required that you run the Angular compatibility compiler (`ngcc`) after every package installation if you have Ivy enabled. This comes configured by default in every Nx workspace. The incremental build relies on the fact that `ngcc` must have already been run. You can check your `package.json` and make sure you have the following: + +```json +{ + ... + "scripts": { + ... + "postinstall": "ngcc --properties es2015 browser module main", + ... + } + ... +} +``` + +> Please note that `ngcc` doesn’t support `pnpm` ([#32087](https://github.com/angular/angular/issues/32087#issuecomment-523225437) and [#38023](https://github.com/angular/angular/issues/38023#issuecomment-732423078)), so you need to use either `yarn` or `npm`. + +## Use buildable libraries + +To enable incremental builds you need to use buildable libraries. + +You can generate a new buildable library with: + +```bash +nx g @nrwl/angular:lib mylib --buildable +``` + +The generated buildable library uses the `@nrwl/angular:ng-packagr-lite` executor which is optimized for the incremental builds scenario: + +```json +"mylib": { + "projectType": "library", + ... + "architect": { + "build": { + "builder": "@nrwl/angular:ng-packagr-lite", + "outputs": ["dist/libs/mylib"], + "options": {...}, + "configurations": {...} + }, + "lint": {...}, + "test": {...} + }, + ... +}, +``` + +> Please note that it is important to keep the `outputs` property in sync with the `dest` property in the file `ng-package.json` located inside the library root. When a library is generated, this is configured correctly, but if the path is later changed in `ng-package.json`, it needs to be updated as well in the project configuration. + +## Adjust the app executor + +Change your Angular app’s “build” target executor to `@nrwl/angular:webpack-browser` and the “serve” target executor to `@nrwl/web:file-server` as shown below: + +```json +"app0": { + "projectType": "application", + ... + "architect": { + "build": { + "builder": "@nrwl/angular:webpack-browser", + "outputs": ["{options.outputPath}"], + "options": { ... } + "configurations": { ... } + }, + "serve": { + "builder": "@nrwl/web:file-server", + "options": { + "buildTarget": "app0:build" + }, + "configurations": { + "production": { + "buildTarget": "app0:build:production" + } + } + }, + ... + } +}, +``` + +## Running and serving incremental builds + +To build an app incrementally use the following command: + +```bash +nx build myapp --with-deps --parallel +``` + +To serve an app incrementally use this command: + +```bash +nx serve myapp --with-deps --parallel +``` + +Note: you can specify the `--with-deps` and `--parallel` flags as part of the options property on the file-server executor in your `angular.json` or `workspace.json`. The file-server executor will pass those to the `nx build` command it invokes. + +```json +"app0": { + "projectType": "application", + ... + "architect": { + "build": { + "builder": "@nrwl/angular:webpack-browser", + "outputs": ["{options.outputPath}"], + "options": { ... } + "configurations": { ... } + }, + "serve": { + "builder": "@nrwl/web:file-server", + "options": { + "buildTarget": "app0:build", + "withDeps": true, + "parallel": true + }, + "configurations": { + "production": { + "buildTarget": "app0:build:production" + } + } + }, + ... + } +}, +``` + +## Example repository + +Check out the [nx-incremental-large-repo](https://github.com/nrwl/nx-incremental-large-repo) for a live example. diff --git a/docs/shared/guides/setup-mfe-with-angular.md b/docs/shared/guides/setup-mfe-with-angular.md new file mode 100644 index 0000000000..bd78463bba --- /dev/null +++ b/docs/shared/guides/setup-mfe-with-angular.md @@ -0,0 +1,432 @@ +# How to setup a Micro Frontend with Angular and Nx + +[Webpack 5](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) introduced a [Module Federation Plugin](https://webpack.js.org/concepts/module-federation/#modulefederationplugin-high-level) enabling multiple, independently built and deployed bundles of code to form a single application. This is the foundation of Micro Frontend Architecture and the Module Federation Plugin makes implementing such an architecture much simpler. +With Angular 12 adding support for Webpack 5 it increases the viability of scaffolding a Micro Frontend architecture with Angular. + +We made some changes to our `@nrwl/angular:app` generator to aid in the scaffolding of Module Federation configuration required for setting up a Micro Frontend Architecture. + +Therefore, using Nx it can be fairly straightforward to scaffold and build a Micro Frontend Architecture from a monorepo with all the additional benefits of Nx. + +In this guide, we'll show you to how setup a Micro Frontend Architecture with Nx and Angular. + +_NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, `import.meta` cannot be used outside of a module, and the script that is coming from is `styles.js`. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the `styles.js` file to the `index.html` in a `