docs(nx): update tutorial documentation

docs/tutorial/01-create-application.md

@@ -29,22 +29,26 @@ This is an empty Nx workspace without any applications or libraries: nothing to
 
 ## Create an Angular Application
 
-**Create you first Angular application.**
+First, we must add the capability to create [Angular](https://angular.io) applications via:
+
+```nashorn js
+ng add @nrwl/angular --defaults
+```
+
+Now, create your first Angular application.
 
 ```bash
 ng g app todos
 ```
 
 Nx will ask you a few questions about the application you are trying to create: the directory it will be placed it, the tags used for linting, etc.. As your workspace grows, those things become really important. For now the default answers are good enough.
 
-After Nx generated the code and ran `npm install`, you should see something like this:
+After this is done, you should see something like this:
 
 ```treeview
 myorg/
 ├── apps/
 │   ├── todos/
-│   │   ├── browserslist
-│   │   ├── jest.conf.js
 │   │   ├── src/
 │   │   │   ├── app/
 │   │   │   ├── assets/
@@ -55,12 +59,13 @@ myorg/
 │   │   │   ├── polyfills.ts
 │   │   │   ├── styles.scss
 │   │   │   └── test.ts
+│   │   ├── browserslist
+│   │   ├── jest.conf.js
 │   │   ├── tsconfig.app.json
 │   │   ├── tsconfig.json
 │   │   ├── tsconfig.spec.json
 │   │   └── tslint.json
 │   └── todos-e2e/
-│       ├── cypress.json
 │       ├── src/
 │       │   ├── fixtures/
 │       │   │   └── example.json
@@ -72,6 +77,7 @@ myorg/
 │       │       ├── app.po.ts
 │       │       ├── commands.ts
 │       │       └── index.ts
+│       ├── cypress.json
 │       ├── tsconfig.e2e.json
 │       ├── tsconfig.json
 │       └── tslint.json
@@ -90,7 +96,9 @@ The generate command added two projects to our workspace:
 - An Angular application
 - E2E tests for the Angular application
 
-**Serve the newly created application.**
+## Serve the newly created application
+
+Now that the application is setup, run it locally via:
 
 ```bash
 ng serve todos
@@ -99,6 +107,6 @@ ng serve todos
 !!!!!
 Open http://localhost:4200 in the browser. What do you see?
 !!!!!
-Page saying "This project was generated using Nx"
-Page saying "This project was created using Angular CLI"
+Page saying "This is an Angular app built with Nx"
+Page saying "This is an Angular app built with the Angular CLI"
 404

docs/tutorial/02-add-e2e-test.md

@@ -1,6 +1,6 @@
-# Step 2: Add E2E Test
+# Step 2: Add E2E Tests
 
-By default, Nx uses Cypress to run E2E tests.
+By default, Nx uses [Cypress](https://cypress.io) 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.
 
@@ -27,9 +27,13 @@ describe('TodoApps', () => {
 });
 ```
 
-This is, obviously, not a great example of an E2E test, but the purposes of this tutorial it will do.
+This is not a great example of an E2E test, but it will suffice for the purposes of this tutorial.
 
-**If you haven't done it already, stop the `ng serve` command and run `ng e2e todos-e2e --watch`.**
+If you have not done so already, stop the `ng serve` command and run `ng e2e todos-e2e --watch`.
+
+A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
+
+As you progress through the tutorial, you will work on making these E2E tests pass.
 
 !!!!!
 What assertion fails?

docs/tutorial/03-display-todos.md

@@ -1,14 +1,14 @@
 # Step 3: Display Todos
 
-Great! You have a failing E2E test. Let's make it pass!
+Great! You have a failing E2E test. Now you can make it pass!
 
 The best way to work with Cypress is to keep the failing E2E test running while working on the app. This helps you see the progress you are making.
 
 ## Show Todos
 
 **Open `apps/todos`.** If you have used Angular CLI, this should look very familiar: same layout, same module and component files. The only difference is that Nx uses Jest instead of Karma.
 
-**To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.component.ts`:**
+To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.component.ts`:
 
 ```typescript
 import { Component } from '@angular/core';
@@ -37,7 +37,7 @@ and `apps/todos/src/app/app.component.html`:
 </ul>
 ```
 
-**Refresh the e2e test.** Now the test will fail while trying to find the add todo button.
+**Rerun the specs by clicking the button in the top right corner of the left pane.** Now the test will fail while trying to find the add todo button.
 
 ## Add Todos
 

docs/tutorial/04-connect-to-api.md

@@ -1,6 +1,6 @@
-# Step 4: Connect to API
+# Step 4: Connect to an API
 
-Real-world applications don’t live in isolation — they need APIs to talk to. Let's sketch something out!
+Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.
 
 **Open `apps/todos/src/app/app.module.ts` to import `HttpClientModule`.**
 
@@ -55,7 +55,7 @@ export class AppComponent {
 ```
 
 !!!!!
-Run "ng serve todos" and open localhost:4200. What do you see?
+Run "ng serve todos" and open http://localhost:4200. What do you see?
 !!!!!
 "the server responded with a status of 404 (Not Found)" in Console.
 Blank screen.

docs/tutorial/05-add-node-app.md

@@ -1,16 +1,26 @@
 # Step 5: Add Node Application Implementing API
 
-Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Let's use this capability to implement the API service.
+The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service.
 
-**Run the following to generate a new Node application:**
+## Add Nest Capabilities to your workspace
+
+Run the following to add the capability to develop Nest applications in your workspace:
+
+```sh
+ng add @nrwl/nest
+```
+
+## Create a Nest Application
+
+**Run the following to generate a new Nest application:**
 
 ```bash
-ng g node-app api --frontendProject=todos
+ng g @nrwl/nest:app api --frontendProject=todos
 ```
 
 Nx will ask you a few questions, and, as with the Angular application, the defaults will work well here.
 
-After Nx is done installing the required dependencies, you should see something like this:
+After this is done, you should see something like this:
 
 ```treeview
 myorg/
@@ -68,11 +78,11 @@ import { AppService } from './app.service';
 export class AppModule {}
 ```
 
-By default, Nx uses the Nest framework when creating node applications. Nest is heavily inspired by Angular, so the configuration for your backend and your frontend will look similar. Also, a lot of best practices used in Angular can be used in Nest as well.
+We recommend using the [Nest](https://nestjs.com) 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.
 
-**Update `AppService`:**
+**Update `apps/api/src/app/app.service.ts`:**
 
 ```typescript
 import { Injectable } from '@nestjs/common';

docs/tutorial/06-proxy.md

@@ -2,7 +2,7 @@
 
 You passed `--frontendProject=todos` when creating the node application. What did that argument do?
 
-It created a proxy configuration that allows the Angular application to talk to the API.
+It created a proxy configuration that allows the Angular application to talk to the API in development.
 
 **To see how it works, open `angular.json` and find the `serve` target of the todos app.**
 
@@ -39,8 +39,8 @@ It created a proxy configuration that allows the Angular application to talk to
 This configuration tells `ng serve` to forward all requests starting with `/api` to the process listening on port 3333.
 
 !!!!!
-Now run both "ng serve todos" and "ng serve api", open localhost:4200. What do you see?
+Now run both "ng serve todos" and "ng serve api", open http://localhost:4200. What do you see?
 !!!!!
-Todos application working!
+Todos application is working!
 404 in the console
 Todos are displayed but the Add Todo button doesn't work

docs/tutorial/07-share-code.md

@@ -1,14 +1,14 @@
 # Step 7: Share Code
 
-There is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You need to share this interface between the backend and the frontend. In Nx, you can do it by creating a library.
+Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library.
 
 **Run the following generator to create a library:**
 
 ```bash
-ng g lib data
+ng g #nrwl/workspace:lib data
 ```
 
-**When asked "What framework should this library use?", select `TypeScript`.** The result should look like this:
+The result should look like this:
 
 ```treeview
 myorg/
@@ -21,6 +21,7 @@ myorg/
 │       ├── jest.conf.js
 │       ├── src/
 │       │   ├── lib/
+│       │   │   └── data.ts
 │       │   └── index.ts
 │       ├── tsconfig.app.json
 │       ├── tsconfig.json
@@ -33,17 +34,17 @@ myorg/
 └── tslint.json
 ```
 
-**Copy the interface into the library's index file.**
+**Copy the interface into `libs/data/src/lib/data.ts`.**
 
 ```typescript
 export interface Todo {
   title: string;
 }
 ```
 
-## Update Backend
+## Refactor the API
 
-**Now update `app.service.ts` to import the interface:**
+**Now update `apps/api/src/app/app.service.ts` to import the interface:**
 
 ```typescript
 import { Injectable } from '@nestjs/common';
@@ -65,9 +66,9 @@ export class AppService {
 }
 ```
 
-## Update Frontend
+## Update the Angular Application
 
-**Next import the interface on the frontend:**
+**Next import the interface in `apps/todos/src/app/app.component.ts`:**
 
 ```typescript
 import { Component } from '@angular/core';

docs/tutorial/08-create-libs.md

@@ -1,16 +1,18 @@
 # Step 8: Create Libs
 
-Libraries aren't just a way to share code in Nx. They are also useful for factoring out code into small units with well-defined public API.
+Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API.
 
 ## Public API
 
-Every library has an `index.ts` file, which defines its public API. Other applications and libraries can only access what the `index.ts` exports. Everything else defined in the library is private.
+Every library has an `index.ts` file, which defines its public API. Other applications and libraries should only access what the `index.ts` exports. Everything else in the library is private.
 
 ## UI Libraries
 
 To illustrate how useful libraries can be, create a library of Angular components.
 
-**Run `ng g lib ui`, and select Angular as the library framework.**
+**Run `ng g @nrwl/angular:lib ui`.**
+
+You should see the following:
 
 ```treeview
 myorg/
@@ -38,7 +40,7 @@ myorg/
 └── tslint.json
 ```
 
-The `ui.module.ts` file looks like this:
+The `libs/ui/src/lib/ui.module.ts` file looks like this:
 
 ```typescript
 import { NgModule } from '@angular/core';
@@ -50,7 +52,7 @@ import { CommonModule } from '@angular/common';
 export class UiModule {}
 ```
 
-## Add Component
+## Add a Component
 
 **Add a component to the newly created ui library by running:**
 
@@ -89,7 +91,7 @@ myorg/
 └── tslint.json
 ```
 
-**Add the `todos` input to the `TodosComponent`.**
+**Add a `todos` input to `libs/src/lib/todos/todos.component.ts`.**
 
 ```typescript
 import { Component, OnInit, Input } from '@angular/core';
@@ -117,9 +119,9 @@ export class TodosComponent implements OnInit {
 </ul>
 ```
 
-## Use Ui Library
+## Use the UI Library
 
-**Now import `UiModule` into `AppModule`.**
+**Now import `UiModule` into `apps/todos/src/app/app.module.ts`.**
 
 ```typescript
 import { BrowserModule } from '@angular/platform-browser';
@@ -153,5 +155,5 @@ export class AppModule {}
 !!!!!
 Libraries' public API is defined in...
 !!!!!
-index.ts files
+index.ts
 angular.json and tsconfig.json files

docs/tutorial/09-dep-graph.md

@@ -1,8 +1,8 @@
 # Step 9: Dep Graph
 
-An Nx workspace can contain dozens (or hundreds) of applications and libraries. It can be difficult to understand how they depend upon each other, and what are the implications of making a particular change.
+An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change.
 
-Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram isn’t correct even on Day 1, and gets more and more out of sync with every passing day.
+Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
 
 With Nx, you can do better than that.