miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(core): use shell code blocks (#12587)

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-10-13 17:25:40 -04:00 committed by GitHub
parent b23f62f864
commit 1e5297edfc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
126 changed files with 473 additions and 473 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/generated/cli/generate.md
View File

@ -9,11 +9,11 @@ Runs a generator that creates and/or modifies files based on a generator from a
## Usage
```bash
```shell
nx generate <collection:generator>
```
```bash
```shell
nx g <generator>
```
@ -23,43 +23,43 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Generate a new Angular application:
```bash
```shell
nx generate @nrwl/angular:app myapp
```
Generate a new React application:
```bash
```shell
nx generate @nrwl/react:app myapp
```
Generate a new web component application:
```bash
```shell
nx generate @nrwl/web:app myapp
```
Generate a new Node application:
```bash
```shell
nx generate @nrwl/node:app myapp
```
Generate a new Angular library application:
```bash
```shell
nx generate @nrwl/angular:library mylibrary
```
Generate a new React library application:
```bash
```shell
nx generate @nrwl/react:library mylibrary
```
Generate a new Node library application:
```bash
```shell
nx generate @nrwl/node:library mylibrary
```

6
docs/generated/cli/run.md
View File

@ -9,7 +9,7 @@ Runs an Architect target with an optional custom builder configuration defined i
## Usage
```bash
```shell
nx run <target> [options]
```
@ -19,13 +19,13 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Run the `build` target for the `myapp` :
```bash
```shell
nx run myapp:build
```
Run the `build` target for the `myapp` project with a `production` configuration:
```bash
```shell
nx run myapp:build:production
```

2
docs/generated/packages/angular.json
View File

@ -11,7 +11,7 @@
"id": "overview",
"path": "/packages/angular",
"file": "shared/angular-plugin",
"content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n - Micro Frontends\n - Libraries, both internal to your codebase and publishable to npm\n - Upgrading AngularJS applications\n - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```bash\nyarn add -D @nrwl/angular\n```\n\n```bash\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```bash\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```bash\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```bash\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```bash\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
"content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n - Micro Frontends\n - Libraries, both internal to your codebase and publishable to npm\n - Upgrading AngularJS applications\n - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```shell\nyarn add -D @nrwl/angular\n```\n\n```shell\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```shell\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```shell\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```shell\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```shell\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
},
{
"name": "Angular and Nx Version Matrix",

6
docs/generated/packages/cypress.json
View File

@ -11,19 +11,19 @@
"id": "overview",
"path": "/packages/cypress",
"file": "shared/cypress-plugin",
"content": "Cypress is a test runner built for the modern web. It has a lot of great features:\n\n- Time travel\n- Real-time reloads\n- Automatic waiting\n- Spies, stubs, and clocks\n- Network traffic control\n- Screenshots and videos\n\n## Setting Up Cypress\n\n> Info about [Cypress Component Testing can be found here](/cypress/cypress-component-testing)\n\nIf the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.\n\n```bash\nyarn add --dev @nrwl/cypress\n```\n\n```bash\nnpm install --save-dev @nrwl/cypress\n```\n\n## E2E Testing\n\nBy default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.\n\n```bash\nnx g @nrwl/web:app frontend\n```\n\n### Creating a Cypress E2E project for an existing project\n\nTo generate an E2E project based on an existing project, run the following generator\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name\n```\n\nOptionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200\n```\n\nReplace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.\n\n### Testing Applications\n\nRun `nx e2e frontend-e2e` to execute e2e tests with Cypress.\n\nYou can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/recipe/use-executor-configurations#use-executor-configurations)\n\n```bash\nnx e2e frontend-e2e --configuration=production\n```\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/cypress/apps/frontend/screenshots` and `dist/cypress/apps/frontend/videos`.\n\n### Watching for Changes (Headed Mode)\n\nWith, `nx e2e frontend-e2e --watch` Cypress will start in headed mode where you can see your application being tested.\n\nRunning Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application\nrunning and Cypress will re-run those tests as you enhance and add to the suite.\n\n```bash\nnx e2e frontend-e2e --watch\n```\n\n### Specifying a Custom Url to Test\n\nThe `baseUrl` property provides you the ability to test an application hosted on a specific domain.\n\n```bash\nnx e2e frontend-e2e --baseUrl=https://frontend.com\n```\n\n> If no `baseUrl` and no `devServerTarget` are provided, Cypress will expect to have the `baseUrl` property in\n> the cypress config file, or will error.\n\n## Using cypress.config.ts\n\nIf you need to fine tune your Cypress setup, you can do so by modifying `cypress.config.ts` in the project root. For\ninstance,\nyou can easily add your `projectId` to save all the screenshots and videos into your Cypress dashboard. The complete\nconfiguration is documented\non [the official website](https://docs.cypress.io/guides/references/configuration.html#Options).\n\n## Environment Variables\n\nIf you're needing to pass a variable to cypress that you wish to not commit to your repository, i.e. API keys, or dynamic values based on configurations, i.e. API Urls. This is where [Cypress environment variables](https://docs.cypress.io/guides/guides/environment-variables) can be used.\n\nThere are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](https://nx.dev/packages/cypress/executors/cypress#env) or the commandline.\n\nCreate a `cypress.env.json` file in the projects root i.e. `apps/my-cool-app-e2e/cypress.env.json`. Cypress will automatically pick up this file. This method is helpful for configurations that you want to not commit. Just don't forget to add the file to the `.gitignore` and add documentation so people in your repo know what values to popluate in their local copy of the `cypress.env.json` file.\n\nUsing [@nrwl/cypress:cypress](/packages/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.\n\nOptionally, you can pass environment variables via the commandline with the `--env` flag.\n\n{% callout type=\"warning\" title=\"Executor options and --env\" %}\nWhen using the `--env` flag, this will not be merged with any values used in the `env` executor option.\n{% /callout %}\n\n```bash\nnx e2e frontend-e2e --env.API_URL=\"https://api.my-nx-website.com\" --env.API_KEY=\"abc-123\"\n```\n"
"content": "Cypress is a test runner built for the modern web. It has a lot of great features:\n\n- Time travel\n- Real-time reloads\n- Automatic waiting\n- Spies, stubs, and clocks\n- Network traffic control\n- Screenshots and videos\n\n## Setting Up Cypress\n\n> Info about [Cypress Component Testing can be found here](/cypress/cypress-component-testing)\n\nIf the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.\n\n```shell\nyarn add --dev @nrwl/cypress\n```\n\n```shell\nnpm install --save-dev @nrwl/cypress\n```\n\n## E2E Testing\n\nBy default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.\n\n```shell\nnx g @nrwl/web:app frontend\n```\n\n### Creating a Cypress E2E project for an existing project\n\nTo generate an E2E project based on an existing project, run the following generator\n\n```shell\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name\n```\n\nOptionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.\n\n```shell\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200\n```\n\nReplace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.\n\n### Testing Applications\n\nRun `nx e2e frontend-e2e` to execute e2e tests with Cypress.\n\nYou can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/recipe/use-executor-configurations#use-executor-configurations)\n\n```shell\nnx e2e frontend-e2e --configuration=production\n```\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/cypress/apps/frontend/screenshots` and `dist/cypress/apps/frontend/videos`.\n\n### Watching for Changes (Headed Mode)\n\nWith, `nx e2e frontend-e2e --watch` Cypress will start in headed mode where you can see your application being tested.\n\nRunning Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application\nrunning and Cypress will re-run those tests as you enhance and add to the suite.\n\n```shell\nnx e2e frontend-e2e --watch\n```\n\n### Specifying a Custom Url to Test\n\nThe `baseUrl` property provides you the ability to test an application hosted on a specific domain.\n\n```shell\nnx e2e frontend-e2e --baseUrl=https://frontend.com\n```\n\n> If no `baseUrl` and no `devServerTarget` are provided, Cypress will expect to have the `baseUrl` property in\n> the cypress config file, or will error.\n\n## Using cypress.config.ts\n\nIf you need to fine tune your Cypress setup, you can do so by modifying `cypress.config.ts` in the project root. For\ninstance,\nyou can easily add your `projectId` to save all the screenshots and videos into your Cypress dashboard. The complete\nconfiguration is documented\non [the official website](https://docs.cypress.io/guides/references/configuration.html#Options).\n\n## Environment Variables\n\nIf you're needing to pass a variable to cypress that you wish to not commit to your repository, i.e. API keys, or dynamic values based on configurations, i.e. API Urls. This is where [Cypress environment variables](https://docs.cypress.io/guides/guides/environment-variables) can be used.\n\nThere are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](https://nx.dev/packages/cypress/executors/cypress#env) or the commandline.\n\nCreate a `cypress.env.json` file in the projects root i.e. `apps/my-cool-app-e2e/cypress.env.json`. Cypress will automatically pick up this file. This method is helpful for configurations that you want to not commit. Just don't forget to add the file to the `.gitignore` and add documentation so people in your repo know what values to popluate in their local copy of the `cypress.env.json` file.\n\nUsing [@nrwl/cypress:cypress](/packages/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.\n\nOptionally, you can pass environment variables via the commandline with the `--env` flag.\n\n{% callout type=\"warning\" title=\"Executor options and --env\" %}\nWhen using the `--env` flag, this will not be merged with any values used in the `env` executor option.\n{% /callout %}\n\n```shell\nnx e2e frontend-e2e --env.API_URL=\"https://api.my-nx-website.com\" --env.API_KEY=\"abc-123\"\n```\n"
},
{
"name": "Component Testing",
"id": "cypress-component-testing",
"file": "shared/cypress-component-testing",
"content": "# Cypress Component Testing\n\n> Component testing requires Cypress v10 and above.\n> See our [guide for more information](/cypress/v10-migration-guide) to migrate to Cypress v10.\n\nUnlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added\ndirectly to a project, like [Jest](/packages/jest)\n\n## Add Component Testing to a Project\n\n> Currently only [@nrwl/react](/packages/react/generators/cypress-component-configuration) and [@nrwl/angular](/packages/angular/generators/cypress-component-configuration) plugins support component testing\n\nUse the `cypress-component-configuration` generator from the respective plugin to add component testing to a project.\n\n```bash\nnx g @nrwl/react:cypress-component-configuration --project=your-project\n\nnx g @nrwl/angular:cypress-component-configuration --project=your-project\n```\n\nYou can optionally pass in `--generate-tests` to create component tests for all components within the library.\n\nComponent testing leverages a build target within your workspace as the base for running the tests. The build target is usually an app within the workspace. By default, the generator attempts to find the build target for you based on the project usage, but you can manually specify the build target to use via the `--build-target` option.\n\n```bash\nnx g @nrwl/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build\n\nnx g @nrwl/angular:cypress-component-configuration --project=your-project --build-target=my-ng-app:build\n```\n\nThe build target option can be changed later via updating the `devServerTarget` option in the `component-test` target.\n\n{% callout type=\"warning\" title=\"Executor Options\" %}\nWhen using component testing make sure to set `skipServe: true` in the component test target options, otherwise `@nrwl/cypress` will attempt to run the build first which can slow down your component tests. `skipServe: true` is automatically set when using the `cypress-component-configuration` generator.\n{% /callout %}\n\n## Testing Projects\n\nRun `nx component-test your-lib` to execute the component tests with Cypress.\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/cypress/libs/your-lib/screenshots` and `dist/cypress/libs/your-lib/videos`.\n\n## Watching for Changes (Headed Mode)\n\nWith, `nx component-test your-lib --watch` Cypress will start in headed mode. Where you can see your component being tested.\n\nRunning Cypress with `--watch` is a great way to iterate on your components since cypress will rerun your tests as you make those changes validating the new behavior.\n\n## More Information\n\nYou can read more on component testing in the [Cypress documentation](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test).\n"
"content": "# Cypress Component Testing\n\n> Component testing requires Cypress v10 and above.\n> See our [guide for more information](/cypress/v10-migration-guide) to migrate to Cypress v10.\n\nUnlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added\ndirectly to a project, like [Jest](/packages/jest)\n\n## Add Component Testing to a Project\n\n> Currently only [@nrwl/react](/packages/react/generators/cypress-component-configuration) and [@nrwl/angular](/packages/angular/generators/cypress-component-configuration) plugins support component testing\n\nUse the `cypress-component-configuration` generator from the respective plugin to add component testing to a project.\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=your-project\n\nnx g @nrwl/angular:cypress-component-configuration --project=your-project\n```\n\nYou can optionally pass in `--generate-tests` to create component tests for all components within the library.\n\nComponent testing leverages a build target within your workspace as the base for running the tests. The build target is usually an app within the workspace. By default, the generator attempts to find the build target for you based on the project usage, but you can manually specify the build target to use via the `--build-target` option.\n\n```shell\nnx g @nrwl/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build\n\nnx g @nrwl/angular:cypress-component-configuration --project=your-project --build-target=my-ng-app:build\n```\n\nThe build target option can be changed later via updating the `devServerTarget` option in the `component-test` target.\n\n{% callout type=\"warning\" title=\"Executor Options\" %}\nWhen using component testing make sure to set `skipServe: true` in the component test target options, otherwise `@nrwl/cypress` will attempt to run the build first which can slow down your component tests. `skipServe: true` is automatically set when using the `cypress-component-configuration` generator.\n{% /callout %}\n\n## Testing Projects\n\nRun `nx component-test your-lib` to execute the component tests with Cypress.\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/cypress/libs/your-lib/screenshots` and `dist/cypress/libs/your-lib/videos`.\n\n## Watching for Changes (Headed Mode)\n\nWith, `nx component-test your-lib --watch` Cypress will start in headed mode. Where you can see your component being tested.\n\nRunning Cypress with `--watch` is a great way to iterate on your components since cypress will rerun your tests as you make those changes validating the new behavior.\n\n## More Information\n\nYou can read more on component testing in the [Cypress documentation](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test).\n"
},
{
"name": "v10 Migration Guide",
"id": "v10-migration-guide",
"file": "shared/guides/cypress/cypress-v10-migration",
"content": "# Migrating to Cypress V10\n\nCypress v10 introduce new features, like component testing, along with some breaking changes.\n\nBefore continuing, make sure you have all your changes committed and have a clean working tree.\n\nYou can migrate an E2E project to v10 by running the following command:\n\n```bash\nnx g @nrwl/cypress:migrate-to-cypress-10\n```\n\nIn general, these are the steps taken to migrate your project:\n\n1. Migrates your existing `cypress.json` configuration to a new `cypress.config.ts` configuration file.\n - The `pluginsFile` option has been replaced for `setupNodeEvents`. We will import the file and add it to\n the `setupNodeEvents` config option. Double-check your plugins are working correctly.\n2. Rename all test files from `.spec.ts` to `.cy.ts`\n3. Rename the `support/index.ts` to `support/e2e.ts` and update any associated imports\n4. Rename the `integrations` folder to the `e2e` folder\n\nWe take the best effort to make this migration seamless, but there can be edge cases we didn't anticipate. So feel free to [open an issue](https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+bug&template=1-bug.md) if you come across any problems.\n\nYou can also consult the [official Cypress migration guide](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0) if you get stuck and want to manually migrate your projects.\n"
"content": "# Migrating to Cypress V10\n\nCypress v10 introduce new features, like component testing, along with some breaking changes.\n\nBefore continuing, make sure you have all your changes committed and have a clean working tree.\n\nYou can migrate an E2E project to v10 by running the following command:\n\n```shell\nnx g @nrwl/cypress:migrate-to-cypress-10\n```\n\nIn general, these are the steps taken to migrate your project:\n\n1. Migrates your existing `cypress.json` configuration to a new `cypress.config.ts` configuration file.\n - The `pluginsFile` option has been replaced for `setupNodeEvents`. We will import the file and add it to\n the `setupNodeEvents` config option. Double-check your plugins are working correctly.\n2. Rename all test files from `.spec.ts` to `.cy.ts`\n3. Rename the `support/index.ts` to `support/e2e.ts` and update any associated imports\n4. Rename the `integrations` folder to the `e2e` folder\n\nWe take the best effort to make this migration seamless, but there can be edge cases we didn't anticipate. So feel free to [open an issue](https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+bug&template=1-bug.md) if you come across any problems.\n\nYou can also consult the [official Cypress migration guide](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0) if you get stuck and want to manually migrate your projects.\n"
}
],
"generators": [

2
docs/generated/packages/detox.json
View File

@ -11,7 +11,7 @@
"name": "Overview",
"path": "/packages/detox",
"file": "shared/detox-plugin",
"content": "Detox is gray box end-to-end testing and automation library for mobile apps. It has a lot of great features:\n\n- Cross Platform\n- Runs on Devices\n- Automatically Synchronized\n- Test Runner Independent\n- Debuggable\n\n## Setting Up Detox\n\n### Install applesimutils (Mac only)\n\n[applesimutils](https://github.com/wix/AppleSimulatorUtils) is a collection of utils for Apple simulators.\n\n```sh\nbrew tap wix/brew\nbrew install applesimutils\n```\n\n### Install Jest Globally\n\n```sh\nnpm install -g jest\n```\n\n### Generating Applications\n\nBy default, when creating a mobile application, Nx will use Detox to create the e2e tests project.\n\n```bash\nnx g @nrwl/react-native:app frontend\n```\n\n### Creating a Detox E2E project for an existing project\n\nYou can create a new Detox E2E project for an existing mobile project.\n\nIf the `@nrwl/detox` package is not installed, install the version that matches your `@nrwl/workspace` version.\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```sh\n# npm\nnpm install --save-dev @nrwl/detox\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```sh\n# yarn\nyarn add --dev @nrwl/detox\n```\n\n{% /tab %}\n{% /tabs %}\n\nNext, generate an E2E project based on an existing project.\n\n```sh\nnx g @nrwl/detox:app your-app-name-e2e --project=your-app-name\n```\n\nReplace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.\n\nIn addition, you need to follow [instructions at Detox](https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md) to do manual setup for Android files.\n\n## Using Detox\n\n### Testing Applications\n\n- Run `nx test-ios frontend-e2e` to build the iOS app and execute e2e tests with Detox for iOS (Mac only)\n- Run `nx test-android frontend-e2e` to build the Android app and execute e2e tests with Detox for Android\n\nYou can run below commands:\n\n- `nx build-ios frontend-e2e`: build the iOS app (Mac only)\n- `nx build-android frontend-e2e`: build the Android app\n\n### Testing against Prod Build\n\nYou can run your e2e test against a production build:\n\n- `nx test-ios frontend-e2e --prod`: to build the iOS app and execute e2e tests with Detox for iOS with Release configuration (Mac only)\n- `nx test-android frontend-e2e`: rto build the Android app and execute e2e tests with Detox for Android with release build type\n- `nx build-ios frontend-e2e --prod`: build the iOS app using Release configuration (Mac only)\n- `nx build-android frontend-e2e --prod`: build the Android app using release build type\n\n## Configuration\n\n### Using .detoxrc.json\n\nIf you need to fine tune your Detox setup, you can do so by modifying `.detoxrc.json` in the e2e project.\n\n#### Change Testing Simulator/Emulator\n\nFor iOS, in terminal, run `xcrun simctl list` to view a list of simulators on your Mac. To open your active simulator, `run open -a simulator`. In `frontend-e2e/.detoxrc.json`, you could change the simulator under `devices.simulator.device`.\n\nFor Android, in terminal, run `emulator -list-avds` to view a list of emulators installed. To open your emulator, run `emulator -avd <your emulator name>`. In `frontend-e2e/.detoxrc.json`, you could change the simulator under `devices.emulator.device`.\n\nIn addition, to override the device name specified in a configuration, you could use `--device-name` option: `nx test-ios <app-name-e2e> --device-name \"iPhone 11\"`. The `device-name` property provides you the ability to test an application run on specific device.\n\n```bash\nnx test-ios frontend-e2e --device-name \"iPhone 11\"\nnx test-android frontend-e2e --device-name \"Pixel_4a_API_30\"\n```\n"
"content": "Detox is gray box end-to-end testing and automation library for mobile apps. It has a lot of great features:\n\n- Cross Platform\n- Runs on Devices\n- Automatically Synchronized\n- Test Runner Independent\n- Debuggable\n\n## Setting Up Detox\n\n### Install applesimutils (Mac only)\n\n[applesimutils](https://github.com/wix/AppleSimulatorUtils) is a collection of utils for Apple simulators.\n\n```sh\nbrew tap wix/brew\nbrew install applesimutils\n```\n\n### Install Jest Globally\n\n```sh\nnpm install -g jest\n```\n\n### Generating Applications\n\nBy default, when creating a mobile application, Nx will use Detox to create the e2e tests project.\n\n```shell\nnx g @nrwl/react-native:app frontend\n```\n\n### Creating a Detox E2E project for an existing project\n\nYou can create a new Detox E2E project for an existing mobile project.\n\nIf the `@nrwl/detox` package is not installed, install the version that matches your `@nrwl/workspace` version.\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```sh\n# npm\nnpm install --save-dev @nrwl/detox\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```sh\n# yarn\nyarn add --dev @nrwl/detox\n```\n\n{% /tab %}\n{% /tabs %}\n\nNext, generate an E2E project based on an existing project.\n\n```sh\nnx g @nrwl/detox:app your-app-name-e2e --project=your-app-name\n```\n\nReplace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.\n\nIn addition, you need to follow [instructions at Detox](https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md) to do manual setup for Android files.\n\n## Using Detox\n\n### Testing Applications\n\n- Run `nx test-ios frontend-e2e` to build the iOS app and execute e2e tests with Detox for iOS (Mac only)\n- Run `nx test-android frontend-e2e` to build the Android app and execute e2e tests with Detox for Android\n\nYou can run below commands:\n\n- `nx build-ios frontend-e2e`: build the iOS app (Mac only)\n- `nx build-android frontend-e2e`: build the Android app\n\n### Testing against Prod Build\n\nYou can run your e2e test against a production build:\n\n- `nx test-ios frontend-e2e --prod`: to build the iOS app and execute e2e tests with Detox for iOS with Release configuration (Mac only)\n- `nx test-android frontend-e2e`: rto build the Android app and execute e2e tests with Detox for Android with release build type\n- `nx build-ios frontend-e2e --prod`: build the iOS app using Release configuration (Mac only)\n- `nx build-android frontend-e2e --prod`: build the Android app using release build type\n\n## Configuration\n\n### Using .detoxrc.json\n\nIf you need to fine tune your Detox setup, you can do so by modifying `.detoxrc.json` in the e2e project.\n\n#### Change Testing Simulator/Emulator\n\nFor iOS, in terminal, run `xcrun simctl list` to view a list of simulators on your Mac. To open your active simulator, `run open -a simulator`. In `frontend-e2e/.detoxrc.json`, you could change the simulator under `devices.simulator.device`.\n\nFor Android, in terminal, run `emulator -list-avds` to view a list of emulators installed. To open your emulator, run `emulator -avd <your emulator name>`. In `frontend-e2e/.detoxrc.json`, you could change the simulator under `devices.emulator.device`.\n\nIn addition, to override the device name specified in a configuration, you could use `--device-name` option: `nx test-ios <app-name-e2e> --device-name \"iPhone 11\"`. The `device-name` property provides you the ability to test an application run on specific device.\n\n```shell\nnx test-ios frontend-e2e --device-name \"iPhone 11\"\nnx test-android frontend-e2e --device-name \"Pixel_4a_API_30\"\n```\n"
}
],
"generators": [

2
docs/generated/packages/esbuild.json
View File

@ -11,7 +11,7 @@
"id": "overview",
"path": "/packages/esbuild",
"file": "shared/esbuild-plugin",
"content": "The Nx Plugin for [esbuild](https://esbuild.github.io/api/), an extremely fast JavaScript bundler.\n\nWhy should you use this plugin?\n\n- _Fast_ builds using esbuild.\n- Type-checking using TypeScript, which esbuild does not handle.\n- Intelligent `package.json` output.\n- Additional [assets](/packages/esbuild/executors/esbuild#assets) for the output.\n\n## Setting up esbuild\n\nTo create a new workspace, run `npx create-nx-workspace@latest --preset=npm`.\n\nTo add the esbuild plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```bash\nnpm install -D @nrwl/esbuild\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```bash\nyarn add -D @nrwl/esbuild\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Creating a new JS library\n\nYou can add a new library that builds using esbuild with:\n\n```bash\nnx g @nrwl/js:lib mylib --bundler=esbuild\n```\n\nThis command will install the esbuild plugin if needed, and set `@nrwl/esbuild:esbuild` executor for the `build` target.\n\n### Adding esbuild target to existing libraries\n\nIf you already have a JS project that you want to use esbuild for, run this command:\n\n```bash\nnx g esbuild-project mylib\n```\n\nThis generator validates there isn't an existing `build` target. If you want to overwrite the existing target you can pass the `--skipValidation` option.\n\n```bash\nnx g esbuild-project mylib --skipValidation\n```\n\n## Using esbuild\n\nYou can run builds with:\n\n```bash\nnx build mylib\n```\n\nReplace `mylib` with the name or your project. This command works for both applications and libraries.\n\n### Copying assets\n\nAssets are non-JS and non-TS files, such as images, CSS, etc. You can add them to the project configuration as follows.\n\n```jsonc\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n //...\n \"assets\": [\n { \"input\": \"libs/mylib\", \"glob\": \"README.md\", \"output\": \"/\" },\n { \"input\": \"libs/mylib\", \"glob\": \"logo.png\", \"output\": \"/\" },\n { \"input\": \"libs/mylib\", \"glob\": \"docs/**/*.md\", \"output\": \"/docs\" },\n //...\n ]\n }\n}\n```\n\nRunning `nx build mylib` outputs something like this.\n\n```text\ndist/libs/mylib/\n├── README.md\n├── docs\n│ ├── CONTRIBUTING.md\n│ └── TESTING.md\n├── index.js\n├── logo.png\n└── package.json\n```\n\n### Generating a metafile\n\nA metafile can be generated by passing the `--metafile` option. This file contains information about the build that can be analyzed by other tools, such as [bundle buddy](https://www.bundle-buddy.com/esbuild).\n\n```bash\nnx build mylib --metafile\n```\n\nThis command will generate a `meta.json` file in the output directory.\n\n```text\ndist/libs/mylib/\n├── README.md\n├── index.js\n├── meta.json\n└── package.json\n```\n\n### Custom esbuild options\n\nExtra API options for esbuild can be passed in the `esbuildOptions` object for your project configuration.\n\n```jsonc\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"banner\": { \".js\": \"// banner\" },\n \"footer\": { \".js\": \"// footer\" }\n }\n }\n}\n```\n\n## More Documentation\n\n- [Using JS](/packages/js)\n"
"content": "The Nx Plugin for [esbuild](https://esbuild.github.io/api/), an extremely fast JavaScript bundler.\n\nWhy should you use this plugin?\n\n- _Fast_ builds using esbuild.\n- Type-checking using TypeScript, which esbuild does not handle.\n- Intelligent `package.json` output.\n- Additional [assets](/packages/esbuild/executors/esbuild#assets) for the output.\n\n## Setting up esbuild\n\nTo create a new workspace, run `npx create-nx-workspace@latest --preset=npm`.\n\nTo add the esbuild plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/esbuild\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/esbuild\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Creating a new JS library\n\nYou can add a new library that builds using esbuild with:\n\n```shell\nnx g @nrwl/js:lib mylib --bundler=esbuild\n```\n\nThis command will install the esbuild plugin if needed, and set `@nrwl/esbuild:esbuild` executor for the `build` target.\n\n### Adding esbuild target to existing libraries\n\nIf you already have a JS project that you want to use esbuild for, run this command:\n\n```shell\nnx g esbuild-project mylib\n```\n\nThis generator validates there isn't an existing `build` target. If you want to overwrite the existing target you can pass the `--skipValidation` option.\n\n```shell\nnx g esbuild-project mylib --skipValidation\n```\n\n## Using esbuild\n\nYou can run builds with:\n\n```shell\nnx build mylib\n```\n\nReplace `mylib` with the name or your project. This command works for both applications and libraries.\n\n### Copying assets\n\nAssets are non-JS and non-TS files, such as images, CSS, etc. You can add them to the project configuration as follows.\n\n```jsonc\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n //...\n \"assets\": [\n { \"input\": \"libs/mylib\", \"glob\": \"README.md\", \"output\": \"/\" },\n { \"input\": \"libs/mylib\", \"glob\": \"logo.png\", \"output\": \"/\" },\n { \"input\": \"libs/mylib\", \"glob\": \"docs/**/*.md\", \"output\": \"/docs\" },\n //...\n ]\n }\n}\n```\n\nRunning `nx build mylib` outputs something like this.\n\n```text\ndist/libs/mylib/\n├── README.md\n├── docs\n│ ├── CONTRIBUTING.md\n│ └── TESTING.md\n├── index.js\n├── logo.png\n└── package.json\n```\n\n### Generating a metafile\n\nA metafile can be generated by passing the `--metafile` option. This file contains information about the build that can be analyzed by other tools, such as [bundle buddy](https://www.bundle-buddy.com/esbuild).\n\n```shell\nnx build mylib --metafile\n```\n\nThis command will generate a `meta.json` file in the output directory.\n\n```text\ndist/libs/mylib/\n├── README.md\n├── index.js\n├── meta.json\n└── package.json\n```\n\n### Custom esbuild options\n\nExtra API options for esbuild can be passed in the `esbuildOptions` object for your project configuration.\n\n```jsonc\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"banner\": { \".js\": \"// banner\" },\n \"footer\": { \".js\": \"// footer\" }\n }\n }\n}\n```\n\n## More Documentation\n\n- [Using JS](/packages/js)\n"
}
],
"generators": [

2
docs/generated/packages/eslint-plugin-nx.json
View File

@ -11,7 +11,7 @@
"name": "Overview",
"path": "/packages/eslint-plugin-nx",
"file": "shared/eslint-plugin-nx",
"content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```jsonc\n{\n // ... more ESLint config here\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {\n \"@nrwl/nx/enforce-module-boundaries\": [\n \"error\",\n {\n // ...rule specific configuration\n }\n ]\n }\n }\n // ... more ESLint overrides here\n ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
"content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````shell\n```shell\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```shell\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```jsonc\n{\n // ... more ESLint config here\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {\n \"@nrwl/nx/enforce-module-boundaries\": [\n \"error\",\n {\n // ...rule specific configuration\n }\n ]\n }\n }\n // ... more ESLint overrides here\n ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
}
],
"generators": [],

