docs(nx): share guides between different nx.dev flavours

nrwl · Jul 31, 2019 · 2abe13d · 2abe13d
1 parent 1c721c7
commit 2abe13d
Show file tree

Hide file tree

Showing 33 changed files with 239 additions and 281 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -35,9 +35,6 @@ Please provide detailed steps for reproducing the issue.
 Please provide any relevant information about your setup:
 
 - version of Nx used
-- version of Angular CLI used
-- `angular.json` configuration
-- version of Angular DevKit used
 - 3rd-party libraries and their versions
 - and most importantly - a use-case that fails
 

diff --git a/README.md b/README.md
@@ -66,14 +66,6 @@ yarn create nx-workspace myworkspace
 
 If it's your first Nx project, the command will recommend you to install `@nrwl/cli` globally, so you can invoke `nx` directly without going through yarn or npm.
 
-### Adding Nx to an Existing Angular CLI workspace
-
-If you are an Angular user, you can also add Nx to your existing Angular CLI project by running:
-
-```bash
-ng add @nrwl/workspace
-```
-
 ## Creating First Application
 
 By default, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one, you need to add capabilities to the workspace.
@@ -141,10 +133,6 @@ Angular users can also run `ng g/serve/test/e2e`.
 
 You are good to go!
 
-## Quick Start & Documentation
-
-<p align="center"><a href="https://www.youtube.com/watch?v=mVKMse-gFBI" target="_blank"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-video-img.png" width="450"></p></a>
-
 ### Documentation
 
 - [Nx Documentation and Guides](https://nx.dev)

diff --git a/docs/angular/fundamentals/build-full-stack-applications.md b/docs/angular/fundamentals/build-full-stack-applications.md
@@ -350,7 +350,7 @@ Having both frontend and backend code is already something amazing. In just minu
 But Nx can do a lot more than that. In Nx, your libraries, backend applications, frontend applications are all part of the same dependency graph, which you can see via:
 
 ```bash
-npm run dep-graph
+nx dep-graph
 ```
 
 ![Full Stack Dependencies](./full-stack-deps.png)

diff --git a/docs/angular/fundamentals/monorepos-automation.md b/docs/angular/fundamentals/monorepos-automation.md
@@ -190,7 +190,7 @@ An Nx workspace can contain dozens (or hundreds) of applications and libraries.
 
 Previously, a senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not even correct on Day 1, and gets more and more out of sync with every passing day.
 
-With Nx, you can do better than that. You can run `yarn dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information. Read more about [Analyzing and Visualizing Workspaces](/angular/guides/monorepo-dependency-diagrams).
+With Nx, you can do better than that. You can run `nx dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information. Read more about [Analyzing and Visualizing Workspaces](/angular/guides/monorepo-dependency-diagrams).
 
 ![Monorepo Diagram](./monorepo-diagram.png)
 
@@ -201,15 +201,15 @@ It can also help you answer questions like "what apps will have to be redeployed
 Because Nx understands how our applications and libraries depend on each other, it can verify that a code change to a reusable library does not break any applications and libraries depending on it.
 
 ```bash
-yarn affected:apps --base=master # prints the apps affected by a PR
+nx affected:apps  # prints the apps affected by a PR
 
-yarn affected:build --base=master # reruns build for all the projects affected by a PR
+nx affected:build  # reruns build for all the projects affected by a PR
 
-yarn affected:test --base=master # reruns unit tests for all the projects affected by a PR
+nx affected:test  # reruns unit tests for all the projects affected by a PR
 
-yarn affected:e2e --base=master # reruns e2e tests for all the projects affected by a PR
+nx affected:e2e  # reruns e2e tests for all the projects affected by a PR
 
-yarn affected --target=lint --base=master # reruns any target (for instance lint) for projects affected by a PR
+nx affected --target=lint  # reruns any target (for instance lint) for projects affected by a PR
 ```
 
 Nx will topologically sort the projects, and will run what it can in parallel. The fact that Nx can use its dependency graph to rebuild and retest the minimal number of projects necessary is crucial. Without this the repo will not scale beyond a handful of projects.
@@ -268,9 +268,9 @@ Schematics is what what powers all Angular CLI (and Nx) code generation. With Nx
 Pointing out code formatting issues during code reviews is not the best way to review code. That's why Nx comes with Prettier support. Run:
 
 ```bash
-yarn format:write # formats the files
+nx format:write # formats the files
 
-yarn format:check # checks that the formatting is correct (used in CI)
+nx format:check # checks that the formatting is correct (used in CI)
 ```
 
 Read more about it [here](/angular/guides/modernize-prettier).

diff --git a/docs/angular/fundamentals/nest-logo.png b/docs/angular/fundamentals/nest-logo.png
diff --git a/docs/angular/fundamentals/use-modern-tools.md b/docs/angular/fundamentals/use-modern-tools.md
@@ -90,7 +90,7 @@ ng g @nrwl/node:application api # Create a Node Application
 
 ## Cypress
 
-![Cypress logo](../../shared/cypress-logo.png)
+![Cypress logo](/shared/cypress-logo.png)
 
 Cypress is an e2e test runner built for modern web. It has a lot of great features:
 
@@ -149,7 +149,7 @@ To use Protractor instead of Cypress, run `ng g @nrwl/angular:application fronte
 
 ## Jest
 
-![Jest logo](../../shared/jest-logo.png)
+![Jest logo](/shared/jest-logo.png)
 
 Jest is a fast 0-setup testing framework from Facebook.
 
@@ -194,7 +194,7 @@ To use Karma instead of Jest, run `ng g @nrwl/angular:application frontend --uni
 
 ## Prettier
 
-![Prettier logo](./prettier-logo.png)
+![Prettier logo](/shared/prettier-logo.png)
 
 Prettier is an opinionated code formatter. An Nx workspace comes with Prettier preconfigured.
 
@@ -215,7 +215,7 @@ Prettier is an opinionated code formatter. An Nx workspace comes with Prettier p
 
 You can run:
 
-- `yarn format:write` to format the files
-- `yarn format:check` to check the formatted files
+- `nx format:write` to format the files
+- `nx format:check` to check the formatted files
 
 Read more about [Prettier](https://prettier.io).
diff --git a/docs/angular/guides/monorepo-dependency-diagrams.md b/docs/angular/guides/monorepo-dependency-diagrams.md
diff --git a/docs/map.json b/docs/map.json
@@ -24,7 +24,8 @@
           },
           {
             "name": "About",
-            "id": "about"
+            "id": "about",
+            "file": "shared/about"
           }
         ]
       },
