docs(nxdev): flatten the docs

This commit is contained in:
Isaac Mann 2021-02-05 13:18:44 -05:00 committed by Victor Savkin
parent 023e11513b
commit e55234f2eb
23 changed files with 195 additions and 381 deletions

View File

@ -259,14 +259,14 @@ For example:
2. `workspaceRoot/apps/my-app/.env` contains `AUTH_URL=https://prod-url.com/auth`
3. Nx will first load the variables from `apps/my-app/.local.env` into the process. When it tries to load the variables from `apps/my-app/.env`, it will notice that `AUTH_URL` already exists, so it will ignore it.
We recommend nesting your **app** specific `env` files in `apps/your-app`, and creating workspace/root level `env` files for workspace-specific settings (like the [Nx Cloud token](https://nx.dev/angular/core-concepts/computation-caching#nx-cloud-and-distributed-computation-memoization)).
We recommend nesting your **app** specific `env` files in `apps/your-app`, and creating workspace/root level `env` files for workspace-specific settings (like the [Nx Cloud token](/{{framework}}/core-concepts/computation-caching#nx-cloud-and-distributed-computation-memoization)).
### Pointing to custom env files
If you want to load variables from `env` files other than the ones listed above:
1. Use the [env-cmd](https://www.npmjs.com/package/env-cmd) package: `env-cmd -f .qa.env nx serve`
2. Use the `envFile` option of the [run-commands](https://nx.dev/angular/plugins/workspace/builders/run-commands#envfile) builder and execute your command inside of the builder
2. Use the `envFile` option of the [run-commands](/{{framework}}/workspace/run-commands-executor#envfile) builder and execute your command inside of the builder
## ng add Functionality

View File

@ -35,7 +35,7 @@ The most common additional options are:
- `syntax` - NgRx introduced new creator functions for actions, reducers, and effects that provide the same type-safety with less code than action classes.
- `facade` - Optional. If you prefer to further encapsulate NgRx from your components, add an injectable facade. See the blog [Better State Management with Facades](https://blog.nrwl.io/nrwl-nx-6-2-angular-6-1-and-better-state-management-e139da2cd074#cb93) for details.
See the [API Docs](/{{framework}}/plugins_angular_schematics/ngrx) for detailed descriptions of all the available options. Also visit the [NgRx](https://ngrx.io) website for more guides and documentation about the libraries.
See the [API Docs](/{{framework}}/angular/ngrx) for detailed descriptions of all the available options. Also visit the [NgRx](https://ngrx.io) website for more guides and documentation about the libraries.
---

View File

@ -37,7 +37,7 @@ For each project for which you want to enable compodoc, add a target in `angular
}
```
For more information, see the [run-commands api doc](/{{framework}}/plugins_workspace_builders/run-commands).
For more information, see the [run-commands api doc](/{{framework}}/workspace/run-commands-executor).
Note: Replace `apps/my-app/tsconfig.app.json` with the appropriate `tsconfig.json` path for each project.

View File

@ -90,8 +90,8 @@ Your workspace is now powered by Nx! You can verify out that your application st
Learn more about the advantages of Nx in the following guides:
- [Using Cypress for e2e tests](/angular/plugins/cypress/overview)
- [Using Jest for unit tests](/angular/plugins/jest/overview)
- [Using Cypress for e2e tests](/angular/cypress/overview)
- [Using Jest for unit tests](/angular/jest/overview)
- [Computation Caching](/angular/core-concepts/computation-caching)
- [Rebuilding and Retesting What is Affected](/angular/core-concepts/affected)
@ -374,6 +374,6 @@ yarn lint
Learn more about the advantages of Nx in the following guides:
[Using Cypress for e2e tests](/angular/plugins/cypress/overview) \
[Using Jest for unit tests](/angular/plugins/jest/overview) \
[Using Cypress for e2e tests](/angular/cypress/overview) \
[Using Jest for unit tests](/angular/jest/overview) \
[Rebuilding and Retesting What is Affected](/angular/core-concepts/affected)

View File

@ -4,7 +4,7 @@
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
By default, Nx uses [Cypress](/{{framework}}/plugins/cypress/overview) to run E2E tests.
By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests.
**Open `apps/todos-e2e/src/support/app.po.ts`.** It's a page object file that contains helpers for querying the page.

View File

@ -130,7 +130,7 @@ import { AppService } from './app.service';
export class AppModule {}
```
We recommend using the [Nest](/{{framework}}/plugins/nest/overview) framework when creating node applications. Nest is a powerful framework which helps develop robust node applications. You can also use Express or any node libraries with Nx.
We recommend using the [Nest](/{{framework}}/nest/overview) framework when creating node applications. Nest is a powerful framework which helps develop robust node applications. You can also use Express or any node libraries with Nx.
In this case you have an application that registers a service and a controller. Services in Nest are responsible for the business logic, and controllers are responsible for implementing Http endpoints.

View File

@ -316,7 +316,7 @@
},
{
"name": "run-commands generator",
"id": "run-commands",
"id": "run-commands-generator",
"file": "angular/api-workspace/generators/run-commands"
},
{
@ -326,7 +326,7 @@
},
{
"name": "run-commands executor",
"id": "run-commands",
"id": "run-commands-executor",
"file": "angular/api-workspace/executors/run-commands"
},
{
@ -787,6 +787,43 @@
}
]
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"name": "application generator",
"id": "application",
"file": "angular/api-gatsby/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "angular/api-gatsby/generators/component"
},
{
"name": "page generator",
"id": "page",
"file": "angular/api-gatsby/generators/page"
},
{
"name": "build executor",
"id": "build",
"file": "angular/api-gatsby/executors/build"
},
{
"name": "server executor",
"id": "server",
"file": "angular/api-gatsby/executors/server"
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
@ -1317,7 +1354,7 @@
},
{
"name": "run-commands generator",
"id": "run-commands",
"id": "run-commands-generator",
"file": "react/api-workspace/generators/run-commands"
},
{
@ -1327,7 +1364,7 @@
},
{
"name": "run-commands executor",
"id": "run-commands",
"id": "run-commands-executor",
"file": "react/api-workspace/executors/run-commands"
},
{
@ -1749,104 +1786,6 @@
"name": "service generator",
"id": "service",
"file": "react/api-nest/generators/service"
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "application",
"id": "application",
"file": "angular/api-gatsby/generators/application"
},
{
"name": "component",
"id": "component",
"file": "angular/api-gatsby/generators/component"
},
{
"name": "page",
"id": "page",
"file": "angular/api-gatsby/generators/page"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "build",
"id": "build",
"file": "angular/api-gatsby/executors/build"
},
{
"name": "server",
"id": "server",
"file": "angular/api-gatsby/executors/server"
}
]
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/nx-plugin Overview",
"file": "shared/nx-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "executor",
"id": "executor",
"file": "angular/api-nx-plugin/generators/executor"
},
{
"name": "migration",
"id": "migration",
"file": "angular/api-nx-plugin/generators/migration"
},
{
"name": "plugin",
"id": "plugin",
"file": "angular/api-nx-plugin/generators/plugin"
},
{
"name": "generator",
"id": "schematic",
"file": "angular/api-nx-plugin/generators/generator"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "e2e",
"id": "e2e",
"file": "angular/api-nx-plugin/executors/e2e"
}
]
}
]
}
]
},
@ -1892,6 +1831,43 @@
}
]
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"name": "application generator",
"id": "application",
"file": "react/api-gatsby/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "react/api-gatsby/generators/component"
},
{
"name": "page generator",
"id": "page",
"file": "react/api-gatsby/generators/page"
},
{
"name": "build executor",
"id": "build",
"file": "react/api-gatsby/executors/build"
},
{
"name": "server executor",
"id": "server",
"file": "react/api-gatsby/executors/server"
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
@ -2375,7 +2351,7 @@
},
{
"name": "run-commands generator",
"id": "run-commands",
"id": "run-commands-generator",
"file": "node/api-workspace/generators/run-commands"
},
{
@ -2385,111 +2361,13 @@
},
{
"name": "run-commands executor",
"id": "run-commands",
"id": "run-commands-executor",
"file": "node/api-workspace/executors/run-commands"
},
{
"name": "run-script executor",
"id": "run-script",
"file": "node/api-workspace/executors/run-script"
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "application",
"id": "application",
"file": "react/api-gatsby/generators/application"
},
{
"name": "component",
"id": "component",
"file": "react/api-gatsby/generators/component"
},
{
"name": "page",
"id": "page",
"file": "react/api-gatsby/generators/page"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "build",
"id": "build",
"file": "react/api-gatsby/executors/build"
},
{
"name": "server",
"id": "server",
"file": "react/api-gatsby/executors/server"
}
]
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/nx-plugin Overview",
"file": "shared/nx-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "executor",
"id": "executor",
"file": "react/api-nx-plugin/generators/executor"
},
{
"name": "migration",
"id": "migration",
"file": "react/api-nx-plugin/generators/migration"
},
{
"name": "plugin",
"id": "plugin",
"file": "react/api-nx-plugin/generators/plugin"
},
{
"name": "generator",
"id": "schematic",
"file": "react/api-nx-plugin/generators/generator"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "e2e",
"id": "e2e",
"file": "react/api-nx-plugin/executors/e2e"
}
]
}
]
}
]
},
@ -2938,6 +2816,43 @@
}
]
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"name": "application generator",
"id": "application",
"file": "node/api-gatsby/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "node/api-gatsby/generators/component"
},
{
"name": "page generator",
"id": "page",
"file": "node/api-gatsby/generators/page"
},
{
"name": "build executor",
"id": "build",
"file": "node/api-gatsby/executors/build"
},
{
"name": "server executor",
"id": "server",
"file": "node/api-gatsby/executors/server"
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
@ -3045,104 +2960,6 @@
"name": "Dependency Graph",
"id": "dependency-graph",
"file": "shared/workspace/structure/dependency-graph"
},
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "application",
"id": "application",
"file": "node/api-gatsby/generators/application"
},
{
"name": "component",
"id": "component",
"file": "node/api-gatsby/generators/component"
},
{
"name": "page",
"id": "page",
"file": "node/api-gatsby/generators/page"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "build",
"id": "build",
"file": "node/api-gatsby/executors/build"
},
{
"name": "server",
"id": "server",
"file": "node/api-gatsby/executors/server"
}
]
}
]
},
{
"name": "Nx Plugin",
"id": "nx-plugin",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/nx-plugin Overview",
"file": "shared/nx-plugin"
},
{
"id": "generators",
"name": "Generators",
"itemList": [
{
"name": "executor",
"id": "executor",
"file": "node/api-nx-plugin/generators/executor"
},
{
"name": "migration",
"id": "migration",
"file": "node/api-nx-plugin/generators/migration"
},
{
"name": "plugin",
"id": "plugin",
"file": "node/api-nx-plugin/generators/plugin"
},
{
"name": "generator",
"id": "schematic",
"file": "node/api-nx-plugin/generators/generator"
}
]
},
{
"id": "executors",
"name": "Executors / Builders",
"itemList": [
{
"name": "e2e",
"id": "e2e",
"file": "node/api-nx-plugin/executors/e2e"
}
]
}
]
}
]
},

View File

@ -56,11 +56,11 @@ For example:
2. `workspaceRoot/apps/my-app/.env` contains `AUTH_URL=https://prod-url.com/auth`
3. Nx will first load the variables from `apps/my-app/.local.env` into the process. When it tries to load the variables from `apps/my-app/.env`, it will notice that `AUTH_URL` already exists, so it will ignore it.
We recommend nesting your **app** specific `env` files in `apps/your-app`, and creating workspace/root level `env` files for workspace-specific settings (like the [Nx Cloud token](https://nx.dev/react/core-concepts/computation-caching#nx-cloud-and-distributed-computation-memoization)).
We recommend nesting your **app** specific `env` files in `apps/your-app`, and creating workspace/root level `env` files for workspace-specific settings (like the [Nx Cloud token](/{{framework}}/core-concepts/computation-caching#nx-cloud-and-distributed-computation-memoization)).
### Pointing to custom env files
If you want to load variables from `env` files other than the ones listed above:
1. Use the [env-cmd](https://www.npmjs.com/package/env-cmd) package: `env-cmd -f .qa.env nx serve`
2. Use the `envFile` option of the [run-commands](https://nx.dev/react/plugins/workspace/builders/run-commands#envfile) builder and execute your command inside of the builder
2. Use the `envFile` option of the [run-commands](/{{framework}}/workspace/run-commands-executor#envfile) builder and execute your command inside of the builder

View File

@ -6,7 +6,7 @@
In this tutorial you will use Nx to build a full-stack application out of common libraries using modern technologies.
> Next.js: Nx also has first-class Next.js support. Read more about it [here](https://nx.dev/react/plugins/next/overview)
> Next.js: Nx also has first-class Next.js support. Read more about it [here](/{{framework}}/next/overview)
## Create a New Workspace

View File

@ -87,20 +87,20 @@ myorg/
## Executors / Builders
- [package](/{{framework}}/plugins/angular/executors/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
- [package](/{{framework}}/angular/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
## Generators
- [application](/{{framework}}/plugins/angular/generators/application) - Create an Angular application
- [downgrade-module](/{{framework}}/plugins/angular/generators/downgrade-module) - Setup Downgrade Module
- [karma](/{{framework}}/plugins/angular/generators/karma) - Add karma configuration to a workspace
- [karma-project](/{{framework}}/plugins/angular/generators/karma-project) - Add karma testing to a project
- [library](/{{framework}}/plugins/angular/generators/library) - Create an Angular library
- [move](/{{framework}}/plugins/angular/generators/move) - Move an Angular application or library to another folder within the workspace
- [ngrx](/{{framework}}/plugins/angular/generators/ngrx) - Add and use NgRx for state management
- [stories](/{{framework}}/plugins/angular/generators/stories) - Create stories/specs for all components declared in a library
- [storybook-configuration](/{{framework}}/plugins/angular/generators/storybook-configuration) - Setup configuration for Storybook
- [upgrade-module](/{{framework}}/plugins/angular/generators/upgrade-module) - Add an upgrade module
- [application](/{{framework}}/angular/application) - Create an Angular application
- [downgrade-module](/{{framework}}/angular/downgrade-module) - Setup Downgrade Module
- [karma](/{{framework}}/angular/karma) - Add karma configuration to a workspace
- [karma-project](/{{framework}}/angular/karma-project) - Add karma testing to a project
- [library](/{{framework}}/angular/library) - Create an Angular library
- [move](/{{framework}}/angular/move) - Move an Angular application or library to another folder within the workspace
- [ngrx](/{{framework}}/angular/ngrx) - Add and use NgRx for state management
- [stories](/{{framework}}/angular/stories) - Create stories/specs for all components declared in a library
- [storybook-configuration](/{{framework}}/angular/storybook-configuration) - Setup configuration for Storybook
- [upgrade-module](/{{framework}}/angular/upgrade-module) - Add an upgrade module
## Public API

View File

@ -442,8 +442,8 @@ The Nx devkit only uses language primitives (promises and async iterables). It d
## Using Generators and Executors
There are three main ways ot use generators and executors:
There are three main ways to use generators and executors:
- Workspace generators. Learn more in [this guide](/{{framework}}/workspace/generators/workspace-generators)
- Workspace executors. Learn more in [this guide](/{{framework}}/workspace/executors/tools-workspace-builders)
- Creating custom plugins. Learn more in [this guide](/{{framework}}/plugins/nx-plugin/overview)
- Workspace generators. Learn more in [this guide](/{{framework}}/generators/workspace-generators)
- Workspace executors. Learn more in [this guide](/{{framework}}/executors/creating-custom-builders)
- Creating custom plugins. Learn more in [this guide](/{{framework}}/nx-plugin/overview)

View File

@ -66,11 +66,11 @@ myorg/
## Executors / Builders
- [build](/{{framework}}/plugins/gatsby/executors/build) - Builds a Gatsby application
- [server](/{{framework}}/plugins/gatsby/executors/server) - Builds and serves a Gatsby application
- [build](/{{framework}}/gatsby/build) - Builds a Gatsby application
- [server](/{{framework}}/gatsby/server) - Builds and serves a Gatsby application
## Generators
- [application](/{{framework}}/plugins/gatsby/generators/application) - Create a Gatsby application
- [component](/{{framework}}/plugins/gatsby/generators/component) - Create a Gatsby component
- [page](/{{framework}}/plugins/gatsby/generators/page) - Create a Gatsby page
- [application](/{{framework}}/gatsby/application) - Create a Gatsby application
- [component](/{{framework}}/gatsby/component) - Create a Gatsby component
- [page](/{{framework}}/gatsby/page) - Create a Gatsby page

View File

@ -27,7 +27,7 @@ On the other hand, the executor of a **buildable library**, performs a subset of
nx g @nrwl/react:lib mylib --buildable
```
Read more about [Publishable and Buildable Nx Libraries here.](https://nx.dev/latest/workspace/structure/buildable-and-publishable-libraries)
Read more about [Publishable and Buildable Nx Libraries here.](/{{framework}}/structure/buildable-and-publishable-libraries)
## Nx computation cache and Nx Cloud

View File

@ -57,8 +57,8 @@ nx generate @nrwl/react:application my-application
There are a lot of options when creating your application. If you want to follow Nx recommendations, you can accept the defaults. If you have a well-established codebase, you can configure those options at the time of application generation. You can find documentation for these options for the different frameworks here:
- [Angular](/{{framework}}/plugins/angular/generators/application)
- [React](/{{framework}}/plugins/react/generators/application)
- [Angular](/{{framework}}/angular/application)
- [React](/{{framework}}/react/application)
You may also find it useful to use the [Nx Console](/{{framework}}/getting-started/console) in Visual Studio Code. This will give you a visual way to generate your application with all of the options laid out in front of you.
@ -72,11 +72,11 @@ In general, you should not replace the configuration files provided for you. You
In addition to configuration files for external libraries, your Nx workspace will have configuration files for Nx itself. This will be `angular.json` for workspaces using the Angular CLI and `workspace.json` for workspaces using the Nx CLI. This file will define all of the individual projects in your workspace (of which your application is one) and the tasks available for them.
For example, your generated application should have four [tasks available]({{framework}}/workspace/builders/using-builders) for it: `build`, `serve`, `lint`, and `test`. Each of these comes with its own configuration. If you find you need to adjust the configuration of a task for your codebase, this is the place to begin looking.
For example, your generated application should have four [tasks available]({{framework}}/executors/using-builders) for it: `build`, `serve`, `lint`, and `test`. Each of these comes with its own configuration. If you find you need to adjust the configuration of a task for your codebase, this is the place to begin looking.
These workspace configuration files can seem a little long and intimidating. The Nx Console can help you navigate it more easily with its Workspace JSON panel. By clicking on a project in your workspace, it will navigate you to the right place in the workspace file to begin making edits.
Additionally, there is an `nx.json` file that contains metadata about your projects. [This metadata includes tags]({{framework}}/workspace/structure/monorepo-tags) that can help you impose constraints on your applications and library dependencies.
Additionally, there is an `nx.json` file that contains metadata about your projects. [This metadata includes tags]({{framework}}/structure/monorepo-tags) that can help you impose constraints on your applications and library dependencies.
## Migrating your code
@ -167,11 +167,11 @@ nx format:write
Nx offers built-in tasks for the most common needs: `serve`, `build`, `test`, `e2e`, and `lint`. You likely have additional tasks that are needed to manage or deploy your codebase. These tasks might include deployment, i18n workflows, or uploading assets to CDNs. These tasks can be set up as scripts that you run manually with node, ts-node, or npm scripts. You can migrate those tasks over as-is, to begin with.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/{{framework}}/workspace/builders/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the dependency graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/{{framework}}/executors/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the dependency graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
Your use-case may also be covered by one of our community plugins. Plugin authors are able to extend the functionality of Nx through our plugin API.
[Learn more about the `run-commands` builder](/{{framework}}/plugins/workspace/builders/run-commands)
[Learn more about the `run-commands` builder](/{{framework}}/workspace/run-commands-executor)
[Learn more about caching](/{{framework}}/core-concepts/computation-caching)
@ -198,4 +198,4 @@ Its important to remember: dont just drop your code anywhere! Always gener
Establishing code boundaries
If youre consolidating multiple repositories or libraries into a single Nx workspace, you may have concerns about code boundaries. Previously, you may have had well-established boundaries by separating code into different repositories or having a public API for a library. Nx features a tagging system that allows you to enforce these code boundaries in a granular way. Each project can be tagged, and you can constrain dependencies based on these tags.
[Learn more about tags and dependency constraints](/{{framework}}/workspace/structure/monorepo-tags)
[Learn more about tags and dependency constraints](/{{framework}}/structure/monorepo-tags)

View File

@ -64,10 +64,10 @@ myorg/
## Executors / Builders
- [build](/{{framework}}/plugins/next/executors/build) - Builds a Next.js application
- [dev-server](/{{framework}}/plugins/next/executors/dev-server) - Builds and serves a Next.js application
- [export](/{{framework}}/plugins/next/executors/package) - Export a Next.js app. The exported application is located at `dist/$outputPath/exported`
- [build](/{{framework}}/next/build) - Builds a Next.js application
- [server](/{{framework}}/next/server) - Builds and serves a Next.js application
- [export](/{{framework}}/next/package) - Export a Next.js app. The exported application is located at `dist/$outputPath/exported`
## Generators
- [application](/{{framework}}/plugins/next/generators/application) - Create an Next.js application
- [application](/{{framework}}/next/application) - Create an Next.js application

View File

@ -69,22 +69,22 @@ myorg/
## See Also
- [Using Cypress](/{{framework}}/plugins/cypress/overview)
- [Using Jest](/{{framework}}/plugins/jest/overview)
- [Using Storybook](/{{framework}}/plugins/storybook/overview)
- [Using Cypress](/{{framework}}/cypress/overview)
- [Using Jest](/{{framework}}/jest/overview)
- [Using Storybook](/{{framework}}/storybook/overview)
## Executors / Builders
React applications are built using the executors from the `@nrwl/web` plugin.
- [build](/{{framework}}/plugins/web/executors/build) - Builds a web components application
- [dev-server](/{{framework}}/plugins/web/executors/package) - Builds and serves a web application
- [package](/{{framework}}/plugins/web/executors/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
- [build](/{{framework}}/web/build) - Builds a web components application
- [dev-server](/{{framework}}/web/package) - Builds and serves a web application
- [package](/{{framework}}/web/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
## Generators
- [application](/{{framework}}/plugins/react/generators/application) - Create an React application
- [component](/{{framework}}/plugins/react/generators/component) - Create an React library
- [library](/{{framework}}/plugins/react/generators/library) - Create an React library
- [redux](/{{framework}}/plugins/react/generators/redux) - Generate a Redux slice for a project
- [storybook-configuration](/{{framework}}/plugins/react/generators/storybook-configuration) - Set up Storybook for a react library
- [application](/{{framework}}/react/application) - Create an React application
- [component](/{{framework}}/react/component) - Create an React library
- [library](/{{framework}}/react/library) - Create an React library
- [redux](/{{framework}}/react/redux) - Generate a Redux slice for a project
- [storybook-configuration](/{{framework}}/react/storybook-configuration) - Set up Storybook for a react library

View File

@ -42,7 +42,7 @@ For each project for which you want to enable `make`, add a target in `workspace
}
```
For more information, see the [run-commands api doc](/{{framework}}/plugins/workspace/builders/run-commands).
For more information, see the [run-commands api doc](/{{framework}}/workspace/run-commands-executor).
##### 3. Trigger the executor from the terminal

View File

@ -6,15 +6,15 @@ Generators provide a way to automate many tasks you regularly perform as part of
Generators can be written using `@nx/devkit` or `@angular/devkit`. Generators written with the `@angular/devkit` are called schematics. To read more about the concepts of `@angular/devkit` schematics, and building an example schematic, see the [Schematics Authoring Guide](https://angular.io/guide/schematics-authoring).
The [Workspace Generators](/{{framework}}/workspace/generators/workspace-generators) guide shows you how to create, run, and customize workspace generators within your Nx workspace.
The [Workspace Generators](/{{framework}}/generators/workspace-generators) guide shows you how to create, run, and customize workspace generators within your Nx workspace.
## Types of Generators
There are three main types of generators:
1. **Plugin Generators** are available when an Nx plugin has been installed in your workspace.
2. **Workspace Generators** are generators that you can create for your own workspace. [Workspace generators](/{{framework}}/workspace/generators/workspace-generators) allow you to codify the processes that are unique to your own organization.
3. **Update Generators** are invoked by Nx plugins when you [update Nx](/{{framework}}/workspace/update) to keep your config files in sync with the latest versions of third party tools.
2. **Workspace Generators** are generators that you can create for your own workspace. [Workspace generators](/{{framework}}/generators/workspace-generators) allow you to codify the processes that are unique to your own organization.
3. **Update Generators** are invoked by Nx plugins when you [update Nx](/{{framework}}/core-concepts/updating-nx) to keep your config files in sync with the latest versions of third party tools.
## Invoking Plugin Generators

View File

@ -68,19 +68,15 @@ myorg/
## See Also
- [Using Cypress](/{{framework}}/plugins/cypress/overview)
- [Using Jest](/{{framework}}/plugins/cypress/overview)
- [Using Cypress](/{{framework}}/cypress/overview)
- [Using Jest](/{{framework}}/cypress/overview)
## Executors / Builders
- [build](/{{framework}}/plugins/web/executors/build) - Builds a web components application
- [dev-server](/{{framework}}/plugins/web/executors/package) - Builds and serves a web application
- [package](/{{framework}}/plugins/web/executors/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
- [build](/{{framework}}/web/build) - Builds a web components application
- [dev-server](/{{framework}}/web/dev-server) - Builds and serves a web application
- [package](/{{framework}}/web/package) - Bundles artifacts for a buildable library that can be distributed as an NPM package.
## Generators
- [application](/{{framework}}/plugins/web/generators/application) - Create an Web Components application
- [component](/{{framework}}/plugins/web/generators/component) - Create an Web Components library
- [library](/{{framework}}/plugins/web/generators/library) - Create an Web Components library
- [redux](/{{framework}}/plugins/web/generators/redux) - Generate a Redux slice for a project
- [storybook-configuration](/{{framework}}/plugins/web/generators/storybook-configuration) - Set up Storybook for a react library
- [application](/{{framework}}/web/application) - Create an Web Components application

View File

@ -4,11 +4,12 @@ The workspace plugin contains executors and generators that are useful for any N
## Generators
- [library](/angular/plugins/workspace/generators/library) - Create a plain typescript library
- [move](/angular/plugins/workspace/generators/move) - Move a project to another directory and update all references
- [remove](/angular/plugins/workspace/generators/remove) - Remove a project from the workspace
- [workspace-generator](/angular/plugins/workspace/generators/workspace-schematic) - Scaffold a custom generator for use within your workspace
- [library](/{{framework}}/workspace/library) - Create a plain typescript library
- [move](/{{framework}}/workspace/move) - Move a project to another directory and update all references
- [remove](/{{framework}}/workspace/remove) - Remove a project from the workspace
- [run-commands](/{{framework}}/workspace/run-commands-executor) - Add a target to a project that uses the run-commands executor
- [workspace-generator](/{{framework}}/workspace/workspace-generator) - Scaffold a custom generator for use within your workspace
## Executors / Builders
- [run-commands](/angular/plugins/workspace/executors/run-commands) - Execute an arbitrary command line script
- [run-commands](/{{framework}}/workspace/run-commands-executor) - Execute an arbitrary command line script

View File

@ -13,11 +13,11 @@ This document will look to explain the motivations for why you would use either
You might use the `--publishable` option when generating a new Nx library if your intention is to distribute it outside the monorepo.
One typical scenario for this may be that you use Nx to develop your organizations UI design system component library (maybe using its [Storybook integration](https://nx.dev/latest/plugins/storybook/overview)), which should be available also to your organizations apps that are not hosted within the same monorepo.
One typical scenario for this may be that you use Nx to develop your organizations UI design system component library (maybe using its [Storybook integration](/{{framework}}/storybook/overview)), which should be available also to your organizations apps that are not hosted within the same monorepo.
A normal Nx library - lets call it "workspace library" - is not made for building or publishing. Rather it only includes common lint and test targets in its `angular.json` or `workspace.json`. These libraries are directly referenced from one of the monorepos applications and built together with them.
Keep in mind that the `--publishable` flag does not enable automatic publishing. Rather it adds to your Nx workspace library a builder target that **compiles** and **bundles** your app. The resulting artifact will be ready to be published to some registry (e.g. [npm](https://npmjs.com/)). By having that builder, you can invoke the build via a command like: `nx build mylib` (where "mylib" is the name of the lib) which will then produce an optimized bundle in the `dist/mylib` folder. Nx [also analyzes](https://nx.dev/latest/angular/plugins/angular/executors/package#updatebuildableprojectdepsinpackagejson) the librarys dependencies and automatically compiles the dependencies in the resulting `package.json` file.
Keep in mind that the `--publishable` flag does not enable automatic publishing. Rather it adds to your Nx workspace library a builder target that **compiles** and **bundles** your app. The resulting artifact will be ready to be published to some registry (e.g. [npm](https://npmjs.com/)). By having that builder, you can invoke the build via a command like: `nx build mylib` (where "mylib" is the name of the lib) which will then produce an optimized bundle in the `dist/mylib` folder. Nx [also analyzes](/{{framework}}/angular/package#updatebuildableprojectdepsinpackagejson) the librarys dependencies and automatically compiles the dependencies in the resulting `package.json` file.
One particularity when generating a library with `--publishable` is that it requires you to also provide an `--importPath`. Your import path is the actual scope of your distributable package (e.g.: `@myorg/mylib`) - which needs to be a [valid npm package name](https://docs.npmjs.com/files/package.json#name).
@ -29,6 +29,6 @@ For more details on the mechanics, remember that Nx is an open source project, s
Buildable libraries are similar to "publishable libraries" described above. Their scope however is not to distribute or publish them to some external registry. Thus they might not be optimized for bundling and distribution.
Buildable libraries are mostly used for producing some pre-compiled output that can be directly referenced from an Nx workspace application without the need to again compile it. A typical scenario is to leverage Nxs [incremental building](https://nx.dev/latest/angular/guides/ci/incremental-builds) capabilities.
Buildable libraries are mostly used for producing some pre-compiled output that can be directly referenced from an Nx workspace application without the need to again compile it. A typical scenario is to leverage Nxs [incremental building](/{{framework}}/ci/incremental-builds) capabilities.
For more details on the mechanics, remember that Nx is an open source project, so you can see the actual impact of the generator by looking at the source code (the best starting point is probably `packages/<framework>/src/generators/library/library.ts`).

View File

@ -16,7 +16,7 @@ The `nx dep-graph` command generates a graph of how apps and libraries depend on
### 3. Enforcing Constraints
You can enforce constraints on how different types of libraries depend on each other [using tags](/{{framework}}/workspace/structure/monorepo-tags). Following pre-determined conventions on what kind of code can go in different types of libraries allows your tagging system to enforce good architectural patterns.
You can enforce constraints on how different types of libraries depend on each other [using tags](/{{framework}}/structure/monorepo-tags). Following pre-determined conventions on what kind of code can go in different types of libraries allows your tagging system to enforce good architectural patterns.
Also, each library defines its own API, which allows for encapsulating logic that other parts of codebase can not access. You can even use a [CODEOWNERS file](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners) to assign ownership of a certain library to a user or team.

View File

@ -4,7 +4,7 @@ Libraries should be grouped by _scope_. A library's scope is either application
## Move Generator
Don't be too anxious about choosing the exact right folder structure from the beginning. Libraries can be moved or renamed using the [`@nrwl/workspace:move` generator](/{{framework}}/plugins/workspace/generators/move).
Don't be too anxious about choosing the exact right folder structure from the beginning. Libraries can be moved or renamed using the [`@nrwl/workspace:move` generator](/{{framework}}/workspace/move).
For instance, if a library under the `booking` folder is now being shared by multiple apps, you can move it to the shared folder like this:
@ -14,7 +14,7 @@ nx g move --project booking-some-library shared/some-library
## Remove Generator
Similarly, if you no longer need a library, you can remove it with the [`@nrwl/workspace:remove` generator](/{{framework}}/plugins/workspace/generators/remove).
Similarly, if you no longer need a library, you can remove it with the [`@nrwl/workspace:remove` generator](/{{framework}}/workspace/remove).
```bash
nx g remove booking-some-library