2
docs/generated/packages/express.json
View File

@ -11,7 +11,7 @@
"name": "Overview",
"path": "/packages/express",
"file": "shared/express-plugin",
"content": "[Express](https://expressjs.com/) is mature, minimal, and an open source web framework for making web applications and\napis.\n\n## Setting Up Express\n\nTo create a new workspace with Express, run the following command:\n\n```shell\n npx create-nx-workspace --preset=express\n```\n\n### Adding Express to an Existing Project\n\nInstall the express plugin\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```bash\nnpm i --save-dev @nrwl/express\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/express\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Creating Applications\n\nAdd a new application to your workspace with the following command:\n\n```shell\nnx g @nrwl/express:app my-app\n```\n\nServe the application by running\n\n```shell\nnx serve my-app\n```\n\nThis starts the application on localhost:3333/api by default.\n\n> Express does not come with any library generators, but you can leverage the[`@nrwl/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application.\n\n### Application Proxies\n\nThe Express application generator has an option to configure other projects in the workspace to proxy API requests. This\ncan be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.\n\n```shell\nnx g @nrwl/express:app <express-app> --frontendProject my-react-app\n```\n\n## Using Express\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test <project-name>\n```\n\n### Building Projects\n\nExpress projects can be built with:\n\n```shell\nnx build <project-name>\n```\n\nBuild artifacts will be found in the `dist` directory under `apps/<project-name>` by default. Customize the build\nconfiguration by editing `outputPath` in the [project configuration](/reference/project-configuration).\n\n### Waiting for Other Tasks\n\nYou can wait for other tasks to run before serving the express app which can be handy for spinning up various services\nthe application depends on— for example, other apis in a microservice.\n\nSetting the `waitUntilTargets` option with an array of targets (format: `\"project:target\"`) executes those tasks\nbefore serving the Express application.\n\n## More Documentation\n\n- [Using Jest](/packages/jest)\n- [@nrwl/js](/packages/js)\n- [Express](https://expressjs.com/)\n"
"content": "[Express](https://expressjs.com/) is mature, minimal, and an open source web framework for making web applications and\napis.\n\n## Setting Up Express\n\nTo create a new workspace with Express, run the following command:\n\n```shell\n npx create-nx-workspace --preset=express\n```\n\n### Adding Express to an Existing Project\n\nInstall the express plugin\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```shell\nnpm i --save-dev @nrwl/express\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```shell\nyarn add --dev @nrwl/express\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Creating Applications\n\nAdd a new application to your workspace with the following command:\n\n```shell\nnx g @nrwl/express:app my-app\n```\n\nServe the application by running\n\n```shell\nnx serve my-app\n```\n\nThis starts the application on localhost:3333/api by default.\n\n> Express does not come with any library generators, but you can leverage the[`@nrwl/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application.\n\n### Application Proxies\n\nThe Express application generator has an option to configure other projects in the workspace to proxy API requests. This\ncan be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.\n\n```shell\nnx g @nrwl/express:app <express-app> --frontendProject my-react-app\n```\n\n## Using Express\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test <project-name>\n```\n\n### Building Projects\n\nExpress projects can be built with:\n\n```shell\nnx build <project-name>\n```\n\nBuild artifacts will be found in the `dist` directory under `apps/<project-name>` by default. Customize the build\nconfiguration by editing `outputPath` in the [project configuration](/reference/project-configuration).\n\n### Waiting for Other Tasks\n\nYou can wait for other tasks to run before serving the express app which can be handy for spinning up various services\nthe application depends on— for example, other apis in a microservice.\n\nSetting the `waitUntilTargets` option with an array of targets (format: `\"project:target\"`) executes those tasks\nbefore serving the Express application.\n\n## More Documentation\n\n- [Using Jest](/packages/jest)\n- [@nrwl/js](/packages/js)\n- [Express](https://expressjs.com/)\n"
}
],
"generators": [

2
docs/generated/packages/js.json
View File

@ -11,7 +11,7 @@
"id": "overview",
"path": "/packages/js",
"file": "shared/js-plugin",
"content": "The JS plugin contains executors and generators that are useful for JavaScript/TypeScript projects in an Nx workspace.\n\n## Setting Up JS\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/js` by running the following commands if `@nrwl/js` package is not installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```bash\nnpm i --save-dev @nrwl/js\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/js\n```\n\n{% /tab %}\n{% /tabs %}\n\n### `ts` Preset\n\nWhen initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nrwl/js` pre-installed.\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```bash\nnpx create-nx-workspace my-org --preset=ts\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn create nx-workspace my-org --preset=ts\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Create Libraries\n\nYou can add a new JS/TS library with the following command:\n\n```shell\nnx g @nrwl/js:lib my-lib\n```\n\n## Build\n\nYou can `build` libraries that are generated with `--buildable` flag.\n\n```shell\nnx g @nrwl/js:lib my-buildable-lib --buildable\n```\n\nGenerating a library with `--buildable` will add a `build` target to the library's `project.json` file allows the library to be built.\n\n```shell\nnx build my-buildable-lib\n```\n\n## Test\n\nYou can test a library with the following command:\n\n```shell\nnx test my-lib\n```\n\n## Lint\n\nYou can lint a library with the following command:\n\n```shell\nnx lint my-lib\n```\n\n## Compiler\n\nBy default, `@nrwl/js` uses [TypeScript Compiler (TSC)](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler), via `@nrwl/js:tsc` executor, to compile your libraries. Optionally, you can switch `tsc` out for a different compiler with `--compiler` flag when executing the generators.\n\nCurrently, `@nrwl/js` supports the following compilers:\n\n- [Speedy Web Compiler (SWC)](https://swc.rs)\n\n### SWC\n\n- Create a buildable library with `swc`\n\n```shell\nnx g @nrwl/js:lib my-swc-lib --compiler=swc --buildable\n```\n\n- Convert a `tsc` library to use `swc`\n\n```shell\nnx g @nrwl/js:convert-to-swc my-buildable-lib\n```\n\nNow the `build` command will use `@nrwl/js:swc` executor to compile your libraries.\n\n> The first time you generate a `swc` library or convert a `tsc` library over to `swc`, `@nrwl/js` will install the necessary dependencies to use `swc`.\n"
"content": "The JS plugin contains executors and generators that are useful for JavaScript/TypeScript projects in an Nx workspace.\n\n## Setting Up JS\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/js` by running the following commands if `@nrwl/js` package is not installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```shell\nnpm i --save-dev @nrwl/js\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```shell\nyarn add --dev @nrwl/js\n```\n\n{% /tab %}\n{% /tabs %}\n\n### `ts` Preset\n\nWhen initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nrwl/js` pre-installed.\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n```shell\nnpx create-nx-workspace my-org --preset=ts\n```\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```shell\nyarn create nx-workspace my-org --preset=ts\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Create Libraries\n\nYou can add a new JS/TS library with the following command:\n\n```shell\nnx g @nrwl/js:lib my-lib\n```\n\n## Build\n\nYou can `build` libraries that are generated with `--buildable` flag.\n\n```shell\nnx g @nrwl/js:lib my-buildable-lib --buildable\n```\n\nGenerating a library with `--buildable` will add a `build` target to the library's `project.json` file allows the library to be built.\n\n```shell\nnx build my-buildable-lib\n```\n\n## Test\n\nYou can test a library with the following command:\n\n```shell\nnx test my-lib\n```\n\n## Lint\n\nYou can lint a library with the following command:\n\n```shell\nnx lint my-lib\n```\n\n## Compiler\n\nBy default, `@nrwl/js` uses [TypeScript Compiler (TSC)](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler), via `@nrwl/js:tsc` executor, to compile your libraries. Optionally, you can switch `tsc` out for a different compiler with `--compiler` flag when executing the generators.\n\nCurrently, `@nrwl/js` supports the following compilers:\n\n- [Speedy Web Compiler (SWC)](https://swc.rs)\n\n### SWC\n\n- Create a buildable library with `swc`\n\n```shell\nnx g @nrwl/js:lib my-swc-lib --compiler=swc --buildable\n```\n\n- Convert a `tsc` library to use `swc`\n\n```shell\nnx g @nrwl/js:convert-to-swc my-buildable-lib\n```\n\nNow the `build` command will use `@nrwl/js:swc` executor to compile your libraries.\n\n> The first time you generate a `swc` library or convert a `tsc` library over to `swc`, `@nrwl/js` will install the necessary dependencies to use `swc`.\n"
}
],
"generators": [

4
docs/generated/packages/linter.json
View File

@ -11,13 +11,13 @@
"name": "Overview",
"path": "/packages/linter",
"file": "shared/linter-plugin",
"content": "The Linter plugin contains executors, generator, plugin and utilities used for linting JavaScript/TypeScript projects within an Nx workspace.\n\n## Setting Up Linter\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/linter` by running the following commands if `@nrwl/linter` package is not installed:\n\n```bash\nnpm i --save-dev @nrwl/linter\n```\n\n```bash\nyarn add --dev @nrwl/linter\n```\n\n## Lint\n\nYou can lint an application or a library with the following command:\n\n```bash\nnx lint my-app\n```\n\n```bash\nnx lint my-lib\n```\n\n## Utils\n\n- [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)\n"
"content": "The Linter plugin contains executors, generator, plugin and utilities used for linting JavaScript/TypeScript projects within an Nx workspace.\n\n## Setting Up Linter\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/linter` by running the following commands if `@nrwl/linter` package is not installed:\n\n```shell\nnpm i --save-dev @nrwl/linter\n```\n\n```shell\nyarn add --dev @nrwl/linter\n```\n\n## Lint\n\nYou can lint an application or a library with the following command:\n\n```shell\nnx lint my-app\n```\n\n```shell\nnx lint my-lib\n```\n\n## Utils\n\n- [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)\n"
},
{
"id": "eslint-plugin-nx",
"name": "eslint-plugin-nx",
"file": "shared/eslint-plugin-nx",
"content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```jsonc\n{\n // ... more ESLint config here\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {\n \"@nrwl/nx/enforce-module-boundaries\": [\n \"error\",\n {\n // ...rule specific configuration\n }\n ]\n }\n }\n // ... more ESLint overrides here\n ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
"content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````shell\n```shell\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```shell\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```jsonc\n{\n // ... more ESLint config here\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {\n \"@nrwl/nx/enforce-module-boundaries\": [\n \"error\",\n {\n // ...rule specific configuration\n }\n ]\n }\n }\n // ... more ESLint overrides here\n ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
}
],
"generators": [

2
docs/generated/packages/next.json
View File

File diff suppressed because one or more lines are too long

2
docs/generated/packages/node.json
View File

@ -11,7 +11,7 @@
"name": "Overview",
"path": "/packages/node",
"file": "shared/node-plugin",
"content": "The Node Plugin contains generators and executors to manage Node applications within an Nx workspace. It provides:\n\n## Setting Up Node\n\nTo add the Node plugin to an existing workspace, run one of the following:\n\n```bash\n# For npm users\nnpm install -D @nrwl/node\n\n# For yarn users\nyarn add -D @nrwl/node\n```\n\n### Creating Applications\n\nYou can add a new application with the following:\n\n```bash\nnx g @nrwl/node:application my-new-app\n```\n\nYou can run your application with `nx serve my-new-app`, which starts it in watch mode.\n\n### Creating Libraries\n\nNode libraries are a good way to separate features within your organization. To create a Node library run the following command:\n\n```bash\nnx g @nrwl/js:node my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/node:lib my-new-lib --buildable\nnx g @nrwl/node:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\n## Using Node\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```bash\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\n### Building Projects\n\nNode applications can be build with:\n\n```bash\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```bash\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.\n\n### Application Proxies\n\nGenerating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.\n\n```bash\nnx g @nrwl/node:application my-new-app \\\n--frontendProject my-react-app\n```\n\n### Debugging\n\nDebugging is set to use a random port that is available on the system. The port can be changed by setting the port option in the `serve` architect in the project.json. Or by running the serve command with `--port <number>`.\n\nFor additional information on how to debug Node applications, see the [Node.js debugging getting started guide](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients).\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n"
"content": "The Node Plugin contains generators and executors to manage Node applications within an Nx workspace. It provides:\n\n## Setting Up Node\n\nTo add the Node plugin to an existing workspace, run one of the following:\n\n```shell\n# For npm users\nnpm install -D @nrwl/node\n\n# For yarn users\nyarn add -D @nrwl/node\n```\n\n### Creating Applications\n\nYou can add a new application with the following:\n\n```shell\nnx g @nrwl/node:application my-new-app\n```\n\nYou can run your application with `nx serve my-new-app`, which starts it in watch mode.\n\n### Creating Libraries\n\nNode libraries are a good way to separate features within your organization. To create a Node library run the following command:\n\n```shell\nnx g @nrwl/js:node my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/node:lib my-new-lib --buildable\nnx g @nrwl/node:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\n## Using Node\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\n### Building Projects\n\nNode applications can be build with:\n\n```shell\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```shell\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.\n\n### Application Proxies\n\nGenerating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.\n\n```shell\nnx g @nrwl/node:application my-new-app \\\n--frontendProject my-react-app\n```\n\n### Debugging\n\nDebugging is set to use a random port that is available on the system. The port can be changed by setting the port option in the `serve` architect in the project.json. Or by running the serve command with `--port <number>`.\n\nFor additional information on how to debug Node applications, see the [Node.js debugging getting started guide](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients).\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n"
}
],
"generators": [

2
docs/generated/packages/nx-plugin.json
View File

File diff suppressed because one or more lines are too long

4
docs/generated/packages/nx.json
View File

@ -23,14 +23,14 @@
"id": "generate",
"tags": ["use-code-generators"],
"file": "generated/cli/generate",
"content": "---\ntitle: 'generate - CLI command'\ndescription: 'Runs a generator that creates and/or modifies files based on a generator from a collection.'\n---\n\n# generate\n\nRuns a generator that creates and/or modifies files based on a generator from a collection.\n\n## Usage\n\n```bash\nnx generate <collection:generator>\n```\n\n```bash\nnx g <generator>\n```\n\nInstall `nx` globally to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.\n\n### Examples\n\nGenerate a new Angular application:\n\n```bash\nnx generate @nrwl/angular:app myapp\n```\n\nGenerate a new React application:\n\n```bash\nnx generate @nrwl/react:app myapp\n```\n\nGenerate a new web component application:\n\n```bash\nnx generate @nrwl/web:app myapp\n```\n\nGenerate a new Node application:\n\n```bash\nnx generate @nrwl/node:app myapp\n```\n\nGenerate a new Angular library application:\n\n```bash\nnx generate @nrwl/angular:library mylibrary\n```\n\nGenerate a new React library application:\n\n```bash\nnx generate @nrwl/react:library mylibrary\n```\n\nGenerate a new Node library application:\n\n```bash\nnx generate @nrwl/node:library mylibrary\n```\n\n## Options\n\n### defaults\n\nDefault: `false`\n\nWhen true, disables interactive input prompts for options with a default.\n\n### dryRun\n\nDefault: `false`\n\nWhen true, disables interactive input prompts for options with a default.\n\n### force\n\nDefault: `false`\n\nWhen true, forces overwriting of existing files.\n\n### interactive\n\nDefault: `true`\n\nWhen false, disables interactive input prompts.\n\n### help\n\nShow help and display available generators in the default collection.\n\n### version\n\nShow version number\n"
"content": "---\ntitle: 'generate - CLI command'\ndescription: 'Runs a generator that creates and/or modifies files based on a generator from a collection.'\n---\n\n# generate\n\nRuns a generator that creates and/or modifies files based on a generator from a collection.\n\n## Usage\n\n```shell\nnx generate <collection:generator>\n```\n\n```shell\nnx g <generator>\n```\n\nInstall `nx` globally to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.\n\n### Examples\n\nGenerate a new Angular application:\n\n```shell\nnx generate @nrwl/angular:app myapp\n```\n\nGenerate a new React application:\n\n```shell\nnx generate @nrwl/react:app myapp\n```\n\nGenerate a new web component application:\n\n```shell\nnx generate @nrwl/web:app myapp\n```\n\nGenerate a new Node application:\n\n```shell\nnx generate @nrwl/node:app myapp\n```\n\nGenerate a new Angular library application:\n\n```shell\nnx generate @nrwl/angular:library mylibrary\n```\n\nGenerate a new React library application:\n\n```shell\nnx generate @nrwl/react:library mylibrary\n```\n\nGenerate a new Node library application:\n\n```shell\nnx generate @nrwl/node:library mylibrary\n```\n\n## Options\n\n### defaults\n\nDefault: `false`\n\nWhen true, disables interactive input prompts for options with a default.\n\n### dryRun\n\nDefault: `false`\n\nWhen true, disables interactive input prompts for options with a default.\n\n### force\n\nDefault: `false`\n\nWhen true, forces overwriting of existing files.\n\n### interactive\n\nDefault: `true`\n\nWhen false, disables interactive input prompts.\n\n### help\n\nShow help and display available generators in the default collection.\n\n### version\n\nShow version number\n"
},
{
"name": "run",
"tags": ["run-tasks", "use-task-executors"],
"id": "run",
"file": "generated/cli/run",
"content": "---\ntitle: 'run - CLI command'\ndescription: 'Runs an Architect target with an optional custom builder configuration defined in your project.'\n---\n\n# run\n\nRuns an Architect target with an optional custom builder configuration defined in your project.\n\n## Usage\n\n```bash\nnx run <target> [options]\n```\n\nInstall `nx` globally to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.\n\n### Examples\n\nRun the `build` target for the `myapp` :\n\n```bash\nnx run myapp:build\n```\n\nRun the `build` target for the `myapp` project with a `production` configuration:\n\n```bash\nnx run myapp:build:production\n```\n\n## Options\n\n### configuration (-c)\n\nA named builder configuration, defined in the \"configurations\" section of the workspace configuration file. The builder uses the named configuration to run the given target.\n\n### help\n\nShow help\n\n### version\n\nShow version number\n"
"content": "---\ntitle: 'run - CLI command'\ndescription: 'Runs an Architect target with an optional custom builder configuration defined in your project.'\n---\n\n# run\n\nRuns an Architect target with an optional custom builder configuration defined in your project.\n\n## Usage\n\n```shell\nnx run <target> [options]\n```\n\nInstall `nx` globally to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.\n\n### Examples\n\nRun the `build` target for the `myapp` :\n\n```shell\nnx run myapp:build\n```\n\nRun the `build` target for the `myapp` project with a `production` configuration:\n\n```shell\nnx run myapp:build:production\n```\n\n## Options\n\n### configuration (-c)\n\nA named builder configuration, defined in the \"configurations\" section of the workspace configuration file. The builder uses the named configuration to run the given target.\n\n### help\n\nShow help\n\n### version\n\nShow version number\n"
},
{
"name": "daemon",

2
docs/generated/packages/react-native.json
View File

@ -11,7 +11,7 @@
"name": "Overview",
"path": "/packages/react-native",
"file": "shared/react-native-plugin",
"content": "React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.\n\nThe Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Jest, Detox, and Storybook.\n- Scaffolding for creating buildable libraries that can be published to npm.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React Native\n\n### Create a New Workspace\n\nThe easiest way to create your workspace is via `npx`.\n\n```bash\nnpx create-nx-workspace your-workspace-name \\\n--preset=react-native \\\n--appName=your-app-name\n```\n\n{% callout type=\"note\" title=\"Don't know what you need?\" %}\nYou can also run the command without arguments to go through the interactive prompts.\n{% /callout %}\n\n```bash\nnpx create-nx-workspace your-workspace-name\n```\n\n### Adding React Native to an Existing Workspace\n\nFor existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.\n\n```bash\nnpm install @nrwl/react-native --save-dev\n\n# Or with yarn\nyarn add @nrwl/react-native --dev\n```\n\n### Generating Applications\n\nTo create additional React Native apps run:\n\n```bash\nnx g @nrwl/react-native:app your-app-name\n```\n\n### Generating Libraries\n\nTo generate a new library run:\n\n```bash\nnpx nx g @nrwl/react-native:lib your-lib-name\n```\n\n### Generating Components\n\nTo generate a new component inside library run:\n\n```bash\nnpx nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export\n```\n\nReplace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`\n\n## Using React Native\n\n- [run-ios](/packages/react-native/executors/run-ios) - Builds your app and starts it on iOS simulator or device\n- [run-android](/packages/react-native/executors/run-android) - Builds your app and starts it on a connected Android emulator or device\n- [build-android](/packages/react-native/executors/build-android) - Release Build for Android\n- [start](/packages/react-native/executors/start) - Starts the server that communicates with connected devices\n- [bundle](/packages/react-native/executors/bundle) - Builds the JavaScript bundle for offline use\n- [sync-deps](/packages/react-native/executors/sync-deps) - Syncs dependencies to package.json (required for autolinking)\n- [ensure-symlink](/packages/react-native/executors/ensure-symlink) - Ensure workspace node_modules is symlink under app's node_modules folder\n\n## More Documentation\n\n- [Using Detox](/packages/detox)\n- [Using Jest](/packages/jest)\n"
"content": "React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.\n\nThe Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Jest, Detox, and Storybook.\n- Scaffolding for creating buildable libraries that can be published to npm.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React Native\n\n### Create a New Workspace\n\nThe easiest way to create your workspace is via `npx`.\n\n```shell\nnpx create-nx-workspace your-workspace-name \\\n--preset=react-native \\\n--appName=your-app-name\n```\n\n{% callout type=\"note\" title=\"Don't know what you need?\" %}\nYou can also run the command without arguments to go through the interactive prompts.\n{% /callout %}\n\n```shell\nnpx create-nx-workspace your-workspace-name\n```\n\n### Adding React Native to an Existing Workspace\n\nFor existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.\n\n```shell\nnpm install @nrwl/react-native --save-dev\n\n# Or with yarn\nyarn add @nrwl/react-native --dev\n```\n\n### Generating Applications\n\nTo create additional React Native apps run:\n\n```shell\nnx g @nrwl/react-native:app your-app-name\n```\n\n### Generating Libraries\n\nTo generate a new library run:\n\n```shell\nnpx nx g @nrwl/react-native:lib your-lib-name\n```\n\n### Generating Components\n\nTo generate a new component inside library run:\n\n```shell\nnpx nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export\n```\n\nReplace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`\n\n## Using React Native\n\n- [run-ios](/packages/react-native/executors/run-ios) - Builds your app and starts it on iOS simulator or device\n- [run-android](/packages/react-native/executors/run-android) - Builds your app and starts it on a connected Android emulator or device\n- [build-android](/packages/react-native/executors/build-android) - Release Build for Android\n- [start](/packages/react-native/executors/start) - Starts the server that communicates with connected devices\n- [bundle](/packages/react-native/executors/bundle) - Builds the JavaScript bundle for offline use\n- [sync-deps](/packages/react-native/executors/sync-deps) - Syncs dependencies to package.json (required for autolinking)\n- [ensure-symlink](/packages/react-native/executors/ensure-symlink) - Ensure workspace node_modules is symlink under app's node_modules folder\n\n## More Documentation\n\n- [Using Detox](/packages/detox)\n- [Using Jest](/packages/jest)\n"
}
],
"generators": [

2
docs/generated/packages/react.json
View File

@ -11,7 +11,7 @@
"id": "overview",
"path": "/packages/react",
"file": "shared/react-plugin",
"content": "The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace.\nIt provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Generators for applications, libraries, components, hooks, and more.\n- Library build support for publishing packages to npm or other registries.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React\n\nTo create a new workspace with React, run `npx create-nx-workspace@latest --preset=react`.\n\nTo add the React plugin to an existing workspace, run one of the following:\n\n```bash\n# For npm users\nnpm install -D @nrwl/react\n\n# For yarn users\nyarn add -D @nrwl/react\n```\n\n### Creating Applications and Libraries\n\nYou can add a new application with the following:\n\n```bash\nnx g @nrwl/react:app my-new-app\n```\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\nAnd add a new library as follows:\n\n```bash\nnx g @nrwl/react:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/react:lib my-new-lib --buildable\nnx g @nrwl/react:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\nRead more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).\n\n### Creating Components\n\nAdding a component to an existing project can be done with:\n\n```bash\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-app\n\n# Note: If you want to export the component\n# from the library use --export\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-lib \\\n--export\n```\n\nReplace `my-new-app` and `my-new-lib` with the name of your projects.\n\n### Creating Hooks\n\nIf you want to add a new hook, run the following\n\n```bash\nnx g @nrwl/react:hook my-new-hook --project=my-new-lib\n```\n\nReplace `my-new-lib` with the name of your project.\n\n## Using React\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```bash\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```bash\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```bash\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```bash\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the\nproject's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```bash\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n- [Using Storybook](/storybook/overview-react)\n"
"content": "The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace.\nIt provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Generators for applications, libraries, components, hooks, and more.\n- Library build support for publishing packages to npm or other registries.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React\n\nTo create a new workspace with React, run `npx create-nx-workspace@latest --preset=react`.\n\nTo add the React plugin to an existing workspace, run one of the following:\n\n```shell\n# For npm users\nnpm install -D @nrwl/react\n\n# For yarn users\nyarn add -D @nrwl/react\n```\n\n### Creating Applications and Libraries\n\nYou can add a new application with the following:\n\n```shell\nnx g @nrwl/react:app my-new-app\n```\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\nAnd add a new library as follows:\n\n```shell\nnx g @nrwl/react:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/react:lib my-new-lib --buildable\nnx g @nrwl/react:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\nRead more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).\n\n### Creating Components\n\nAdding a component to an existing project can be done with:\n\n```shell\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-app\n\n# Note: If you want to export the component\n# from the library use --export\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-lib \\\n--export\n```\n\nReplace `my-new-app` and `my-new-lib` with the name of your projects.\n\n### Creating Hooks\n\nIf you want to add a new hook, run the following\n\n```shell\nnx g @nrwl/react:hook my-new-hook --project=my-new-lib\n```\n\nReplace `my-new-lib` with the name of your project.\n\n## Using React\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```shell\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```shell\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```shell\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the\nproject's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```shell\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n- [Using Storybook](/storybook/overview-react)\n"
}
],
"generators": [

16
docs/generated/packages/storybook.json
View File

File diff suppressed because one or more lines are too long

2
docs/generated/packages/web.json
View File

@ -11,7 +11,7 @@
"id": "overview",
"path": "/packages/web",
"file": "shared/web-plugin",
"content": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Scaffolding for creating buildable libraries that can be published to npm.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up Web\n\nTo create a new workspace with web, run `npx create-nx-workspace@latest --preset=web-components`.\n\nTo add the web plugin to an existing workspace, run one of the following:\n\n```bash\n# For npm users\nnpm install -D @nrwl/web\n\n# For yarn users\nyarn add -D @nrwl/web\n```\n\n### Creating Applications\n\nYou can add a new application with the following:\n\n```bash\nnx g @nrwl/web:app my-new-app\n```\n\nThe application uses no framework and generates with web components. You can add any framework you want on top of the default setup.\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\n{% callout type=\"note\" title=\"React\" %}\nIf you are looking to add a React application, check out the [React plugin](/packages/react).\n{% /callout %}\n\n### Creating Libraries\n\nTo create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/packages/js) plugin.\n\n```bash\nnx g @nrwl/js:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/web:lib my-new-lib --buildable\nnx g @nrwl/web:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\n## Using Web\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```bash\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```bash\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```bash\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```bash\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```bash\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n"
"content": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Scaffolding for creating buildable libraries that can be published to npm.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up Web\n\nTo create a new workspace with web, run `npx create-nx-workspace@latest --preset=web-components`.\n\nTo add the web plugin to an existing workspace, run one of the following:\n\n```shell\n# For npm users\nnpm install -D @nrwl/web\n\n# For yarn users\nyarn add -D @nrwl/web\n```\n\n### Creating Applications\n\nYou can add a new application with the following:\n\n```shell\nnx g @nrwl/web:app my-new-app\n```\n\nThe application uses no framework and generates with web components. You can add any framework you want on top of the default setup.\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\n{% callout type=\"note\" title=\"React\" %}\nIf you are looking to add a React application, check out the [React plugin](/packages/react).\n{% /callout %}\n\n### Creating Libraries\n\nTo create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/packages/js) plugin.\n\n```shell\nnx g @nrwl/js:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/web:lib my-new-lib --buildable\nnx g @nrwl/web:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\n## Using Web\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```shell\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```shell\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```shell\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```shell\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n"
}
],
"generators": [

24
docs/nx-cloud/private/standalone.md
View File

@ -28,7 +28,7 @@ database and the file server separately.
### Step 1: Pull the Image
```bash
```shell
> docker pull nxprivatecloud/nxcloud
```
@ -57,7 +57,7 @@ proxy/load-balancer will handle TLS). Otherwise, you will likely want to run Nx
**Using HTTPS**
```bash
```shell
> docker create --name cloud \
-p 443:8081 \
@ -70,7 +70,7 @@ proxy/load-balancer will handle TLS). Otherwise, you will likely want to run Nx
**Using HTTP (no proxy)**
```bash
```shell
> docker create --name cloud \
-p 80:8081 \
@ -81,7 +81,7 @@ proxy/load-balancer will handle TLS). Otherwise, you will likely want to run Nx
**Using HTTPS via proxy**
```bash
```shell
> docker create --name cloud \
-p 80:8081 \
-e NX_CLOUD_APP_URL="https://cloud.myorg.com" \
@ -109,7 +109,7 @@ proxy/load-balancer will handle TLS). Otherwise, you will likely want to run Nx
Once you create the container, you can start it using:
```bash
```shell
> docker start cloud
```
@ -145,14 +145,14 @@ its data in the provided volume. But you can also tell Nx Cloud to use a differe
you are using MongoDB Atlas or Cosmos DB). To do this, provision the `NX_CLOUD_MONGO_SERVER_ENDPOINT` env variable when
creating a container, like so:
```bash
```shell
-e NX_CLOUD_MONGO_SERVER_ENDPOINT="mongodb://domain-with-mongo:27017/nrwl-api"
```
By default, Nx Cloud requires Mongo 4.2+. If you are using an older version of Mongo (for instance, if you are using
Cosmos DB), please add
```bash
```shell
-e NX_CLOUD_USE_MONGO42=false
```
@ -181,7 +181,7 @@ supported.
To configure S3 as a file storage, provision the `AWS_S3_ACCESS_KEY_ID`, `AWS_S3_SECRET_ACCESS_KEY`, and `AWS_S3_BUCKET`
env variables when creating the Nx Cloud docker container, like so:
```bash
```shell
-e AWS_S3_ACCESS_KEY_ID="SOMEKEY"
-e AWS_S3_SECRET_ACCESS_KEY="SOMESECRETKEY"
-e AWS_S3_BUCKET="nx-cache-bucket-name"
@ -191,7 +191,7 @@ If you are using an accelerated bucket, add: `-e AWS_S3_ACCELERATED=true`
If you are using a local S3 installation (e.g., Minio), you can set the endpoint as follows:
```bash
```shell
-e AWS_S3_ENDPOINT="https://local-installation.myorg.com"
-e AWS_S3_ACCESS_KEY_ID="SOMEKEY"
-e AWS_S3_SECRET_ACCESS_KEY="SOMESECRETKEY"
@ -211,7 +211,7 @@ cache entries as well.
To configure Azure Blob as a file storage, provision the `AZURE_CONNECTION_STRING`, `AZURE_CONTAINER` env variables when
creating the Nx Cloud docker container, like so:
```bash
```shell
-e AZURE_CONNECTION_STRING="SOME-CONNECTION-STRING"
-e AZURE_CONTAINER="files"
```
@ -238,7 +238,7 @@ If you have a container with 4GB of RAM, you can decrease the memory limits by s
Example:
```bash
```shell
> docker create --name cloud \
-p 80:8081 \
-e NX_CLOUD_APP_URL="https://cloud.myorg.com" \
@ -266,7 +266,7 @@ By default, the Nx Cloud container is going to remove cached artifacts after two
Example:
```bash
```shell
> docker create --name cloud \
-p 80:8081 \
-e NX_CLOUD_APP_URL="https://cloud.myorg.com" \

4
docs/nx-cloud/reference/config.md
View File

@ -24,7 +24,7 @@ Only operations listed in `cacheableOperations` can be cached using Nx Cloud and
By default, Nx Cloud requests will time out after 10 seconds. `NX_CLOUD_NO_TIMEOUTS` disables the timeout.
```bash
```shell
NX_CLOUD_NO_TIMEOUTS=true nx run-many --target=build --all
```
@ -68,7 +68,7 @@ Under the options property, you can add an additional property called `encryptio
To instead use an environment variable to provide your secret key, run any Nx command as follows:
```bash
```shell
NX_CLOUD_ENCRYPTION_KEY=myEncryptionKey nx build my-project
```