@@ -106,23 +107,28 @@
         "itemList": [
           {
             "name": "Using Cypress",
-            "id": "modernize-cypress"
+            "id": "modernize-cypress",
+            "file": "shared/modernize-cypress"
           },
           {
             "name": "Using Jest",
-            "id": "modernize-jest"
+            "id": "modernize-jest",
+            "file": "shared/modernize-jest"
           },
           {
             "name": "Rebuilding and Retesting What is Affected",
-            "id": "monorepo-affected"
+            "id": "monorepo-affected",
+            "file": "shared/monorepo-affected"
           },
           {
-            "name": "Analysing & Visualizing Workspaces",
-            "id": "monorepo-dependency-diagrams"
+            "name": "Analyzing & Visualizing Workspaces",
+            "id": "monorepo-dependency-diagrams",
+            "file": "shared/monorepo-dependency-diagrams"
           },
           {
             "name": "Imposing Constraints on the Dependency Graph",
-            "id": "monorepo-tags"
+            "id": "monorepo-tags",
+            "file": "shared/monorepo-tags"
           },
           {
             "name": "Updating Nx",
@@ -150,7 +156,8 @@
           },
           {
             "name": "Using Nx at Enterprises",
-            "id": "monorepo-nx-enterprise"
+            "id": "monorepo-nx-enterprise",
+            "file": "shared/monorepo-nx-enterprise"
           },
           {
             "name": "Lazy Loading Code",
@@ -185,7 +192,8 @@
           },
           {
             "name": "About",
-            "id": "about"
+            "id": "about",
+            "file": "shared/about"
           }
         ]
       },
@@ -268,6 +276,36 @@
           {
             "name": "Nx CLI",
             "id": "cli"
+          },
+          {
+            "name": "Using Cypress",
+            "id": "modernize-cypress",
+            "file": "shared/modernize-cypress"
+          },
+          {
+            "name": "Using Jest",
+            "id": "modernize-jest",
+            "file": "shared/modernize-jest"
+          },
+          {
+            "name": "Rebuilding and Retesting What is Affected",
+            "id": "monorepo-affected",
+            "file": "shared/monorepo-affected"
+          },
+          {
+            "name": "Analyzing & Visualizing Workspaces",
+            "id": "monorepo-dependency-diagrams",
+            "file": "shared/monorepo-dependency-diagrams"
+          },
+          {
+            "name": "Using Nx at Enterprises",
+            "id": "monorepo-nx-enterprise",
+            "file": "shared/monorepo-nx-enterprise"
+          },
+          {
+            "name": "Imposing Constraints on the Dependency Graph",
+            "id": "monorepo-tags",
+            "file": "shared/monorepo-tags"
           }
         ]
       }
@@ -294,7 +332,8 @@
           },
           {
             "name": "About",
-            "id": "about"
+            "id": "about",
+            "file": "shared/about"
           }
         ]
       },
@@ -377,6 +416,36 @@
           {
             "name": "Nx CLI",
             "id": "cli"
+          },
+          {
+            "name": "Using Cypress",
+            "id": "modernize-cypress",
+            "file": "shared/modernize-cypress"
+          },
+          {
+            "name": "Using Jest",
+            "id": "modernize-jest",
+            "file": "shared/modernize-jest"
+          },
+          {
+            "name": "Rebuilding and Retesting What is Affected",
+            "id": "monorepo-affected",
+            "file": "shared/monorepo-affected"
+          },
+          {
+            "name": "Analyzing & Visualizing Workspaces",
+            "id": "monorepo-dependency-diagrams",
+            "file": "shared/monorepo-dependency-diagrams"
+          },
+          {
+            "name": "Using Nx at Enterprises",
+            "id": "monorepo-nx-enterprise",
+            "file": "shared/monorepo-nx-enterprise"
+          },
+          {
+            "name": "Imposing Constraints on the Dependency Graph",
+            "id": "monorepo-tags",
+            "file": "shared/monorepo-tags"
           }
         ]
       }

