diff --git a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx index 103c2a0f7d..35c267bd23 100644 --- a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx +++ b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx @@ -156,7 +156,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) { )} > {isActiveLink ? ( - + ) : null} - + Get Started @@ -111,13 +111,13 @@ export function Index() { {/* BANNER */} -
+
- + @@ -158,7 +172,7 @@ export function Index() { {/* NXCLOUD AD */} -
-
-

- See how much more time - you can save with Nx Cloud. +
+
+ Sponsor +

+ + See how much more time you can save with Nx Cloud. +

-
+
Learn About Nx Cloud @@ -459,9 +472,9 @@ export function Index() { Nx, you get a consistent dev experience regardless of the tools used.

-

For instance:

-
    -
  • +

    For instance:

    +
      +
    • Use{' '} Watch Nx Workspaces Course @@ -573,7 +586,7 @@ export function Index() { {/*MORE*/}
      -

      +

      Nx and Nx Console

      @@ -594,7 +607,7 @@ export function Index() {

      -

      +

      Brought to you by the community

      diff --git a/nx-dev/nx-dev/pages/node.tsx b/nx-dev/nx-dev/pages/node.tsx index ebe23fbb7d..118b4bd73c 100644 --- a/nx-dev/nx-dev/pages/node.tsx +++ b/nx-dev/nx-dev/pages/node.tsx @@ -125,7 +125,7 @@ export function Node() { viewBox="0 0 400 400" fill="currentColor" xmlns="http://www.w3.org/2000/svg" - className="fill-current hidden md:block text-green-nx-base absolute -top-40 -left-72" + className="fill-current hidden md:block text-blue-nx-dark absolute -top-40 -left-72" > @@ -194,7 +194,7 @@ export function Node() { viewBox="0 0 400 400" fill="currentColor" xmlns="http://www.w3.org/2000/svg" - className="fill-current hidden md:block text-green-nx-base absolute -top-20 -right-32" + className="fill-current hidden md:block text-blue-nx-dark absolute -top-20 -right-32" > @@ -435,6 +435,7 @@ export function Node() { className="underline pointer" href="https://www.typescriptlang.org/" target="_blank" + rel="noreferrer" > TypeScript {' '} @@ -446,6 +447,7 @@ export function Node() { className="underline pointer" href="https://jestjs.io/" target="_blank" + rel="noreferrer" > Jest {' '} @@ -459,6 +461,7 @@ export function Node() { className="underline pointer" href="https://eslint.org/" target="_blank" + rel="noreferrer" > ESLint {' '} @@ -525,6 +528,7 @@ export function Node() { className="underline pointer" href="https://egghead.io/playlists/scale-react-development-with-nx-4038" target="_blank" + rel="noreferrer" > Free Nx Workspaces video course @@ -534,6 +538,7 @@ export function Node() { className="underline pointer" href="https://www.youtube.com/watch?v=h5FIGDn5YM0" target="_blank" + rel="noreferrer" > Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor Savkin @@ -544,6 +549,7 @@ export function Node() { className="underline pointer" href="https://go.nrwl.io/nx-office-hours" target="_blank" + rel="noreferrer" > Tune into regular Nx Office Hours livestreams @@ -553,6 +559,7 @@ export function Node() { className="underline pointer" href="https://nx.app" target="_blank" + rel="noreferrer" > Nx Cloud @@ -564,6 +571,7 @@ export function Node() { className="underline pointer" href="https://twitter.com/NxDevTools" target="_blank" + rel="noreferrer" > follow Nx Dev Tools on Twitter {' '} diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/api-workspace/executors/run-script.md b/nx-dev/nx-dev/public/documentation/latest/angular/api-workspace/executors/run-script.md index 3bbaa8e687..733534a323 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/api-workspace/executors/run-script.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/api-workspace/executors/run-script.md @@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di } ``` -Test2 - ## Options ### script (_**required**_) diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/cli/affected.md b/nx-dev/nx-dev/public/documentation/latest/angular/cli/affected.md index d2507bfb36..76040bd400 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/cli/affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/cli/affected.md @@ -1,6 +1,6 @@ # affected -Run task for affected projects +Run target for affected projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/cli/print-affected.md b/nx-dev/nx-dev/public/documentation/latest/angular/cli/print-affected.md index b5a49329ea..170b607d5a 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/cli/print-affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/cli/print-affected.md @@ -1,6 +1,6 @@ # print-affected -Graph execution plan +Prints information about the projects and targets affected by changes ## Usage @@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json ### select +Select the subset of the returned json document (e.g., --selected=projects) + ### skip-nx-cache Default: `false` diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/cli/run-many.md b/nx-dev/nx-dev/public/documentation/latest/angular/cli/run-many.md index 164b93f15f..a388d512e1 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/cli/run-many.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/cli/run-many.md @@ -1,6 +1,6 @@ # run-many -Run task for multiple projects +Run target for multiple listed projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/guides/configuration.md b/nx-dev/nx-dev/public/documentation/latest/angular/guides/configuration.md index 0c2a3d8910..5b947236a7 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/guides/configuration.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/guides/configuration.md @@ -174,7 +174,7 @@ You can select a configuration like this: `nx build myapp --configuration=produc The following show how the builder options get constructed: -```bash +```javascript require(`@nrwl/jest`).builders['jest']({...options, ...selectedConfiguration, ...commandLineArgs}}) // Pseudocode ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/guides/modern-angular/karma-to-jest.md b/nx-dev/nx-dev/public/documentation/latest/angular/guides/modern-angular/karma-to-jest.md index 2a1b87ce6c..46fe572776 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/guides/modern-angular/karma-to-jest.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/guides/modern-angular/karma-to-jest.md @@ -51,9 +51,9 @@ Any custom code that was present in Step 1 and 2 should be recreated now in the **Step 5** -Modify `tsconfig.spec.ts` in the lib’s folder and add Jest typings: add jest under types and remove previous framework (e.g. jasmine) +Modify `tsconfig.spec.json` in the lib’s folder and add Jest typings: add jest under types and remove previous framework (e.g. jasmine) -```bash +```json "types": [ "jest", "node" ] ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/guides/setup-incremental-builds.md b/nx-dev/nx-dev/public/documentation/latest/angular/guides/setup-incremental-builds.md index eb0eadd2fb..2cce1d4c84 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/guides/setup-incremental-builds.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/guides/setup-incremental-builds.md @@ -1,6 +1,6 @@ # Setup incremental builds for Angular applications -In this guide we’ll specifically look into which changes need to be made to enable [incremental builds](/angular/ci/incremental-builds) for Angular applications. +In this guide we’ll specifically look into which changes need to be made to enable [incremental builds](/angular/ci/incremental-builds) for Angular applications. Please read the [incremental builds guide](/angular/ci/incremental-builds) to see if incremental builds are a good fit for you. > Incremental builds requires Nx version 10.4.0 or later. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/api-workspace/executors/run-script.md b/nx-dev/nx-dev/public/documentation/latest/node/api-workspace/executors/run-script.md index 5d3edd9564..493949f2ad 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/api-workspace/executors/run-script.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/api-workspace/executors/run-script.md @@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di } ``` -Test2 - ## Options ### script (_**required**_) diff --git a/nx-dev/nx-dev/public/documentation/latest/node/cli/affected.md b/nx-dev/nx-dev/public/documentation/latest/node/cli/affected.md index d2507bfb36..76040bd400 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/cli/affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/cli/affected.md @@ -1,6 +1,6 @@ # affected -Run task for affected projects +Run target for affected projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/node/cli/print-affected.md b/nx-dev/nx-dev/public/documentation/latest/node/cli/print-affected.md index b5a49329ea..170b607d5a 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/cli/print-affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/cli/print-affected.md @@ -1,6 +1,6 @@ # print-affected -Graph execution plan +Prints information about the projects and targets affected by changes ## Usage @@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json ### select +Select the subset of the returned json document (e.g., --selected=projects) + ### skip-nx-cache Default: `false` diff --git a/nx-dev/nx-dev/public/documentation/latest/node/cli/run-many.md b/nx-dev/nx-dev/public/documentation/latest/node/cli/run-many.md index 164b93f15f..a388d512e1 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/cli/run-many.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/cli/run-many.md @@ -1,6 +1,6 @@ # run-many -Run task for multiple projects +Run target for multiple listed projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md index e658e09ab0..a91a2cc1a7 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md @@ -40,4 +40,4 @@ Nx works especially well for [monorepos](/{{framework}}/core-concepts/why-monore - [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo) - [Nx CLI](/{{framework}}/getting-started/nx-cli) - [Configuration Files](/{{framework}}/core-concepts/configuration) -- [Mental Model](/{{framework}}/core-concepts/mental-model +- [Mental Model](/{{framework}}/core-concepts/mental-model) diff --git a/nx-dev/nx-dev/public/documentation/latest/react/api-workspace/executors/run-script.md b/nx-dev/nx-dev/public/documentation/latest/react/api-workspace/executors/run-script.md index 5d3edd9564..493949f2ad 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/api-workspace/executors/run-script.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/api-workspace/executors/run-script.md @@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di } ``` -Test2 - ## Options ### script (_**required**_) diff --git a/nx-dev/nx-dev/public/documentation/latest/react/cli/affected.md b/nx-dev/nx-dev/public/documentation/latest/react/cli/affected.md index d2507bfb36..76040bd400 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/cli/affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/cli/affected.md @@ -1,6 +1,6 @@ # affected -Run task for affected projects +Run target for affected projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/react/cli/print-affected.md b/nx-dev/nx-dev/public/documentation/latest/react/cli/print-affected.md index b5a49329ea..170b607d5a 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/cli/print-affected.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/cli/print-affected.md @@ -1,6 +1,6 @@ # print-affected -Graph execution plan +Prints information about the projects and targets affected by changes ## Usage @@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json ### select +Select the subset of the returned json document (e.g., --selected=projects) + ### skip-nx-cache Default: `false` diff --git a/nx-dev/nx-dev/public/documentation/latest/react/cli/run-many.md b/nx-dev/nx-dev/public/documentation/latest/react/cli/run-many.md index 164b93f15f..a388d512e1 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/cli/run-many.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/cli/run-many.md @@ -1,6 +1,6 @@ # run-many -Run task for multiple projects +Run target for multiple listed projects ## Usage diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/incremental-builds.md b/nx-dev/nx-dev/public/documentation/latest/shared/incremental-builds.md index 9de23746cf..db66ea24ca 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/incremental-builds.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/incremental-builds.md @@ -31,7 +31,7 @@ Read more about [Publishable and Buildable Nx Libraries here.](/{{framework}}/st ## Nx computation cache and Nx Cloud -In an incremental build scenario, when building the app, all it's dependencies need to be built first. In our scenario above, that means we need to first run `nx build mylib` and then `nx build myapp`. As the number of libraries grows, running these commands quickly becomes unmanageable. Instead, we can run `nx build myapp --with-deps`. +In an incremental build scenario, when building the app, all it's dependencies need to be built first. In our scenario above, that means we need to first run `nx build mylib` and then `nx build myapp`. As the number of libraries grows, running these commands quickly becomes unmanageable. Instead, we can run `nx build myapp`. It is costly to rebuild all the buildable libraries from scratch every time you want to serve the app. That's why the Nx computation caching is so important. The caching allows us to only rebuild a small subset of the libraries, which results in much better performance. @@ -49,12 +49,31 @@ The above chart has three different test runs: ## When should I use incremental builds -We're continuously improving the speed of incremental builds. However as of now, incremental builds become really beneficial in **really large repositories**. +Whether incremental builds area a good choice depends on your repository. For most small and mid-sized applications, the costs introduced by incremental builds will outweigh the benefits. -Also, using incremental builds only really makes sense when using the distributed Nx caching with Nx Cloud. Check out [nx.app](https://nx.app) for more information on how to setup distributed caching. +The upsides of incremental builds: -## Setup an incremental build +- Compiling only a subset of code +- Distributing the compilation -- [Setup an incremental build for an Angular app](/latest/angular/ci/setup-incremental-builds-angular) -- _Setup an incremental build for a React app (soon)_ -- _Setup an incremental build for a Node app (soon)_ +The downsides of incremental builds: + +- Complex "watch" mode +- Overhead with initializing the TypeScript compiler multiple times +- The linking part of a WebPack build is indivisible + +If you are only planning to use incremental builds to speed up your CI, then the watch mode concern is irrelevant, and the only thing you need to assess is whether the benefits of skipping the compilation outweigh the costs of initializing the TypeScript compiler several times. + +> For a given workspace you can use Nx batch mode executors to compile all the libs using a single TS program. It can be made to work for a single workspace, but it's hard to generalize. With this, there is only one TS program created, so there is no extra cost associated with incremental builds. + +## Custom Serve Target + +If you are implementing a custom serve command, you can use `WebpackNxBuildCoordinationPlugin` provided by `@nrwl/web`. It's a webpack plugin you can use to coordinate the compiling of the libs and the webpack linking. + +## Using Webpack Module Federation to implement incremental builds + +When we talk about incremental builds we often talk about incrementally compiling the code and then linking them with a single webpack build. In this case the build artifact when using incremental builds is the same as without using incremental builds, but the build process itself has different characteristics. + +But there are other ways to make the build process incremental. One of them is using WebPack Module Federation. + +When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced. diff --git a/nx-dev/nx-dev/tailwind.config.js b/nx-dev/nx-dev/tailwind.config.js index 1089a973b5..290a36f9bc 100644 --- a/nx-dev/nx-dev/tailwind.config.js +++ b/nx-dev/nx-dev/tailwind.config.js @@ -11,13 +11,11 @@ module.exports = { theme: { extend: { colors: { + black: 'hsla(0, 0%, 13%, 1)', blue: { 'nx-dark': 'hsla(214, 61%, 11%, 1)', 'nx-base': 'hsla(214, 62%, 21%, 1)', }, - purple: { - 'nx-base': 'hsla(258, 76%, 62%, 1)', - }, green: { 'nx-base': 'hsla(162, 47%, 50%, 1)', }, diff --git a/nx-dev/ui/common/src/lib/feature-list.tsx b/nx-dev/ui/common/src/lib/feature-list.tsx index ac2c38473f..e06b8df240 100644 --- a/nx-dev/ui/common/src/lib/feature-list.tsx +++ b/nx-dev/ui/common/src/lib/feature-list.tsx @@ -86,14 +86,14 @@ export function FeatureList() { {data.map((tile) => (

      -
      -

      +
      +

      {tile.icon} {tile.title}

      {tile.items.map((item, index) => (

      - +

      -

      +

      Resources

        @@ -42,7 +42,9 @@ export function Footer({ useDarkBackground }: FooterProps) {
      -

      Help

      +

      + Help +

      • @@ -77,7 +79,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
      -

      +

      Community

        diff --git a/nx-dev/ui/common/src/lib/inline-command.tsx b/nx-dev/ui/common/src/lib/inline-command.tsx index 4ce06cb6a7..f0c19abb4e 100644 --- a/nx-dev/ui/common/src/lib/inline-command.tsx +++ b/nx-dev/ui/common/src/lib/inline-command.tsx @@ -37,7 +37,7 @@ export function InlineCommand({ >