6
docs/nx-cloud/set-up/add-nx-cloud.md
View File

@ -4,7 +4,7 @@
You can enable Nx Cloud when creating a new workspace with `npx create-nx-workspace`. Just reply with `Yes` to the prompt that asks about adding Nx Cloud to your workspace.
```bash
```shell
? Enable distributed caching to make your CI faster
(Use arrow keys)
❯ Yes I want faster builds
@ -18,7 +18,7 @@ This will connect your workspace to Nx Cloud, so you can start testing it out ri
If you are on the latest version of Nx, you can **connect your existing Nx workspace** to Nx Cloud by
running:
```bash
```shell
npx nx connect-to-nx-cloud
```
@ -29,7 +29,7 @@ package to your workspace and running `nx g @nrwl/nx-cloud:init`.
After you have enabled Nx Cloud in your workspace, you will see the following:
```bash
```shell
> NX NOTE Nx Cloud has been enabled
Your workspace is currently public. Anybody with code access

12
docs/shared/angular-plugin.md
View File

@ -17,11 +17,11 @@ You can easily and mostly **automatically migrate from an Angular CLI** project
Adding the Angular plugin to an existing Nx workspace can be done with the following:
```bash
```shell
yarn add -D @nrwl/angular
```
```bash
```shell
npm install -D @nrwl/angular
```
@ -31,7 +31,7 @@ npm install -D @nrwl/angular
It's straightforward to generate an Angular application:
```bash
```shell
nx g @nrwl/angular:app appName
```
@ -43,7 +43,7 @@ By default, the application will be generated with:
We can then serve, build, test, lint, and run e2e tests on the application with the following commands:
```bash
```shell
nx serve appName
nx build appName
nx test appName
@ -55,7 +55,7 @@ nx e2e appName
Generating an Angular library is very similar to generating an application:
```bash
```shell
nx g @nrwl/angular:lib libName
```
@ -66,7 +66,7 @@ By default, the library will be generated with:
We can then test and lint the library with the following commands:
```bash
```shell
nx test libName
nx lint libName
```

