Skip to content

Commit

Permalink
docs(nxdev): generate menu api (#10272)
Browse files Browse the repository at this point in the history
  • Loading branch information
bcabanes committed May 12, 2022
1 parent a2d9d56 commit d46e49c
Show file tree
Hide file tree
Showing 42 changed files with 574 additions and 988 deletions.
1 change: 1 addition & 0 deletions docs/generated/packages/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/angular",
"file": "shared/angular-plugin",
"content": "![Angular logo](/shared/angular-logo.png)\n\nThe 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## 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](/structure/creating-libraries)\n- [Library Types](/structure/library-types)\n- [Buildable and Publishable Libraries](/structure/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Setup Module Federation with Angular and Nx](/module-federation/faster-builds)\n- [Using NgRx](/guides/misc-ngrx)\n- [Using DataPersistence](/guides/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/guides/misc-upgrade)\n- [Using Tailwind CSS with Angular projects](/guides/using-tailwind-css-with-angular-projects)\n"
}
Expand Down
153 changes: 152 additions & 1 deletion docs/generated/packages/cli.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/generated/packages/cypress.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/cypress",
"file": "shared/cypress-plugin",
"content": "![Cypress logo](/shared/cypress-logo.png)\n\nCypress is an e2e test runner built for 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### Generating Applications\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\nYou can create a new Cypress E2E project for an existing project.\n\nIf the `@nrwl/cypress` package is not installed, install the version that matches your `@nrwl/workspace` version.\n\n```bash\nyarn add --dev @nrwl/cypress\n```\n\n```bash\nnpm install --save-dev @nrwl/cypress\n```\n\nNext, generate an E2E project based on an existing project.\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name\n```\n\nReplace `your-app-name` with the app's name as defined in your `workspace.json` file.\n\n## Using Cypress\n\n### Testing Applications\n\nSimply run `nx e2e frontend-e2e` to execute e2e 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 terminal. Screenshots and videos will be accessible in `dist/apps/frontend/screenshots` and `dist/apps/frontend/videos`.\n\n### Watching for Changes\n\nWith, `nx e2e frontend-e2e --watch` Cypress will start in the application mode.\n\nRunning 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.\n\nCypress doesn't currently re-run your tests after changes are made to application code when it runs in “headed” mode.\n\n### Using Cypress in the Headed Mode\n\nYou can run Cypress in headed mode to see your app being tested. To do this, pass in the `--watch` option. E.g: `nx frontend-e2e --watch`\n\n### Testing Against Prod Build\n\nYou can run your e2e test against a production build like this: `nx e2e frontend-e2e --prod`.\n\n## Configuration\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 the `cypress.json` file, or will error.\n\n### Using cypress.json\n\nIf you need to fine tune your Cypress setup, you can do so by modifying `cypress.json` in the e2e project. For instance, you can easily add your `projectId` to save all the screenshots and videos into your Cypress dashboard. The complete configuration is documented on [the official website](https://docs.cypress.io/guides/references/configuration.html#Options).\n\n## More Documentation\n\nReact Nx Tutorial\n\n- [Step 2: Add E2E Tests](/react-tutorial/02-add-e2e-test)\n- [Step 3: Display Todos](/react-tutorial/03-display-todos)\n\nAngular Nx Tutorial\n\n- [Step 2: Add E2E Tests](/angular-tutorial/02-add-e2e-test)\n- [Step 3: Display Todos](/angular-tutorial/03-display-todos)\n"
}
Expand Down
1 change: 1 addition & 0 deletions docs/generated/packages/detox.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/detox",
"file": "shared/detox-plugin",
"content": "![Detox logo](/shared/detox-logo.png)\n\nDetox 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```sh\n# yarn\nyarn add --dev @nrwl/detox\n```\n\n```sh\n# npm\nnpm install --save-dev @nrwl/detox\n```\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 `workspace.json` file.\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 additon, 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"
}
Expand Down
10 changes: 9 additions & 1 deletion docs/generated/packages/eslint-plugin-nx.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@
"description": "ESLint Plugin for Nx",
"root": "/packages/eslint-plugin-nx",
"source": "/packages/eslint-plugin-nx/src",
"documentation": [],
"documentation": [
{
"id": "overview",
"name": "Overview",
"path": "/packages/eslint-plugin-nx",
"file": "shared/eslint-plugin-nx",
"content": "![ESLint logo](/shared/eslint-logo.png)\n\nA 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```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n```\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\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```json\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- [Imposing Constraints on the Project Graph](/structure/monorepo-tags)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
}
],
"generators": [],
"executors": []
}
1 change: 1 addition & 0 deletions docs/generated/packages/express.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/express",
"file": "shared/express-plugin",
"content": "![Express Logo](/shared/express-logo.png)\n\n[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```shell\nnpm install --save-dev @nrwl/express\n```\n\n```shell\nyarn add --dev @nrwl/express\n```\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`](/js/overview#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](/configuration/projectjson).\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](/jest/overview)\n- [@nrwl/js](/js/overview)\n- [Express](https://expressjs.com/)\n"
}
Expand Down
1 change: 1 addition & 0 deletions docs/generated/packages/jest.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/jest",
"file": "shared/jest-plugin",
"content": "![Jest logo](/shared/jest-logo.png)\n\n[Jest](https://jestjs.io/) is an open source test runner created by Facebook. It has a lot of great features:\n\n- Immersive watch mode for providing near instant feedback when developing tests.\n- Snapshot testing for validating features.\n- Great built-in reporter for printing out test results.\n\n## Setting up Jest\n\nBy default, Nx will use Jest when creating applications and libraries.\n\n```shell\nnx g @nrwl/web:app frontend\n```\n\n### Adding Jest to an Existing Project\n\nAdd Jest to a project using the `jest-project` generator from `@nrwl/jest`.\n\nFirst, install `@nrwl/jest`, if not already installed using your preferred package manager.\n\n```shell\nnpm install --save-dev @nrwl/jest\n```\n\n```shell\nyarn add --dev @nrwl/jest\n```\n\nOnce installed, run the `jest-project` generator\n\n```shell\nnx g @nrwl/jest:jest-project --project=<project-name>\n```\n\n> Hint: You can use the `--dry-run` flag to see what will be generated.\n\nReplacing `<project-name>` with the name of the project you're wanting to add Jest too.\n\n## Using Jest\n\n### Testing Applications\n\nThe recommended way to run/debug Jest tests via an editor\n\n- [VSCode](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)\n- [Webstorm](https://blog.jetbrains.com/webstorm/2018/10/testing-with-jest-in-webstorm/)\n\nTo run Jest tests via nx use\n\n```shell\nnx test frontend\n```\n\n### Watching for Changes\n\nUsing the `--watch` flag will run the tests whenever a file changes.\n\n```shell\nnx test frontend --watch\n```\n\n### Snapshot Testing\n\nJest has support for **Snapshot Testing**, a tool which simplifies validating data. Check out the [official Jest Documentation on Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing).\n\nExample of using snapshots:\n\n```typescript\ndescribe('SuperAwesomFunction', () => {\n it('should return the correct data shape', () => {\n const actual = superAwesomFunction();\n expect(actual).toMatchSnapshot();\n });\n});\n```\n\nWhen using snapshots, you can update them with the `--updateSnapshot` flag, `-u` for short.\n\n> By default, snapshots will be generated when there are not existing snapshots for the associated test.\n\n```shell\nnx test frontend -u\n```\n\nSnapshot files should be checked in with your code.\n\n### Performance in CI\n\nTypically, in CI it's recommended to use `nx affected --target=test --parallel=[# CPUs] -- --runInBand` for the best performance.\n\nThis is because each [jest process creates a workers based on system resources](https://jestjs.io/docs/cli#--maxworkersnumstring), running multiple projects via nx and using jest workers will create too many process overall causing the system to run slower than desired. Using the `--runInBand` flag tells jest to run in a single process.\n\n## Configurations\n\n### Jest\n\nPrimary configurations for Jest will be via the `jest.config.js` file that generated for your project. This file will extend the root `jest.config.js` file. Learn more about [Jest configurations](https://jestjs.io/docs/configuration#options).\n\n### Nx\n\nNx Jest Plugin options can be configured via the [project config file](/configuration/projectjson) or via the [command line flags](/jest/jest).\n\n> Hint: Use `--help` to see all available options\n>\n> ```shell\n> nx test <project-name> --help\n> ```\n\n### Code Coverage\n\nEnable code coverage with the `--coverage` flag or by adding it to the executor options in the [project configuration file](/configuration/projectjson).\n\nBy default, coverage reports will be generated in the `coverage/` directory under projects name. i.e. `coverage/apps/frontend`. Modify this directory with the `--coverageDirectory` flag. Coverage reporters can also be customized with the `--coverageReporters` flag.\n\n> `coverageDirectory` and `coverageReporters` are configurable via the project configuration file as well.\n\n### Global setup/teardown with nx libraries\n\nIn order to use Jest's global setup/teardown functions that reference nx libraries, you'll need to register the TS path for jest to resolve the libraries.\nNx provides a helper function that you can import within your setup/teardown file.\n\n```typescript\nimport { registerTsProject } from 'nx/src/utils/register';\nconst cleanupRegisteredPaths = registerTsProject('.', 'tsconfig.base.json');\n\nimport { yourFancyFunction } from '@some-org/my-util-library';\nexport default async function () {\n yourFancyFunction();\n}\n// make sure to run the clean up!\ncleanupRegisteredPaths();\n```\n\n## Debugging Failing Tests\n\nIf your code editor doesn't provide a way to debug your tests, you can leverage the Chrome DevTools to debug your tests with the `--inspect-brk` flag for node.\n\n```shell\nnode --inspect-brk ./node_modules/@nrwl/cli/bin/nx test <project-name>\n```\n\nEnter [chrome://inspect](chrome://inspect) in Chrome address bar and inspect the target to attach to the node process. Visit the official [Jest documentation](https://jestjs.io/docs/en/troubleshooting#tests-are-failing-and-you-don-t-know-why) to find out more.\n\n## More Documentation\n\n- [Jest Docs](https://jestjs.io/)\n- [@nrwl/jest options](/jest/jest)\n"
}
Expand Down

1 comment on commit d46e49c

@vercel
Copy link

@vercel vercel bot commented on d46e49c May 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-dev-nrwl.vercel.app
nx-dev-git-master-nrwl.vercel.app
nx.dev
nx-five.vercel.app

Please sign in to comment.