docs(): update some docs for canary

Author: Awk34

Diff for: docs/01_Getting_Started/01_Prerequisites.md

@@ -23,7 +23,7 @@ your computer's startup. Example:
 
 ### node-gyp
 
-`node-gyp` is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. You'll need it for things like brotli compression.
+`node-gyp` is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. You'll need it for things like `uws`.
 
 Read through the [Installation section of the `node-gyp` readme](https://github.com/nodejs/node-gyp#installation). Basically you'll need [Python 2.7](https://www.python.org/downloads/), `make`, and a C/C++ compiler (like GCC on unix, Xcode on OS X, or Visual Studio tools on Windows). To tell npm to use Python 2.7 (if you also have a different version installed), run `npm config set python /path/to/executable/python2.7`. Here's a snapshot of the instructions from their readme:
 

Diff for: docs/01_Getting_Started/03_Running_Your_New_App.md

@@ -1,10 +1,8 @@
 ## Running Your New App
 
-You can start your new app by running `gulp serve`. This will do some preliminary things like clean out temporary
-files, lint your scripts, inject any new CSS files into your main one, apply environment variables, and download
-any new TypeScript definitions. It will then start up a new development server, which will kick off a Webpack build.
-it uses Browser Sync to facilitate front-end development. Your files will also be watched for changes. Any front-end
-changes will kick off another webpack build. Any back-end changes will restart the back-end server, cleaning the
-development database and re-seeding it as well.
+You can start your new app by running `npm run start:server` and `npm run start:client`. This will start up the Node.js
+back-end server, as well as a Webpack dev server to serve the front-end files (with things like Hot Module Replacement).
+Your files will be watched for changes. Any front-end changes will be seen by the Webpack server, and any back-end
+changes will restart the back-end server, cleaning the development database and re-seeding it as well.
 
-Once the `serve` tasks are complete, a browser tab should be opened to your new app server.
+The `npm run start:client` task will show you at which local port you can access your front-end app (usually http://localhost:8080/).

Diff for: docs/01_Getting_Started/04_Project_Overview.md

@@ -1,6 +1,6 @@
 ## Project Overview
 
-What follows is an overfiew of the files/folders in your newly generated project.
+What follows is an overview of the files/folders in your newly generated project.
 
 ### Project Root
 
@@ -29,18 +29,18 @@ webpack.make.js // main file for Webpack configuration
 
 ```
 │   .eslintrc // eslint config for client files
-│   polyfills.js // imports of polyfills
 │   _index.html // template for the root HTML file of your app
 │
 ├───app
-│   │   app.config.js // contains app-wide configuration code
+│   │   app.js // App entry point
+│   │   app.component.js // Root-level Angular component (loads header, footer, and current route)
 │   │   app.constants.js // gets injected with constants from `server/config/environment/shared.js`
 │   │   app.{js,ts} // root JavaScript file of your app
 │   │   app.{css,scss,stylus,less} // root CSS file of your app
+│   |   polyfills.js // imports of polyfills
 │   │
 │   ├───account // pages related to login / signup / user settings
-│   │   │   account.routes.js // route information
-│   │   │   index.js // account module root
+│   │   │   account.module.js // account module root
 │   │   │
 │   │   ├───login
 │   │   ├───settings
@@ -56,25 +56,19 @@ webpack.make.js // main file for Webpack configuration
     ├───auth
     │       auth.module.js // module containing auth components
     │       auth.service.js // authentication service
-    │       interceptor.service.js // intercepts requests and adds tokens if needed. Also redirects 401s to the login page.
-    │       router.decorator.js // facilitates auth-based routing configuration
     │       user.service.js // user resource service
     │
     ├───footer
     │
-    ├───modal
-    │
     ├───navbar
     │
     ├───oauth-buttons // buttons for oauth login on signup / login pages
     │
     ├───socket
+    │       primus.mock.js // mock for the Primus class (WebSocket framework)
     │       socket.mock.js // mock service for unit testing
     │       socket.service.js // service for Socket IO integration
     │
-    ├───ui-router
-    │       ui-router.mock.js // mock service for unit testing
-    │
     └───util // general utility service
 ```
 

Diff for: docs/02_Developing/00_Starting_Up.md

@@ -3,9 +3,13 @@
 Now that you've gone through everything in the Getting Started section, lets get our app up and running. We do this by running the following:
 
 ```bash
-$ gulp serve
+$ npm run start:server
+```
+```bash
+$ npm run start:client
 ```
 
+<!--
 We should see something like this spit out after it:
 
 ```bash
@@ -76,6 +80,7 @@ Child html-webpack-plugin for "..\client\index.html":
     ../client/index.html  2.69 kB       0
 webpack: bundle is now VALID.
 ```
+-->
 
 And then our default browser should open up to the app:
 
@@ -87,7 +92,10 @@ Fantastic! We're now up and running with our Full-Stack Angular web application!
 
 ### Homepage
 
-Assuming you scaffolded with a back-end database, you should see some 'features'. If you scaffolded with socket.io, you should see 'x' buttons next to each, and an input box. Try opening two browser windows to the same page side-by-side, and hitting the 'x' on one of the features. You should see the feature get removed on both web pages. Neat! This is because these database object changes are communicated to clients using socket.io.
+Assuming you scaffolded with a back-end database, you should see some 'features'. If you scaffolded with socket.io,
+you should see 'x' buttons next to each, and an input box. Try opening two browser windows to the same page
+side-by-side, and hitting the 'x' on one of the features. You should see the feature get removed on both web pages.
+Neat! This is because these database object changes are communicated to clients using socket.io.
 
 
 <img src="../images/socket.io-demo.gif" alt="Socket.io demo screenshot">
@@ -97,9 +105,11 @@ Neat. Let's see what else we can do.
 
 ### Auth
 
-Assuming you scaffolded with auth support, you should see a 'Sign Up' and a 'Log In' button at the top-right of your page. Let's go to the Log In page.
+Assuming you scaffolded with auth support, you should see a 'Sign Up' and a 'Log In' button at the top-right of your
+page. Let's go to the Log In page.
 
-You should see inputs for an email address and a password. When running your project in a devlopment environment, you'll get two user accounts automatically generated:
+You should see inputs for an email address and a password. When running your project in a development environment, you'll
+get two user accounts automatically generated:
 
  * Test User
    * email: [email protected]
@@ -110,9 +120,12 @@ You should see inputs for an email address and a password. When running your pro
    * password: admin
    * role: admin
 
-Go ahead and log in with the admin account, so we can see the extra admin bits too. You should then get sent back to the home page, but should notice that the navbar looks a bit different:
+Go ahead and log in with the admin account, so we can see the extra admin bits too. You should then get sent back to the
+home page, but should notice that the navbar looks a bit different:
 
 <img src="../images/logged-in.jpg" alt="Logged in as admin screenshot">
 
 
-First, at the top right, we see a greeting for our username, a cog icon (for user settings), and a logout button. Then, since we're an admin, we see a new 'Admin' state on the navbar. The admin section lists users and allows you to delete them. The user settings page allows you to change your password.
+First, at the top right, we see a greeting for our username, a cog icon (for user settings), and a logout button. Then,
+since we're an admin, we see a new 'Admin' state on the navbar. The admin section lists users and allows you to delete
+them. The user settings page allows you to change your password.

Diff for: docs/02_Developing/01_Adding_a_Route.md

@@ -1,3 +1,5 @@
+> ATTENTION: THIS PAGE IS OUT-OF-DATE
+
 # Adding a Route
 
 Alright, now let's add another route to our app. We'll call it 'foo'. We can easily do this with the `yo angular-fullstack:route` subgenerator command:
@@ -10,11 +12,10 @@ $ yo angular-fullstack:route foo
 ? Where would you like to create this route? client/app/
 ? What will the url of your route be? (/foo)
 ? What will the url of your route be? /foo
-identical client\app\foo\foo.routes.js
-identical client\app\foo\foo.component.js
-identical client\app\foo\foo.component.spec.js
-identical client\app\foo\foo.html
-identical client\app\foo\foo.scss
+create client\app\foo\foo.component.js
+create client\app\foo\foo.component.spec.js
+create client\app\foo\foo.html
+create client\app\foo\foo.scss
 
 In the parent of this component, you should now import this component and add it as a dependency:
 
@@ -23,11 +24,14 @@ In the parent of this component, you should now import this component and add it
     export angular.module('myParentModule', [FooComponent]);
 ```
 
-We give it our route name ('foo'), and a few more details: the name of the Angular module to create ('myApp.foo'), which folder to put the route under ('client/app/foo/'), and the URL of the route ('localhost:3000/foo').
+We give it our route name ('foo'), and a few more details: the name of the Angular module to create ('myApp.foo'), which
+folder to put the route under ('client/app/foo/'), and the URL of the route ('localhost:3000/foo').
 
-This will create an Angular 1.5 component with an Angular module (`foo.component.js`), a template file (`foo.html`), a CSS file (`foo.scss`), a unit test file (`foo.component.spec.js`), and a routing file (`foo.routes.js`).
+This will create an Angular component with an Angular module (`foo.component.js`), a template file (`foo.html`), a CSS
+file (`foo.scss`), a unit test file (`foo.component.spec.js`), and a routing file (`foo.routes.js`).
 
-Since we're using Webpack, We'll need to import our component somewhere. Since this is a generic app route (and for simplicity), we'll import it in `app.js`, under our root Angular module, like so:
+Since we're using Webpack, We'll need to import our component somewhere. Since this is a generic app route
+(and for simplicity), we'll import it in `app.js`, under our root Angular module, like so:
 
 `client/app/app.js`
 ```js