16
docs/shared/angular-tutorial/01-create-application.md
View File

@ -30,13 +30,13 @@ This tutorial sets up an [integrated repo](/concepts/integrated-vs-package-based
**Start by creating a new workspace.**
```bash
```shell
npx create-nx-workspace@latest
```
You then receive the following prompts in your command line:
```bash
```shell
Workspace name (e.g., org name) myorg
What to create in the new workspace angular
Application name todos
@ -105,7 +105,7 @@ The generate command added two projects to our workspace:
Now that the application is set up, run it locally via:
```bash
```shell
npx nx serve todos
```
@ -113,7 +113,7 @@ npx nx serve todos
If you would prefer to run using a global installation of Nx, you can run:
```bash
```shell
nx serve todos
```
@ -124,14 +124,14 @@ To fix it, you can either install the `nx` cli globally by running:
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn global add nx
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install -g nx
```
@ -143,14 +143,14 @@ Alternatively, you can run the local installation of Nx by prepending every comm
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn nx serve todos
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npx nx serve todos
```

10
docs/shared/angular-tutorial/05-add-node-app.md
View File

@ -11,7 +11,7 @@ The requests fail because the API has not been created yet. Using Nx you can dev
Nx is an extensible framework with plugins for many modern tools and frameworks. **To see some plugins, run `nx list`:**
```bash
```shell
> NX Installed plugins:
@angular-devkit/build-angular (builders)
@ -47,14 +47,14 @@ Nx is an extensible framework with plugins for many modern tools and frameworks.
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn add --dev @nrwl/nest
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install --save-dev @nrwl/nest
```
@ -69,7 +69,7 @@ When installing `@nrwl/nest`, it also automatically added `@nrwl/node` for you.
**Run the following to generate a new Nest application:**
```bash
```shell
npx nx g @nrwl/nest:app api --frontendProject=todos
```
@ -188,7 +188,7 @@ export class AppController {
In a new terminal window, serve the API.
```bash
```shell
npx nx serve api
```

6
docs/shared/angular-tutorial/07-share-code.md
View File

@ -9,7 +9,7 @@ Awesome! The application is working end to end! However, there is a problem. Bot
**Run the following command to create a library:**
```bash
```shell
npx nx g @nrwl/workspace:lib data
```
@ -116,11 +116,11 @@ export class AppComponent {
Restart the api and application in separate terminal windows
```bash
```shell
npx nx serve api
```
```bash
```shell
npx nx serve todos
```

6
docs/shared/angular-tutorial/08-create-libs.md
View File

@ -66,7 +66,7 @@ export class UiModule {}
**Add a component to the newly created ui library by running:**
```bash
```shell
npx nx g component todos --project=ui --export
```
@ -160,11 +160,11 @@ export class AppModule {}
Restart the api and application in separate terminal windows
```bash
```shell
npx nx serve api
```
```bash
```shell
npx nx serve todos
```

6
docs/shared/angular-tutorial/10-computation-caching.md
View File

@ -9,7 +9,7 @@ Nx has built-in computation caching, which helps drastically improve the perform
**To see it in action, run `npx nx build todos`:**
```bash
```shell
❯ nx build todos
> nx run todos:build:production
@ -34,7 +34,7 @@ Build at: 2022-01-21T20:36:14.528Z - Hash: 795c96ce5e48a766 - Time: 11596ms
**Now, run `npx nx build todos` again, and you will see the results appearing instantly:**
```bash
```shell
❯ nx build todos
> nx run todos:build:production [existing outputs match the cache, left as is]
@ -72,7 +72,7 @@ npx nx run-many --target=build --projects=todos,api
And notice the output:
```bash
```shell
Nx read the output from the cache instead of running the command for 1 out of 2 tasks.
```

6
docs/shared/angular-tutorial/11-test-affected-projects.md
View File

@ -9,7 +9,7 @@ Because Nx understands the project graph of your workspace, Nx is efficient at r
**Commit all the changes in the repo**:
```bash
```shell
git add .
git commit -am 'init'
git checkout -b testbranch
@ -51,7 +51,7 @@ npx nx affected:test
You will see the following:
```bash
```shell
> NX Running target test for projects:
- ui
@ -73,7 +73,7 @@ Simply, re-run the command to retest the failed projects. The already successful
You can run any target against the affected projects in the graph like this:
```bash
```shell
# The following are equivalent
npx nx affected --target=build
npx nx affected:build

6
docs/shared/ci-overview.md
View File

@ -27,19 +27,19 @@ Nx Cloud allows this cache to be shared across your entire organization, meaning
In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
We enable agents to listen for Nx commands using:
```bash
```shell
npx nx-cloud start-agent
```
and notify Nx Cloud of the upcoming Nx commands using:
```bash
```shell
npx nx-cloud start-ci-run
```
Once all tasks are finished, we must not forget to cleanup used agents:
```bash
```shell
npx nx-cloud stop-all-agents
```

18
docs/shared/cli/generate.md
View File

@ -9,11 +9,11 @@ Runs a generator that creates and/or modifies files based on a generator from a
## Usage
```bash
```shell
nx generate <collection:generator>
```
```bash
```shell
nx g <generator>
```
@ -23,43 +23,43 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Generate a new Angular application:
```bash
```shell
nx generate @nrwl/angular:app myapp
```
Generate a new React application:
```bash
```shell
nx generate @nrwl/react:app myapp
```
Generate a new web component application:
```bash
```shell
nx generate @nrwl/web:app myapp
```
Generate a new Node application:
```bash
```shell
nx generate @nrwl/node:app myapp
```
Generate a new Angular library application:
```bash
```shell
nx generate @nrwl/angular:library mylibrary
```
Generate a new React library application:
```bash
```shell
nx generate @nrwl/react:library mylibrary
```
Generate a new Node library application:
```bash
```shell
nx generate @nrwl/node:library mylibrary
```

6
docs/shared/cli/run.md
View File

@ -9,7 +9,7 @@ Runs an Architect target with an optional custom builder configuration defined i
## Usage
```bash
```shell
nx run <target> [options]
```
@ -19,13 +19,13 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Run the `build` target for the `myapp` :
```bash
```shell
nx run myapp:build
```
Run the `build` target for the `myapp` project with a `production` configuration:
```bash
```shell
nx run myapp:build:production
```

8
docs/shared/concepts/how-caching-works.md
View File

@ -105,7 +105,7 @@ results.
Note, only the flags passed to the npm scripts itself affect results of the computation. For instance, the following
commands are identical from the caching perspective.
```bash
```shell
npx nx build remixapp
npx nx run-many --target=build --projects=remixapp
```
@ -116,13 +116,13 @@ If you build/test/lint… multiple projects, each individual build has its own h
from
cache or run. This means that from the caching point of view, the following command:
```bash
```shell
npx nx run-many --target=build --projects=header,footer
```
is identical to the following two commands:
```bash
```shell
npx nx build header
npx nx build footer
```
@ -177,7 +177,7 @@ If neither is defined, Nx defaults to caching `dist` and `build` at the root of
Sometimes you want to skip the cache. If, for example, you are measuring the performance of a command, you can use
the `--skip-nx-cache` flag to skip checking the computation cache.
```bash
```shell
npx nx run build --skip-nx-cache
npx nx run test --skip-nx-cache
```

2
docs/shared/concepts/task-pipeline-configuration.md
View File

@ -7,7 +7,7 @@ Nx runs tasks in the most efficient way possible. The `nx.json` file is the plac
If you want to increase the number of processes running tasks to, say, 5 (by default, it is 3), pass the
following:
```bash
```shell
npx nx build myapp --parallel=5
```

6
docs/shared/core-features/automate-updating-dependencies.md
View File

@ -16,13 +16,13 @@ Migration happens in three steps:
First, run the `migrate` command:
```bash
```shell
nx migrate latest # same as nx migrate @nrwl/workspace@latest
```
You can also specify the name of the package and the version:
```bash
```shell
nx migrate @nrwl/workspace@version # you can also specify version
```
@ -47,7 +47,7 @@ Each Nx plugin is able to provide a set of migrations which are relevant to part
The common case is that you will simply apply all migrations from the generated JSON file, exactly as they were generated in the previous step, by running:
```bash
```shell
nx migrate --run-migrations
```

2
docs/shared/core-features/cache-task-results.md
View File

@ -71,7 +71,7 @@ projects ([read more here](https://dev.to/nrwl/more-time-saved-for-free-with-nx-
You can connect your workspace to Nx Cloud by running:
```bash
```shell
npx nx connect-to-nx-cloud
```

4
docs/shared/core-features/distribute-task-execution.md
View File

@ -8,11 +8,11 @@ Nx supports running commands across multiple machines. You can either set it up
To distribute your task execution, you need to (1) connect to Nx Cloud and (2) enable DTE in your CI workflow. Each of these steps can be enabled with a single command:
```bash title="1. Connect to Nx Cloud"
```shell title="1. Connect to Nx Cloud"
nx connect-to-nx-cloud
```
```bash title="2. Enable DTE in CI"
```shell title="2. Enable DTE in CI"
nx generate @nrwl/workspace:ci-workflow --ci=github
```

4
docs/shared/core-features/enforce-project-boundaries.md
View File

@ -10,7 +10,7 @@ Nx provides an `enforce-module-boundaries` eslint rule that enforces the public
To set up the lint rule, install these dependencies:
```bash
```shell
npm i @nrwl/eslint-plugin-nx @nrwl/devkit
```
@ -142,7 +142,7 @@ Projects without any tags cannot depend on any other projects. If you add the fo
If you try to violate the constraints, you will get an error when linting:
```bash
```shell
A project tagged with "scope:admin" can only depend on projects
tagged with "scoped:shared" or "scope:admin".
```

2
docs/shared/core-features/explore-graph.md
View File

@ -4,7 +4,7 @@ For Nx to run tasks quickly and correctly, it creates a graph of the dependencie
To launch the project graph visualization run:
```bash
```shell
nx graph
```

6
docs/shared/core-features/run-tasks.md
View File

@ -56,7 +56,7 @@ Each project has the `test` and `build` targets defined. Tasks can be defined as
To run the `test` target on the `header` project run this command:
```bash
```shell
npx nx test header
```
@ -64,7 +64,7 @@ npx nx test header
To run the `build` target for all projects in the repo, run:
```bash
```shell
npx nx run-many --target=build
```
@ -87,7 +87,7 @@ the name of the target.
You can also run a command for all the projects affected in your PR like this:
```bash
```shell
npx nx affected --target=test
```

12
docs/shared/core-tutorial/01-create-blog.md
View File

@ -19,13 +19,13 @@ This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-bas
**Start by creating a new workspace.**
```bash
```shell
npx create-nx-workspace@latest
```
You then receive the following prompts in your command line:
```bash
```shell
Workspace name (e.g., org name) myorg
What to create in the new workspace npm
```
@ -63,14 +63,14 @@ To install Eleventy run:
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn add -D -W @11ty/eleventy@1.0.0
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install -D @11ty/eleventy@1.0.0
```
@ -113,7 +113,7 @@ If you have a `workspace.json` file in the root, delete it.
Now that we have the bare minimum set up for Eleventy, you can run:
```bash
```shell
nx serve blog
```
@ -121,7 +121,7 @@ And you can see `Hello, Eleventy` at `http://localhost:8080`.
Also, if you run:
```bash
```shell
nx build blog
```

6
docs/shared/core-tutorial/02-create-cli.md
View File

@ -10,7 +10,7 @@ Make sure you have Go installed locally by following [these instructions](https:
You can verify that Go is installed correctly by running:
```bash
```shell
go version
```
@ -101,7 +101,7 @@ func main() {
`packages/cli/src/cow.txt`:
```bash
```shell
_____
< moo >
-----
@ -116,7 +116,7 @@ func main() {
Now if you run `nx serve cli`, you'll see a friendly message:
```bash
```shell
❯ nx serve cli
> nx run cli:serve

8
docs/shared/core-tutorial/03-share-assets.md
View File

@ -18,7 +18,7 @@ Then move `cow.txt` out of the `cli` project to:
`packages/ascii/assets/cow.txt`:
```bash
```shell
_____
< moo >
-----
@ -156,13 +156,13 @@ For the cli project, you add the implicit dependencies in the `project.json` fil
You should now be able to run
```bash
```shell
nx serve blog
```
and
```bash
```shell
nx serve cli
```
@ -172,7 +172,7 @@ and get the same results as before.
You can view a visual representation of the project graph by running:
```bash
```shell
nx graph
```

10
docs/shared/core-tutorial/04-build-affected-projects.md
View File

@ -4,7 +4,7 @@ Nx scales your development by doing code change analysis to see what apps or lib
**Commit all the changes in the repo**:
```bash
```shell
git add .
git commit -am 'init'
git checkout -b testbranch
@ -38,7 +38,7 @@ func main() {
**Now revert those changes**
```bash
```shell
git checkout .
```
@ -46,7 +46,7 @@ git checkout .
Update `packages/ascii/assets/cow.txt`:
```bash
```shell
_____
< Hi! >
-----
@ -65,7 +65,7 @@ Printing the affected projects can be handy, but usually you want to do somethin
**Run `nx affected --target=build` to rebuild only the projects affected by the change.**
```bash
```shell
✔ nx run blog:build (1s)
✔ nx run cli:build (2s)
@ -82,7 +82,7 @@ Note that Nx only built `blog` and `cli`. It didn't build `ascii` because there
You can run any target against the affected projects in the graph like this:
```bash
```shell
nx affected --target=test
```

4
docs/shared/core-tutorial/05-auto-detect-dependencies.md
View File

@ -57,7 +57,7 @@ This library is exporting a single `message` string.
Install the `cowsay` npm package at the root of the workspace.
```bash
```shell
yarn add -W cowsay@1.5.0
```
@ -90,7 +90,7 @@ console.log(
Now if you run `nx serve cow`, you'll see this:
```bash
```shell
$ node index.js
______________________________________________________
< Welcome to the Restaurant at the End of the Universe >

4
docs/shared/cypress-component-testing.md
View File

@ -12,7 +12,7 @@ directly to a project, like [Jest](/packages/jest)
Use the `cypress-component-configuration` generator from the respective plugin to add component testing to a project.
```bash
```shell
nx g @nrwl/react:cypress-component-configuration --project=your-project
nx g @nrwl/angular:cypress-component-configuration --project=your-project
@ -22,7 +22,7 @@ You can optionally pass in `--generate-tests` to create component tests for all
Component testing leverages a build target within your workspace as the base for running the tests. The build target is usually an app within the workspace. By default, the generator attempts to find the build target for you based on the project usage, but you can manually specify the build target to use via the `--build-target` option.
```bash
```shell
nx g @nrwl/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build
nx g @nrwl/angular:cypress-component-configuration --project=your-project --build-target=my-ng-app:build

18
docs/shared/cypress-plugin.md
View File

@ -13,11 +13,11 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
If the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.
```bash
```shell
yarn add --dev @nrwl/cypress
```
```bash
```shell
npm install --save-dev @nrwl/cypress
```
@ -25,7 +25,7 @@ npm install --save-dev @nrwl/cypress
By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.
```bash
```shell
nx g @nrwl/web:app frontend
```
@ -33,13 +33,13 @@ nx g @nrwl/web:app frontend
To generate an E2E project based on an existing project, run the following generator
```bash
```shell
nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name
```
Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.
```bash
```shell
nx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200
```
@ -51,7 +51,7 @@ Run `nx e2e frontend-e2e` to execute e2e tests with Cypress.
You can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/recipe/use-executor-configurations#use-executor-configurations)
```bash
```shell
nx e2e frontend-e2e --configuration=production
```
@ -65,7 +65,7 @@ With, `nx e2e frontend-e2e --watch` Cypress will start in headed mode where you
Running Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application
running and Cypress will re-run those tests as you enhance and add to the suite.
```bash
```shell
nx e2e frontend-e2e --watch
```
@ -73,7 +73,7 @@ nx e2e frontend-e2e --watch
The `baseUrl` property provides you the ability to test an application hosted on a specific domain.
```bash
```shell
nx e2e frontend-e2e --baseUrl=https://frontend.com
```
@ -104,6 +104,6 @@ Optionally, you can pass environment variables via the commandline with the `--e
When using the `--env` flag, this will not be merged with any values used in the `env` executor option.
{% /callout %}
```bash
```shell
nx e2e frontend-e2e --env.API_URL="https://api.my-nx-website.com" --env.API_KEY="abc-123"
```

4
docs/shared/deprecated/default-collection.md
View File

@ -12,7 +12,7 @@ In the `nx.json` you can set a `defaultCollection` property like this:
This would cause the following command
```bash
```shell
nx g library my-lib
```
@ -20,7 +20,7 @@ To create a `@nrwl/next:library` library instead of some other generator with th
This property is no longer needed because the Nx cli automatically will prompt you to choose between the available options if there is any ambiguity. The output looks like this:
```bash
```shell
> nx g lib my-lib
? Which generator would you like to use? …
@nrwl/react-native:library

4
docs/shared/deprecated/workspace-executors.md
View File

@ -6,7 +6,7 @@ In Nx 13.10+, local nx plugins can contain executors that are used in the worksp
- If you don't already have a local plugin, use Nx to generate one:
```bash
```shell
# replace `latest` with the version that matches your Nx version
npm install @nrwl/nx-plugin@latest
nx g @nrwl/nx-plugin:plugin my-plugin
@ -14,7 +14,7 @@ nx g @nrwl/nx-plugin:plugin my-plugin
- Use the Nx CLI to generate the initial files needed for your executor. Replace `my-executor` with the name of your workspace executor.
```bash
```shell
nx generate @nrwl/nx-plugin:executor my-executor --project=my-plugin
```

6
docs/shared/deprecated/workspace-generators.md
View File

@ -10,7 +10,7 @@ Check the [nx-plugin guide](/packages/nx-plugin) for information on creating a n
- If you don't already have a local plugin, use Nx to generate one:
```bash
```shell
# replace `latest` with the version that matches your Nx version
npm install @nrwl/nx-plugin@latest
nx g @nrwl/nx-plugin:plugin my-plugin
@ -18,7 +18,7 @@ nx g @nrwl/nx-plugin:plugin my-plugin
- Use the Nx CLI to generate the initial files needed for your generator. Replace `my-generator` with the name of your workspace generator.
```bash
```shell
nx generate @nrwl/nx-plugin:generator my-generator --project=my-plugin
```
@ -26,6 +26,6 @@ nx generate @nrwl/nx-plugin:generator my-generator --project=my-plugin
- Now you can run the generator like this:
```bash
```shell
nx g my-generator
```

2
docs/shared/deprecated/workspace-json.md
View File

@ -13,7 +13,7 @@ The target configuration for each project is now stored in individual `project.j
To remove `workspace.json` in favor of `project.json` files, run:
```bash
```shell
nx g @nrwl/workspace:convert-to-nx-project --all
```

4
docs/shared/detox-plugin.md
View File

@ -27,7 +27,7 @@ npm install -g jest
By default, when creating a mobile application, Nx will use Detox to create the e2e tests project.
```bash
```shell
nx g @nrwl/react-native:app frontend
```
@ -101,7 +101,7 @@ For Android, in terminal, run `emulator -list-avds` to view a list of emulators
In addition, to override the device name specified in a configuration, you could use `--device-name` option: `nx test-ios <app-name-e2e> --device-name "iPhone 11"`. The `device-name` property provides you the ability to test an application run on specific device.
```bash
```shell
nx test-ios frontend-e2e --device-name "iPhone 11"
nx test-android frontend-e2e --device-name "Pixel_4a_API_30"
```

14
docs/shared/esbuild-plugin.md
View File

@ -16,14 +16,14 @@ To add the esbuild plugin to an existing workspace, run the following:
{% tabs %}
{% tab label="npm" %}
```bash
```shell
npm install -D @nrwl/esbuild
```
{% /tab %}
{% tab label="yarn" %}
```bash
```shell
yarn add -D @nrwl/esbuild
```
@ -34,7 +34,7 @@ yarn add -D @nrwl/esbuild
You can add a new library that builds using esbuild with:
```bash
```shell
nx g @nrwl/js:lib mylib --bundler=esbuild
```
@ -44,13 +44,13 @@ This command will install the esbuild plugin if needed, and set `@nrwl/esbuild:e
If you already have a JS project that you want to use esbuild for, run this command:
```bash
```shell
nx g esbuild-project mylib
```
This generator validates there isn't an existing `build` target. If you want to overwrite the existing target you can pass the `--skipValidation` option.
```bash
```shell
nx g esbuild-project mylib --skipValidation
```
@ -58,7 +58,7 @@ nx g esbuild-project mylib --skipValidation
You can run builds with:
```bash
```shell
nx build mylib
```
@ -100,7 +100,7 @@ dist/libs/mylib/
A metafile can be generated by passing the `--metafile` option. This file contains information about the build that can be analyzed by other tools, such as [bundle buddy](https://www.bundle-buddy.com/esbuild).
```bash
```shell
nx build mylib --metafile
```

6
docs/shared/eslint-plugin-nx.md
View File

@ -9,15 +9,15 @@ In any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the fol
{% tabs %}
{%tab label="npm"%}
````bash
```bash
````shell
```shell
npm i --save-dev @nrwl/eslint-plugin-nx
````
{% /tab %}
{%tab label="yarn"%}
```bash
```shell
yarn add --dev @nrwl/eslint-plugin-nx
```

4
docs/shared/express-plugin.md
View File

@ -16,14 +16,14 @@ Install the express plugin
{% tabs %}
{%tab label="npm"%}
```bash
```shell
npm i --save-dev @nrwl/express
```
{% /tab %}
{%tab label="yarn"%}
```bash
```shell
yarn add --dev @nrwl/express
```

2
docs/shared/generators/creating-files.md
View File

@ -67,7 +67,7 @@ Next, run the generator:
Use the `-d` or `--dry-run` flag to see your changes without applying them. This will let you see what the command will do to your workspace.
{% /callout %}
```bash
```shell
nx generate my-generator mylib
```

2
docs/shared/guides/browser-support.md
View File

@ -64,6 +64,6 @@ safari 12
Alternatively, if your support config is short you can just add it as a string param on the CLI:
```bash
```shell
npx browserslist '> 0.5%, not IE 11'
```

2
docs/shared/guides/customize-webpack.md
View File

@ -44,7 +44,7 @@ module.exports = async (config, context) => {
To add the `css-loader` to your config, install it and add the rule.
```bash
```shell
npm install -save-dev css-loader
```

2
docs/shared/guides/cypress/cypress-v10-migration.md
View File

@ -6,7 +6,7 @@ Before continuing, make sure you have all your changes committed and have a clea
You can migrate an E2E project to v10 by running the following command:
```bash
```shell
nx g @nrwl/cypress:migrate-to-cypress-10
```

6
docs/shared/guides/define-environment-variables.md
View File

@ -58,18 +58,18 @@ In Unix systems, we need to set the environment variables before calling a comma
Let's say that we want to define an API URL for the application to use:
```bash
```shell
NX_API_URL=http://localhost:3333 nx build myapp
```
**Windows (cmd.exe)**
```bash
```shell
set "NX_API_URL=http://localhost:3333" && nx build myapp
```
**Windows (Powershell)**
```bash
```shell
($env:NX_API_URL = "http://localhost:3333") -and (nx build myapp)
```

4
docs/shared/guides/deploy-nextjs-to-vercel.md
View File

@ -10,13 +10,13 @@ Starting from Nx 11, your Next.js application should already be ready for deploy
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
```shell
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
```shell
dist/apps/tuskdesk/.next
```

2
docs/shared/guides/js-and-ts.md
View File

@ -4,7 +4,7 @@ Nx is a general-purpose build system and a general-purpose CLI. It works with Ja
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
```shell
nx g @nrwl/react:app myapp --js
nx g @nrwl/react:component mycmp --project=myapp --js
```

8
docs/shared/guides/misc-ngrx.md
View File

@ -25,7 +25,7 @@ The `ngrx` schematic only provides a sub-set of schematics for the NgRx librarie
The following command is used to run the `ngrx` schematic:
```bash
```shell
nx g @nrwl/angular:ngrx <featurename> --module=<path-to-module> --no-interactive [options]
```
@ -48,7 +48,7 @@ To get started with NgRx in an Angular application, you set up the root level st
The example below shows you how to setup NgRx in the root of your application.
```bash
```shell
nx g @nrwl/angular:ngrx app --module=apps/<appname>/src/app/app.module.ts --root
```
@ -68,7 +68,7 @@ state to be easily shared across other libraries and applications. The steps bel
The example below generates a library to begin a new feature. For this example, `products` is used as the library name.
```bash
```shell
nx g @nrwl/angular:lib products
```
@ -77,7 +77,7 @@ 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
```shell
nx g @nrwl/angular:ngrx products --module=libs/products/src/lib/products.module.ts --directory +state/products --no-interactive
```

30
docs/shared/guides/module-federation/dynamic-mfe-angular.md
View File

@ -32,12 +32,12 @@ To achieve the aims, we will do the following:
To start with, we need to create a new Nx Workspace. We can do this easily with:
```bash
```shell
# Npm
npx create-nx-workspace ng-mf
```
```bash
```shell
# Yarn
yarn create nx-workspace ng-mf --packageManager=yarn
```
@ -54,12 +54,12 @@ To add Angular-related features to our newly created monorepo we need to install
Check that you are now at the root of your monorepo in your terminal. If not, run `cd ng-mf`.
{% /callout %}
```bash
```shell
# Npm
npm install --save-dev @nrwl/angular
```
```bash
```shell
# Yarn
yarn add -D @nrwl/angular
```
@ -72,12 +72,12 @@ We need to generate two applications that support Module Federation.
We'll start with the Admin Dashboard application which will act as a host application for the Micro-Frontends (_MFEs_):
```bash
```shell
# Npm
npx nx g @nrwl/angular:host dashboard
```
```bash
```shell
# Yarn
yarn nx g @nrwl/angular:host dashboard
```
@ -86,12 +86,12 @@ The application generator will create and modify the files needed to set up the
Now, let's generate the Login application as a remote application.
```bash
```shell
# Npm
npx nx g @nrwl/angular:remote login --host=dashboard
```
```bash
```shell
# Yarn
yarn nx g @nrwl/angular:remote login --host=dashboard
```
@ -168,7 +168,7 @@ We'll start by building the Login application, which will consist of a login for
Let's create a user data-access library that will be shared between the host application and the remote application. This will be used to determine if there is an authenticated user as well as providing logic for authenticating the user.
```bash
```shell
nx g @nrwl/angular:lib shared/data-access-user
```
@ -176,7 +176,7 @@ This will scaffold a new library for us to use.
We need an Angular Service that we will use to hold state:
```bash
```shell
nx g @nrwl/angular:service user --project=shared-data-access-user
```
@ -309,7 +309,7 @@ RouterModule.forRoot(
Now let's serve the application and view it in a browser to check that the form renders correctly.
```bash
```shell
nx run login:serve
```
@ -371,7 +371,7 @@ export class AppComponent implements OnInit {
We can run both the dashboard application and the login application and you can try it out using:
```bash
```shell
nx serve dashboard --devRemotes=login
```
@ -477,7 +477,7 @@ That’s all the changes required to replace Static Module Federation with Dynam
Running:
```bash
```shell
nx serve dashboard --devRemotes=login
```
@ -497,7 +497,7 @@ To showcase this, let’s create a new Host application that will use our previo
Run the following command to generate a new Host application that is preconfigured for Dynamic Federation and add specify the Login Remote application we want to add:
```bash
```shell
nx g @nrwl/angular:host employee --remotes=login --dynamic
```
@ -515,7 +515,7 @@ You should take a look at the files generated and see how the Login Remote appli
We’re going to demonstrate how when specifying a dynamic Host when adding a new Remote application, the Remote application will be added to the Host’s Micro Frontend Manifest file correctly.
```bash
```shell
nx g @nrwl/angular:remote todo --host=employee
```

18
docs/shared/guides/module-federation/faster-builds.md
View File

@ -51,7 +51,7 @@ These examples have fully functioning [CI](https://github.com/nrwl/react-module-
Now, let's continue by creating an empty Nx workspace.
```bash
```shell
# Replace acme with desired scope
npx create-nx-workspace acme --preset=empty
cd acme
@ -63,7 +63,7 @@ You will be prompted to enable Nx Cloud in the workspace. For the best experienc
Then, for React users, install the `@nrwl/react` plugin; and for Angular users, install the `@nrwl/angular` plugin.
```bash
```shell
# If you use React
npm install --save-dev @nrwl/react
@ -77,7 +77,7 @@ yarn add --dev @nrwl/angular
Next, generate the host and remote applications.
```bash
```shell
# React
nx g @nrwl/react:host host --remotes=shop,cart,about
@ -91,7 +91,7 @@ You can leave off the `--remotes` option and add them later with `nx g @nrwl/rea
Now, serve `host` to view it in your browser.
```bash
```shell
nx serve host --open
```
@ -99,7 +99,7 @@ The above command serves `host` in development mode, whereas the remotes are bui
To run one or more remotes in development mode, use the `--devRemotes` option.
```bash
```shell
nx serve host --open --devRemotes=shop,cart
```
@ -205,7 +205,7 @@ If you have any feedback regarding this feature, we'd love to hear from you--che
To use Module Federation well, we recommend that you enable [Nx Cloud](https://nx.app). If you haven't enabled it yet when using `create-nx-workspace`, you can do the following.
```bash
```shell
nx connect-to-nx-cloud
```
@ -213,7 +213,7 @@ With Nx Cloud enabled, a large set of builds can be skipped entirely when runnin
You can see this behavior locally if you serve the `host` twice.
```bash
```shell
nx serve host
# (kill server)
@ -225,7 +225,7 @@ The second serve starts up much faster, because the three remotes (`shop`, `cart
If you inspect the terminal output, you'll see something like this, even if you are on different machines.
```bash
```shell
> nx run about:build:development [existing outputs match the cache, left as is]
(snip)
@ -299,7 +299,7 @@ dist/apps
Now, we can add a simple deploy command to simulate deploying this folder to production.
```bash
```shell
nx g @nrwl/workspace:run-commands \
deploy \
--project=host \

2
docs/shared/guides/module-federation/micro-frontend-architecture.md
View File

@ -45,7 +45,7 @@ Keeping the applications independent allows them to be deployed on different cad
The generator for MFEs is the same as with basic Module Federation. You can use `nx g host` to create a new host
application, and `nx g remote` for remote applications.
```bash
```shell
# React
nx g @nrwl/react:host shell --remotes=shop,cart
nx g @nrwl/react:remote about --host=shell

2
docs/shared/guides/nx-devkit-angular-devkit.md
View File

@ -84,7 +84,7 @@ export default function (options: Schema): Rule {
The Nx CLI can invoke Nx Generator or Angular Schematics directly. When the user runs:
```bash
```shell
nx g mygenerator params
nx g mygenerator params # will work exactly the same same as the line above
```

2
docs/shared/guides/performance-profiling.md
View File

@ -7,7 +7,7 @@ Visualizing where and when the tasks were executed can help optimize the entire
1. Prepend `NX_PROFILE=profile.json` before running targets with Nx. For example,
```bash
```shell
# This builds the "cart" application and creates a profile.json file
NX_PROFILE=profile.json nx build cart

24
docs/shared/guides/react-native.md
View File

@ -10,7 +10,7 @@ In this guide we will show you how to develop [React Native](https://reactnative
The easiest way to create your workspace is via `npx`.
```bash
```shell
npx create-nx-workspace happynrwl \
--preset=react-native \
--appName=mobile
@ -20,7 +20,7 @@ npx create-nx-workspace happynrwl \
You can also run the command without arguments to go through the interactive prompts.
{% /callout %}
```bash
```shell
npx create-nx-workspace happynrwl
```
@ -82,13 +82,13 @@ To run the application in development mode:
On Android simulator/device:
```bash
```shell
npx nx run-android mobile
```
iOS simulator/device:
```bash
```shell
npx nx run-ios mobile
```
@ -103,7 +103,7 @@ Try out other commands as well.
**Android:**
```bash
```shell
npx nx build-android mobile
```
@ -115,13 +115,13 @@ No CLI support yet. Run in the Xcode project. See: https://reactnative.dev/docs/
**Android:**
```bash
```shell
npx nx test-android mobile-e2e
```
**iOS:** (Mac only)
```bash
```shell
npx nx test-ios mobile-e2e
```
@ -131,7 +131,7 @@ When using React Native in Nx, you get the out-of-the-box support for TypeScript
For existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.
```bash
```shell
npm install @nrwl/react-native --save-dev
# Or with yarn
@ -142,7 +142,7 @@ yarn add @nrwl/react-native --dev
To create additional React Native apps run:
```bash
```shell
npx nx g @nrwl/react-native:app
```
@ -159,7 +159,7 @@ and [Library Types](/more-concepts/library-types).
To generate a new library run:
```bash
```shell
npx nx g @nrwl/react-native:lib shared-ui-layout
```
@ -199,7 +199,7 @@ Run:
To generate a new component inside `shared-ui-layout` run:
```bash
```shell
npx nx g @nrwl/react-native:component layout --project=shared-ui-layout --export
```
@ -244,7 +244,7 @@ That's it! There is no need to build the library prior to using it. When you upd
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
```bash
```shell
npx nx g @nrwl/react-native:lib shared-ui-layout --publishable --importPath=@happynrwl/ui-components
npx nx g @nrwl/react-native:component layout --project=shared-ui-layout --export
```

6
docs/shared/guides/setup-incremental-builds-angular.md
View File

@ -35,7 +35,7 @@ To enable incremental builds you need to use buildable libraries.
You can generate a new buildable library with:
```bash
```shell
nx g @nrwl/angular:lib my-lib --buildable
```
@ -116,13 +116,13 @@ executor to `@nrwl/web:file-server` as shown below:
To build an application incrementally use the following command:
```bash
```shell
nx build my-app --parallel
```
To serve an application incrementally use this command:
```bash
```shell
nx serve my-app --parallel
```

8
docs/shared/guides/storybook/angular-storybook-compodoc.md
View File

@ -52,13 +52,13 @@ This guide assumes that you have an Angular project with Storybook configured in
First we need to install the necessary packages:
```bash
```shell
yarn add -D @compodoc/compodoc
```
or
```bash
```shell
npm install --save-dev @compodoc/compodoc
```
@ -145,12 +145,12 @@ setCompodocJson(docJson);
Now you can run Storybook or build Storybook, and documentation will be included. Just check the Docs tab!
```bash
```shell
nx storybook web
```
and
```bash
```shell
nx build-storybook web
```

4
docs/shared/guides/storybook/best-practices.md
View File

@ -94,13 +94,13 @@ Setting up Storybook on Nx reflects - and takes advantage of - the [mental model
In the process of setting up Storybook in your Nx workspace that we described above, you end up with one Storybook instance per project. That way, you can use your project’s Storybook targets to serve and build Storybook:
```bash
```shell
nx storybook my-project
```
and
```bash
```shell
nx build-storybook my-project
```

8
docs/shared/guides/storybook/plugin-angular.md
View File

@ -10,7 +10,7 @@ You first need to set up Storybook for your Nx workspace, if you haven't already
You can generate Storybook configuration for an individual Angular project with this command:
```bash
```shell
nx g @nrwl/angular:storybook-configuration project-name
```
@ -26,7 +26,7 @@ The `@nrwl/angular:storybook-configuration` generator has the option to automati
You can re-run it at a later point using the following command:
```bash
```shell
nx g @nrwl/angular:stories <project-name>
```
@ -36,7 +36,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
The command to generate stories for that library would be:
```bash
```shell
nx g @nrwl/angular:stories feature-ui
```
@ -76,7 +76,7 @@ The `storybook-configuration` generator gives the option to set up an e2e Cypres
To launch Storybook and run the Cypress tests against the iframe inside of Storybook:
```bash
```shell
nx run project-name-e2e:e2e
```

14
docs/shared/guides/storybook/plugin-overview.md
View File

@ -6,7 +6,7 @@ This guide will briefly walk you through using Storybook within an Nx workspace.
### Add the Storybook plugin
```bash
```shell
yarn add --dev @nrwl/storybook
```
@ -16,7 +16,7 @@ yarn add --dev @nrwl/storybook
You can generate Storybook configuration for an individual project with this command:
```bash
```shell
nx g @nrwl/storybook:configuration project-name
```
@ -47,7 +47,7 @@ Choosing one of these frameworks will have the following effects on your workspa
You can choose to configure your project using TypeScript instead of JavaScript. To do that, just add the `--tsConfiguration=true` flag to the above command, like this:
```bash
```shell
nx g @nrwl/storybook:configuration project-name --tsConfiguration=true
```
@ -57,13 +57,13 @@ nx g @nrwl/storybook:configuration project-name --tsConfiguration=true
Serve Storybook using this command:
```bash
```shell
nx run project-name:storybook
```
or
```bash
```shell
nx storybook project-name
```
@ -71,13 +71,13 @@ nx storybook project-name
Build Storybook using this command:
```bash
```shell
nx run project-name:build-storybook
```
or
```bash
```shell
nx build-storybook project-name
```

8
docs/shared/guides/storybook/plugin-react.md
View File

@ -10,7 +10,7 @@ You first need to set up Storybook for your Nx workspace, if you haven't already
You can generate Storybook configuration for an individual React project with this command:
```bash
```shell
nx g @nrwl/react:storybook-configuration project-name
```
@ -40,7 +40,7 @@ The `@nrwl/react:storybook-configuration` generator has the option to automatica
You can re-run it at a later point using the following command:
```bash
```shell
nx g @nrwl/react:stories <project-name>
```
@ -50,7 +50,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
The command to generate stories for that library would be:
```bash
```shell
nx g @nrwl/react:stories feature-ui
```
@ -90,7 +90,7 @@ The `storybook-configuration` generator gives the option to set up an e2e Cypres
To launch Storybook and run the Cypress tests against the iframe inside of Storybook:
```bash
```shell
nx run project-name-e2e:e2e
```

12
docs/shared/guides/storybook/storybook-composition-setup.md
View File

@ -51,13 +51,13 @@ In order to get get it working for you, you need to two two things:
1. Make sure your "composed" Storybook instances are running. For that you can do:
```bash
```shell
nx run-many --target=storybook --projects=one-composed,two-composed,three-composed --parallel=3
```
2. Start your host Storybook in another tab of your terminal:
```bash
```shell
nx storybook main-host
```
@ -143,7 +143,7 @@ The objective is to end up with a new target in your `main-host`'s `project.json
which you can then invoke like this:
```bash
```shell
nx run main-host:storybook-composition
```
@ -155,7 +155,7 @@ Let's first generate a new `target` called `storybook-composition` for our `main
Run the following command:
```bash
```shell
nx generate nx:run-commands storybook-composition --command='nx storybook one-composed' --project=main-host
```
@ -189,13 +189,13 @@ Now, change the `command` option to be `commands`, add the `"parallel": true` op
Now, you can start all your "composed" Storybook instances by running:
```bash
```shell
nx run main-host:storybook-composition
```
**After** all of your "composed" Storybook instances have started, you can run in a new terminal:
```bash
```shell
nx storybook main-host
```

4
docs/shared/guides/storybook/storybook-v6-angular.md
View File

@ -40,7 +40,7 @@ The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator will not exactly
That way, you can have working Storybook instances for all your projects just by running
```bash
```shell
nx g @nrwl/angular:storybook-migrate-defaults-5-to-6
```
@ -96,7 +96,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
```bash
```shell
yarn add --dev @storybook/angular@latest
```

4
docs/shared/guides/storybook/storybook-v6-react.md
View File

@ -40,7 +40,7 @@ The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator will not exactly d
That way, you can have working Storybook instances for all your projects just by running
```bash
```shell
nx g @nrwl/react:storybook-migrate-defaults-5-to-6
```
@ -94,7 +94,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
```bash
```shell
yarn add --dev @storybook/react@latest
```

2
docs/shared/guides/use-environment-variables-in-angular.md
View File

@ -8,7 +8,7 @@ do the following.
First, install `@types/node` so we can use `process.env` in our code.
```bash
```shell
npm install --save-dev @types/node
# Or with yarn

6
docs/shared/guides/using-tailwind-css-in-react.md
View File

@ -8,7 +8,7 @@ For more in-depth look on this topic, be sure to check out our blog post on [Set
The easiest way to set up Tailwind is using the `@nrwl/react:setup-tailwind` generator.
```bash
```shell
nx g @nrwl/react:setup-tailwind --project=<your app here>
```
@ -30,7 +30,7 @@ These manual steps are not required if you use the generator from the previous s
### Step 1: Install Tailwind Dependencies
```bash
```shell
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# or with yarn
@ -43,7 +43,7 @@ This installs the requisite tailwind dependencies.
The simplest way to initialize Tailwind is to use their CLI.
```bash
```shell
cd apps/{your app here}
npx tailwindcss init -p
```

8
docs/shared/guides/using-tailwind-css-with-angular-projects.md
View File

@ -71,7 +71,7 @@ In the above, you are invoking the `createGlobPatternsForDependencies` utility f
To generate an Angular application with Tailwind CSS configured by default, you can use the following command:
```bash
```shell
npx nx g @nrwl/angular:app my-app --add-tailwind
```
@ -79,7 +79,7 @@ npx nx g @nrwl/angular:app my-app --add-tailwind
To generate an Angular buildable library with Tailwind CSS configured by default, you can use the following command:
```bash
```shell
npx nx g @nrwl/angular:lib my-lib --buildable --add-tailwind
```
@ -87,7 +87,7 @@ npx nx g @nrwl/angular:lib my-lib --buildable --add-tailwind
To generate an Angular publishable library with Tailwind CSS configured by default, you can use the following command:
```bash
```shell
npx nx g @nrwl/angular:lib my-lib --publishable --importPath=@my-org/my-lib --add-tailwind
```
@ -95,7 +95,7 @@ npx nx g @nrwl/angular:lib my-lib --publishable --importPath=@my-org/my-lib --ad
To add Tailwind CSS to an existing Angular application, buildable library or publishable library, you can use the following command:
```bash
```shell
npx nx g @nrwl/angular:setup-tailwind my-project
```

6
docs/shared/incremental-builds.md
View File

@ -3,7 +3,7 @@
As your applications are getting bigger, one of the main ways to scale your development is to build them in an incremental fashion.
Right now, for instance, say we generate an application and a library as follows:
```bash
```shell
nx g @nrwl/react:app myapp
nx g @nrwl/react:lib mylib
```
@ -17,13 +17,13 @@ This provides the best dev experience for small and medium-size applications, be
Nx has **publishable libraries**. As the name suggests, such libraries are meant to be built and published to some package registry s.t. they can be consumed also from outside the Nx workspace. The executor for building a publishable library does more than just building. It makes sure the output is properly compressed and might even produce more bundles s.t. the package can be consumed in a variety of ways (e.g. also produces UMD bundles).
```bash
```shell
nx g @nrwl/react:lib mylib --publishable --importPath=@myorg/mylib
```
On the other hand, the executor of a **buildable library**, performs a subset of the operations compared to the publishable library's executor. That's because buildable libraries are not intended to be published and thus only produce the minimum necessary output for the incremental build scenario to work. For example, no UMD bundles or minification is being done. The main goal of the executor is to perform the build as fast as possible.
```bash
```shell
nx g @nrwl/react:lib mylib --buildable
```

8
docs/shared/js-plugin.md
View File

@ -9,14 +9,14 @@ In any Nx workspace, you can install `@nrwl/js` by running the following command
{% tabs %}
{%tab label="npm"%}
```bash
```shell
npm i --save-dev @nrwl/js
```
{% /tab %}
{%tab label="yarn"%}
```bash
```shell
yarn add --dev @nrwl/js
```
@ -30,14 +30,14 @@ When initializing a new Nx workspace, specifying `--preset=ts` will generate a w
{% tabs %}
{%tab label="npm"%}
```bash
```shell
npx create-nx-workspace my-org --preset=ts
```
{% /tab %}
{%tab label="yarn"%}
```bash
```shell
yarn create nx-workspace my-org --preset=ts
```

8
docs/shared/linter-plugin.md
View File

@ -6,11 +6,11 @@ The Linter plugin contains executors, generator, plugin and utilities used for l
In any Nx workspace, you can install `@nrwl/linter` by running the following commands if `@nrwl/linter` package is not installed:
```bash
```shell
npm i --save-dev @nrwl/linter
```
```bash
```shell
yarn add --dev @nrwl/linter
```
@ -18,11 +18,11 @@ yarn add --dev @nrwl/linter
You can lint an application or a library with the following command:
```bash
```shell
nx lint my-app
```
```bash
```shell
nx lint my-lib
```

2
docs/shared/migration/adding-to-monorepo.md
View File

@ -11,7 +11,7 @@ Adding Nx is a low impact operation that does not require any particular change
packages and scripts are organized. Whatever setup you have still works the same way but faster and with better dev
ergonomics. You could manually configure Nx, but it is way easier by running the following command:
```bash
```shell
npx add-nx-to-monorepo
```

6
docs/shared/migration/lerna-and-nx.md
View File

@ -42,7 +42,7 @@ To enable Nx support (and thus speed up task running) go through the following s
**1. Install Nx**
```bash
```shell
npm i nx --save-dev
```
@ -89,7 +89,7 @@ This does not include distributed caching or distributed task execution powered
Nx can be added to an existing Lerna monorepo by running the following command:
```bash
```shell
npx add-nx-to-monorepo
```
@ -101,7 +101,7 @@ This will
You can then run your package's npm scripts by simply invoking
```bash
```shell
nx <command> <package-name>
```

22
docs/shared/migration/manual.md
View File

@ -12,7 +12,7 @@ To get started, you’ll need an Nx workspace. While Nx offers several preset co
To create an empty workspace:
```bash
```shell
npx create-nx-workspace@latest
```
@ -34,7 +34,7 @@ The `apps` directory is the place where your top-level applications will be stor
{% tabs %}
{% tab label="Angular" %}
```bash
```shell
npm install --save-dev @nrwl/angular
# then
nx generate @nrwl/angular:application my-application
@ -43,7 +43,7 @@ nx generate @nrwl/angular:application my-application
{% /tab %}
{% tab label="React" %}
```bash
```shell
npm install --save-dev @nrwl/react
# then
nx generate @nrwl/react:application my-application
@ -97,7 +97,7 @@ Now that your code is present, it’s time to tackle building and testing it.
Each generated application has a build process defined by Nx. This uses the Angular CLI for Angular, and webpack is used for all other projects. See if this build process works out of the box for you by running
```bash
```shell
nx serve my-application
```
@ -107,7 +107,7 @@ If this doesn’t work for you, you may need to add or modify some configuration
Each application will have a unit test process defined by your choices (Jest or Karma) during the creation of the application. To run tests for your application:
```bash
```shell
nx test my-application
```
@ -119,7 +119,7 @@ Testing configuration files can be found in the root of your application as well
Each application will have an e2e configuration created as a separate application, appended with `-e2e`. In our example, you’ll see `my-application-e2e`. This `e2e` task uses the test runner you chose during generation, Protractor or Cypress. Your application’s e2e tests should be migrated to this directory. There will be an e2e test scaffolded for you to make sure everything works before you start adding your own. To run the e2e tests:
```bash
```shell
nx e2e my-application-e2e
```
@ -131,13 +131,13 @@ Nx uses ESLint for linting. Nx also has its own lint process to make sure your N
To run the `lint` task for your workspace
```bash
```shell
nx lint
```
To run the `lint` task for a particular application:
```bash
```shell
nx lint my-application
```
@ -147,7 +147,7 @@ Global configuration files for linting will be at the root of your workspace. Ea
Nx uses Prettier to ensure standard formatting across your codebase. Prettier configuration files are located in the root of the workspace. To format your workspace run:
```bash
```shell
nx format:write
```
@ -174,14 +174,14 @@ If your code is divided into libraries, you should also generate libraries for y
{% tabs %}
{% tab label="Angular" %}
```bash
```shell
nx generate @nrwl/angular:library
```
{% /tab %}
{% tab label="React" %}
```bash
```shell
nx generate @nrwl/react:library
```

24
docs/shared/migration/migration-angular.md
View File

@ -15,7 +15,7 @@ width="100%" /%}
To use the Nx CLI in an existing Angular CLI workspace while keeping your existing file structure in place, use the `ng add` command with the `--preserve-angular-cli-layout` option:
```bash
```shell
ng add @nrwl/angular --preserve-angular-cli-layout
```
@ -59,7 +59,7 @@ To fully take advantage of all the features provided by Nx and the Nx Angular pl
To transform an Angular CLI workspace to an Nx workspace, run the following command:
```bash
```shell
ng add @nrwl/angular
```
@ -187,19 +187,19 @@ To start, run the command to generate an Nx workspace with an Angular applicatio
**Using `npx`**
```bash
```shell
npx create-nx-workspace myorg --preset=angular
```
**Using `npm init`**
```bash
```shell
npm init nx-workspace myorg --preset=angular
```
**Using `yarn create`**
```bash
```shell
yarn create nx-workspace myorg --preset=angular
```
@ -260,7 +260,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your application runs correctly by running:
```bash
```shell
ng serve <app name>
```
@ -270,7 +270,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
Verify your tests run correctly by running:
```bash
```shell
ng test <app name>
```
@ -325,7 +325,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
```bash
```shell
ng test <app name>
```
@ -333,7 +333,7 @@ ng test <app name>
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
```bash
```shell
ng e2e <app name>-e2e
```
@ -404,7 +404,7 @@ Update the `apps/<app name>/tsconfig.json` to extend the root `tsconfig.json`:
Verify your E2E tests run correctly by running:
```bash
```shell
ng e2e <app name>-e2e
```
@ -416,13 +416,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
Verify your lint checks run correctly by running:
```bash
```shell
npm run lint
```
OR
```bash
```shell
yarn lint
```

22
docs/shared/migration/migration-angularjs.md
View File

@ -24,7 +24,7 @@ The RealWorld app is a great example of an AngularJS app, but it probably doesn
To start migrating the Real World app, create an Nx workspace:
```bash
```shell
npx create-nx-workspace@latest nx-migrate-angularjs
```
@ -32,7 +32,7 @@ When prompted choose the `apps` preset. The other presets use certain recommende
At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or not. By using Nx Cloud, you’ll be able to share the computation cache of operations like build, test or even your own commands with everyone working on the same project. Whether you choose to use it or not, the outcome of the migration won’t be affected and you can always change your choice later.
```bash
```shell
? What to create in the new workspace empty [an empty workspace with a layout that works best for building apps]
? Set up distributed caching using Nx Cloud (It's free and doesn't require registration.) Yes [Faster builds, run details, GitHub integration. Learn more at https://nx.app]
```
@ -41,7 +41,7 @@ At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or
Your new workspace won’t have much in it because of the `apps` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace:
```bash
```shell
npm install -D @nrwl/angular
```
@ -53,13 +53,13 @@ Codebases with existing unit and e2e tests should continue to use whatever runne
With the Angular capability added, generate your application:
```bash
```shell
nx generate @nrwl/angular:application --name=realworld --unitTestRunner=karma --e2eTestRunner=protractor
```
Accept the default options for each prompt:
```bash
```shell
? Which stylesheet format would you like to use? CSS
? Would you like to configure routing for this application? No
```
@ -345,7 +345,7 @@ You need to point your `build` and `serve` tasks at this gulp build process. Typ
This sets up the `build` and `serve` commands to use the locally installed version of gulp to run `build` and `serve`. To see the RealWorld app working, run:
```bash
```shell
nx serve realworld
```
@ -361,7 +361,7 @@ So far, you’ve mostly gotten already existing code and processes to work. This
But migrating AngularJS code means we need to switch some of our tools to a more modern tool stack. Specifically, using webpack and babel is going to allow us to take advantage of Nx more easily. Becoming an expert in these build tools is outside the scope of this article, but I’ll address some AngularJS specific concerns. To get started, install these new dependencies:
```bash
```shell
npm install -D @nrwl/web babel-plugin-angularjs-annotate
```
@ -558,7 +558,7 @@ angular.bootstrap(document, ['app'], {
Run the application the same way as before:
```bash
```shell
nx serve realworld
```
@ -568,7 +568,7 @@ Unit testing can be an important part of any code migration. If you migrate your
You need a few dependencies for AngularJS unit testing that Nx doesn’t provide by default:
```bash
```shell
npm install -D angular-mocks@1.5.11 karma-webpack
```
@ -676,7 +676,7 @@ This unit test does a check to make sure the component compiles and that it sets
To run the unit tests:
```bash
```shell
nx test
```
@ -757,7 +757,7 @@ You also need to modify the project configuration of the `realworld-e2e` app at
To run e2e tests, use the `e2e` command:
```bash
```shell
nx e2e realworld-e2e
```

22
docs/shared/migration/migration-cra.md
View File

@ -16,7 +16,7 @@ You can use the [`cra-to-nx`](https://www.npmjs.com/package/cra-to-nx) tool, tha
Just `cd` into your Create-React-App (CRA) project and run the following command:
```bash
```shell
npx cra-to-nx
```
@ -53,7 +53,7 @@ There is also a [repo](https://github.com/nrwl/cra-to-nx-migration) that shows t
To start migrating your app, create an Nx workspace:
```bash
```shell
npx create-nx-workspace@latest acme --appName=webapp --preset=react --style=css --nx-cloud
```
@ -68,7 +68,7 @@ We'll need to add a few dependencies to the Nx workspace that are needed to allo
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn add --dev react-scripts @testing-library/jest-dom eslint-config-react-app @craco/craco
yarn add web-vitals
```
@ -76,7 +76,7 @@ yarn add web-vitals
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install --force --save-dev react-scripts @testing-library/jest-dom eslint-config-react-app @craco/craco
npm install --save web-vitals
```
@ -92,7 +92,7 @@ The `@craco/craco` package allows us to customize the webpack and jest config wi
The source code for each app in an Nx workspace should be contained within the folder of a generated app. The `create-nx-workspace` command from step 1 created an app folder at `apps/webapp` that we can use to contain the CRA app. Delete the existing contents and copy over the CRA app code.
```bash
```shell
cd apps/webapp
ls -A . | grep -v 'project.json' | xargs rm -rf
cd -
@ -247,7 +247,7 @@ Modify `apps/webapp/tsconfig.json` to extend the root `tsconfig.base.json`. This
It's helpful to have separate `tsconfig.json` files for testing and linting. In this instance, the actual typescript settings are identical to the base config, so these tsconfig files will extend the base without modifying any values.
```bash
```shell
echo '{ "extends": "./tsconfig.json" }' > apps/webapp/tsconfig.app.json
echo '{ "extends": "./tsconfig.json" }' > apps/webapp/tsconfig.spec.json
```
@ -256,7 +256,7 @@ echo '{ "extends": "./tsconfig.json" }' > apps/webapp/tsconfig.spec.json
CRA checks to make sure there are no incompatible dependencies before any scripts run, but the `@nrwl/react` plugin serves the same purpose and requires slightly different versions in order to function correctly in an Nx workspace. Setting this environment variable disables CRA's check.
```bash
```shell
echo "SKIP_PREFLIGHT_CHECK=true" > .env
```
@ -264,7 +264,7 @@ echo "SKIP_PREFLIGHT_CHECK=true" > .env
An `apps/webapp/node_modules` folder will be generated to hold some cache values when a build is run. This cache shouldn't be committed to git, so we tell git to ignore any `node_modules` folder.
```bash
```shell
echo "node_modules" >> .gitignore
```
@ -274,7 +274,7 @@ echo "node_modules" >> .gitignore
The following commands are now available for you to try.
```bash
```shell
npx nx serve webapp
npx nx build webapp
npx nx test webapp
@ -290,7 +290,7 @@ The `serve` command will automatically update when code changes, but needs to be
Nx makes it very easy to create isolated collections of reusable code in libraries. Running this script will create a library named `ui-button`.
```bash
```shell
nx generate lib ui-button
```
@ -314,7 +314,7 @@ The `@acme/ui-button` path alias is defined in the root `tsconfig.base.json` fil
Now serve the app again to see the result:
```bash
```shell
nx serve webapp
```

4
docs/shared/migration/preserving-git-histories.md
View File

@ -12,13 +12,13 @@ To merge in another project, we'll essentially use the standard `git merge` comm
To start we'll add a remote repository url for where the standalone app is located:
```bash
```shell
git remote add my-standalone-app <repository url>
```
Assuming that our main branch on this repo is called 'master', then we'll run
```bash
```shell
git merge my-standalone-app/master --allow-unrelated-histories
```

2
docs/shared/monorepo-nx-enterprise.md
View File

@ -143,7 +143,7 @@ It's crucial for a large company with multiple teams contributing to the same re
Since Nx allows us to group apps and libs in directories, those directories can become code-ownership boundaries. That's why the structure of an Nx workspace often reflects the structure of an organization. GitHub users can use the `CODEOWNERS` file for that.
```bash
```shell
/libs/happynrwlapp julie-happynrwlapp-lead
/apps/happynrwlapp julie-happynrwlapp-lead
/libs/shared/ui hank-the-ui-guy

26
docs/shared/next-plugin.md
View File

@ -12,12 +12,12 @@ To create a new Nx workspace with Next.js, run `npx create-nx-workspace@latest -
To add Next.js to an existing Nx workspace, install the `@nrwl/next` package. Make sure to install the version that matches your `@nrwl/workspace` version.
```bash
```shell
#yarn
yarn add --dev @nrwl/next
```
```bash
```shell
#npm
npm install --save-dev @nrwl/next
```
@ -26,7 +26,7 @@ npm install --save-dev @nrwl/next
You can add a new application with the following:
```bash
```shell
nx g @nrwl/next:app my-new-app
```
@ -43,7 +43,7 @@ and [Library Types](/more-concepts/library-types).
To generate a new library run:
```bash
```shell
nx g @nrwl/next:lib my-new-lib
```
@ -51,7 +51,7 @@ nx g @nrwl/next:lib my-new-lib
Nx also provides commands to quickly generate new pages and components for your application.
```bash
```shell
nx g @nrwl/next:page my-new-page --project=my-new-app
nx g @nrwl/next:component my-new-component --project=my-new-app
@ -69,7 +69,7 @@ You can run `nx serve my-new-app` to serve a Next.js application called `my-new-
To serve a Next.js application for production, add the `--prod` flag to the serve command:
```bash
```shell
nx serve my-new-app --prod
```
@ -97,7 +97,7 @@ There is no need to build the library prior to using it. When you update your li
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
```bash
```shell
nx g @nrwl/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
```
@ -105,7 +105,7 @@ nx g @nrwl/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-componen
You can run unit tests with:
```bash
```shell
nx test my-new-app
nx test my-new-lib
```
@ -114,7 +114,7 @@ Replace `my-new-app` and `my-new-lib` with the name or the project you want to t
You can also run E2E tests for applications:
```bash
```shell
nx e2e my-new-app-e2e
```
@ -124,7 +124,7 @@ Replace `my-new-app-e2e` with the name or your project with -e2e appended.
You can lint projects with:
```bash
```shell
nx lint my-new-app
nx lint my-new-lib
```
@ -135,13 +135,13 @@ Replace `my-new-app` and `my-new-lib` with the name or the project you want to t
Next.js applications can be build with:
```bash
```shell
nx build my-new-app
```
And if you generated a library with --buildable, then you can build a library as well:
```bash
```shell
nx build my-new-lib
```
@ -153,7 +153,7 @@ The library in `dist` is publishable to npm or a private registry.
Next.js applications can be statically exported with:
```bash
```shell
nx export my-new-app
```

14
docs/shared/node-plugin.md
View File

@ -4,7 +4,7 @@ The Node Plugin contains generators and executors to manage Node applications wi
To add the Node plugin to an existing workspace, run one of the following:
```bash
```shell
# For npm users
npm install -D @nrwl/node
@ -16,7 +16,7 @@ yarn add -D @nrwl/node
You can add a new application with the following:
```bash
```shell
nx g @nrwl/node:application my-new-app
```
@ -26,7 +26,7 @@ You can run your application with `nx serve my-new-app`, which starts it in watc
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
```bash
```shell
nx g @nrwl/js:node my-new-lib
# If you want the library to be buildable or publishable to npm
@ -42,7 +42,7 @@ nx g @nrwl/node:lib my-new-lib \
You can run unit tests with:
```bash
```shell
nx test my-new-app
nx test my-new-lib
```
@ -53,13 +53,13 @@ Replace `my-new-app` with the name or your project. This command works for both
Node applications can be build with:
```bash
```shell
nx build my-new-app
```
And if you generated a library with `--buildable`, then you can build a library as well:
```bash
```shell
nx build my-new-lib
```
@ -69,7 +69,7 @@ The output is in the `dist` folder. You can customize the output folder by setti
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
```bash
```shell
nx g @nrwl/node:application my-new-app \
--frontendProject my-react-app
```

16
docs/shared/node-tutorial/01-create-application.md
View File

@ -26,13 +26,13 @@ This tutorial sets up an [integrated repo](/concepts/integrated-vs-package-based
**Start by creating a new workspace.**
```bash
```shell
npx create-nx-workspace@latest
```
You then receive the following prompts in your command line:
```bash
```shell
Workspace name (e.g., org name) myorg
What to create in the new workspace nest
Application name todos
@ -86,14 +86,14 @@ To fix it, you can either install the `nx` cli globally by running:
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn global add nx
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install -g nx
```
@ -105,14 +105,14 @@ Or you can prepend every command with `npm run`:
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn nx serve todos
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npx nx serve todos
```
@ -129,7 +129,7 @@ Every target uses an executor which actually runs this target. So targets are an
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
```bash
```shell
nx run todos:serve [options,...]
Options:
@ -152,7 +152,7 @@ But, most importantly, it provides a holistic dev experience regardless of the t
Now that the application is set up, run it locally via:
```bash
```shell
nx serve todos
```

6
docs/shared/node-tutorial/02-display-todos.md
View File

@ -15,7 +15,7 @@ With Nx, you have the ability to scaffold out new code for your application. Cre
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
```bash
```shell
$ nx generate @nrwl/nest:service todos --project todos --directory app
CREATE apps/todos/src/app/todos/todos.service.spec.ts (453 bytes)
CREATE apps/todos/src/app/todos/todos.service.ts (89 bytes)
@ -62,14 +62,14 @@ In order to render some views, you need to install a template engine:
{% tabs %}
{% tab label="yarn" %}
```bash
```shell
yarn add hbs
```
{% /tab %}
{% tab label="npm" %}
```bash
```shell
npm install --save hbs
```

2
docs/shared/node-tutorial/03-share-code.md
View File

@ -11,7 +11,7 @@ Next, work on refactoring a bit. The next work to do is move the `Todo` type to
**Run the following generator to create a library:**
```bash
```shell
nx g @nrwl/workspace:lib data
```

2
docs/shared/node-tutorial/04-create-libs.md
View File

@ -17,7 +17,7 @@ To illustrate how useful libraries can be, create a new Auth library with a cont
Run
```bash
```shell
nx g @nrwl/nest:lib auth --controller
```

4
docs/shared/node-tutorial/06-computation-caching.md
View File

@ -9,7 +9,7 @@ Nx has built-in computation caching, which drastically improves the performance
**To see it in action, run `nx build todos`:**
```bash
```shell
> nx run todos:build
Starting type checking service...
Using 14 workers with 2048MB memory limit
@ -21,7 +21,7 @@ chunk {main} main.js, main.js.map (main) 4.17 KiB [entry] [rendered]
**Now, run `nx build todos` again, and you will see the results appearing instantly:**
```bash
```shell
> nx run todos:build
> NX NOTE Cached Output:

6
docs/shared/node-tutorial/07-test-affected-projects.md
View File

@ -9,7 +9,7 @@ In addition to supporting computation caching, Nx scales your development by doi
**Commit all the changes in the repo**:
```bash
```shell
git add .
git commit -am 'init'
git checkout -b testbranch
@ -50,7 +50,7 @@ Printing the affected projects can be handy, but usually you want to do somethin
As you can see, because the code was updated without updating the tests, the unit tests failed.
```bash
```shell
> NX Running target test for projects:
- auth
@ -69,7 +69,7 @@ Note that Nx only tried to retest `auth` and `todos`. It didn't retest `data` be
You can run any target against the affected projects in the graph like this:
```bash
```shell
# The following are equivalent
nx affected --target=build
nx affected:build

14
docs/shared/npm-tutorial/integrated.md
View File

@ -4,7 +4,7 @@
Start by creating a new workspace. We can use the following command that will help us set it up.
```bash
```shell
npx create-nx-workspace@latest myorg --preset=ts
```
@ -24,7 +24,7 @@ myorg/
Nx comes with generators that can help with scaffolding applications. Run this generator to make a new library named `is-even`:
```bash
```shell
npx nx generate @nrwl/js:library is-even --publishable --importPath @myorg/is-even
```
@ -95,7 +95,7 @@ The local linking of packages in an integrated monorepo style is handled by Nx a
To illustrate that, let's create another package `is-odd`. We can again run the generator for that:
```bash
```shell
npx nx generate @nrwl/js:library is-odd --publishable --importPath @myorg/is-odd
```
@ -152,7 +152,7 @@ This tells Nx to run the `build` target of all the dependent projects first, bef
Remove any existing `dist` folder at the root of the workspace and run:
```bash
```shell
npx nx build is-odd
```
@ -162,7 +162,7 @@ It will automatically first run `npx nx build is-even`, so you should end up wit
To build the `is-even` package run:
```bash
```shell
npx nx build is-even
```
@ -183,7 +183,7 @@ Done compiling TypeScript files for project "is-even".
To run the `build` target for all the packages in the workspace, use:
```bash
```shell
npx nx run-many --target=build
```
@ -204,7 +204,7 @@ Note how on the `is-even:build` it didn't run the build but rather pulled it out
You can also only run tasks on packages that got changed by using
```bash
```shell
npx nx affected --target=build
```

Some files were not shown because too many files have changed in this diff Show More