diff --git a/docs/angular/guides/affected.png → docs/react/fundamentals/affected.png b/docs/angular/guides/affected.png → docs/react/fundamentals/affected.png
diff --git a/docs/react/fundamentals/monorepos-automation.md b/docs/react/fundamentals/monorepos-automation.md
@@ -27,6 +27,10 @@ To see how Nx delivers all of these, start with an empty Nx workspace:
 ├── workspace.json
 ├── nx.json
 ├── package.json
+<<<<<<< HEAD
+=======
+├── tools/
+>>>>>>> wip
 └── tsconfig.json
 ```
 
@@ -193,7 +197,7 @@ An Nx workspace can contain dozens (or hundreds) of applications and libraries.
 
 Previously, a senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not even correct on Day 1, and gets more and more out of sync with every passing day.
 
-With Nx, you can do better than that. You can run `nx dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information. Read more about [Analyzing and Visualizing Workspaces](/angular/guides/monorepo-dependency-diagrams).
+With Nx, you can do better than that. You can run `nx dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information. Read more about [Analyzing and Visualizing Workspaces](/react/guides/monorepo-dependency-diagrams).
 
 ![Monorepo Diagram](./monorepo-diagram.png)
 
@@ -217,7 +221,7 @@ nx affected --target=lint  # reruns any target (for instance lint) for projects
 
 Nx will topologically sort the projects, and will run what it can in parallel. The fact that Nx can use its dependency graph to rebuild and retest the minimal number of projects necessary is crucial. Without this the repo will not scale beyond a handful of projects.
 
-Read more about how to use `affected:*` commands [here](/angular/guides/monorepo-affected).
+Read more about how to use `affected:*` commands [here](/react/guides/monorepo-affected).
 
 ### Imposing Constraints on the Dependency Graph
 
@@ -254,7 +258,7 @@ For instance, with this configuration, when you import private client code from
 ]
 ```
 
-Read more about this feature [here](/angular/guides/monorepo-tags).
+Read more about this feature [here](/react/guides/monorepo-tags).
 
 ## Tools and Automation
 
@@ -274,7 +278,7 @@ nx format:write # formats the files
 nx format:check # checks that the formatting is correct (used in CI)
 ```
 
-Read more about it [here](/angular/guides/modernize-prettier).
+Read more about it [here](/react/guides/modernize-prettier).
 
 ## Understanding Nx.json
 
@@ -287,7 +291,6 @@ You rarely have to look at `nx.json`, but it is still important to understand wh
     "workspace.json": "*",
     "package.json": "*",
     "tsconfig.json": "*",
-    "tslint.json": "*",
     "nx.json": "*"
   },
   "projects": {
@@ -317,7 +320,6 @@ The `implicitDependencies` map is used to define what projects are affected by g
     "workspace.json": "*",
     "package.json": ["mylib"],
     "tsconfig.json": "*",
-    "tslint.json": "*",
     "nx.json": "*"
   }
 }
@@ -338,7 +340,7 @@ In the above example, any change to `package.json` will only affect `mylib`.
 }
 ```
 
-The `tags` array is used to impose constraints on the dependency graph. Read more about it [here](/angular/guides/monorepo-tags).
+The `tags` array is used to impose constraints on the dependency graph. Read more about it [here](/react/guides/monorepo-tags).
 
 Nx uses its advanced code analysis to construct a dependency graph of all applications and libraries. Some dependencies, however, cannot be determined statically. You can use the `implicitDependencies` array to list the dependencies that cannot be determined statically.
 

diff --git a/docs/react/fundamentals/use-modern-tools.md b/docs/react/fundamentals/use-modern-tools.md
@@ -19,7 +19,7 @@ yarn add --dev @nrwl/nest
 To create the new Nest application:
 
 ```bash
-yarn g @nrwl/nest:application api
+nx g @nrwl/nest:application api
 ```
 
 The following folders and files are created:
@@ -95,7 +95,7 @@ nx g @nrwl/node:application api
 
 ## Cypress
 
-![Cypress logo](../../shared/cypress-logo.png)
+![Cypress logo](/shared/cypress-logo.png)
 
 Cypress is an e2e test runner built for modern web. It has a lot of great features:
 
@@ -148,7 +148,7 @@ Read more about Cypress at [cypress.io](https://cypress.io).
 
 ## Jest
 
-![Jest logo](../../shared/jest-logo.png)
+![Jest logo](/shared/jest-logo.png)
 
 Jest is a fast 0-setup testing framework from Facebook.
 
@@ -186,7 +186,7 @@ Read more about Jest at [jestjs.io](https://jestjs.io).
 
 ## Prettier
 
-![Prettier logo](./prettier-logo.png)
+![Prettier logo](/shared/prettier-logo.png)
 
 Prettier is an opinionated code formatter. An Nx workspace comes with Prettier preconfigured.