diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.spec.ts
new file mode 100644
index 0000000000..133dc445e8
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.spec.ts
@@ -0,0 +1,24 @@
+import {
+ beforeEachProviders,
+ describe,
+ expect,
+ it,
+ inject
+} from '@angular/core/testing';
+import { Angular2CliQuickstartAppComponent } from '../app/angular2-cli-quickstart.component';
+
+beforeEachProviders(() => [Angular2CliQuickstartAppComponent]);
+
+describe('App: Angular2CliQuickstart', () => {
+ it('should create the app',
+ inject([Angular2CliQuickstartAppComponent], (app: Angular2CliQuickstartAppComponent) => {
+ expect(app).toBeTruthy();
+ }));
+
+ // #docregion title
+ it('should have as title \'My First Angular 2 App\'',
+ inject([Angular2CliQuickstartAppComponent], (app: Angular2CliQuickstartAppComponent) => {
+ expect(app.title).toEqual('My First Angular 2 App');
+ }));
+ // #enddocregion title
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.ts
new file mode 100644
index 0000000000..1a2bac4736
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/angular2-cli-quickstart.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'angular2-cli-quickstart-app',
+ templateUrl: 'angular2-cli-quickstart.component.html',
+ styleUrls: ['angular2-cli-quickstart.component.css']
+})
+// #docregion title
+export class Angular2CliQuickstartAppComponent {
+ title = 'My First Angular 2 App';
+}
+// #enddocregion title
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts
new file mode 100644
index 0000000000..79ee96fdfd
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts
@@ -0,0 +1,7 @@
+// The file for the current environment will overwrite this one during build
+// Different environments can be found in config/environment.{dev|prod}.ts
+// The build system defaults to the dev environment
+
+export const environment = {
+ production: false
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/index.ts b/public/docs/_examples/cli-quickstart/ts/src/app/index.ts
new file mode 100644
index 0000000000..61617c7cbe
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/index.ts
@@ -0,0 +1,2 @@
+export {environment} from './environment';
+export {Angular2CliQuickstartAppComponent} from './angular2-cli-quickstart.component';
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/shared/index.ts b/public/docs/_examples/cli-quickstart/ts/src/app/shared/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cli-quickstart/ts/src/favicon.ico b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico
new file mode 100644
index 0000000000..8081c7ceaf
Binary files /dev/null and b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico differ
diff --git a/public/docs/_examples/cli-quickstart/ts/src/icon.png b/public/docs/_examples/cli-quickstart/ts/src/icon.png
new file mode 100644
index 0000000000..4dace951fa
Binary files /dev/null and b/public/docs/_examples/cli-quickstart/ts/src/icon.png differ
diff --git a/public/docs/_examples/cli-quickstart/ts/src/index.html b/public/docs/_examples/cli-quickstart/ts/src/index.html
new file mode 100644
index 0000000000..544d96499c
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Angular2CliQuickstart
+
+
+ {{#unless environment.production}}
+
+ {{/unless}}
+
+
+
+
+ Loading...
+
+
+
+ {{#each scripts.polyfills}}{{/each}}
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts
new file mode 100644
index 0000000000..124fd62260
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts
@@ -0,0 +1,10 @@
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { Angular2CliQuickstartAppComponent, environment } from './app/';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+bootstrap(Angular2CliQuickstartAppComponent);
+
diff --git a/public/docs/_examples/cli-quickstart/ts/src/manifest.webapp b/public/docs/_examples/cli-quickstart/ts/src/manifest.webapp
new file mode 100644
index 0000000000..cd4afd6247
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/manifest.webapp
@@ -0,0 +1,13 @@
+{
+ "name": "Angular2 Cli Quickstart",
+ "icons": [
+ {
+ "src": "icon.png",
+ "sizes": "96x96",
+ "type": "image/png"
+ }
+ ],
+ "start_url": "/index.html",
+ "display": "standalone",
+ "orientation": "portrait"
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/system-config.ts b/public/docs/_examples/cli-quickstart/ts/src/system-config.ts
new file mode 100644
index 0000000000..d2af1aac0c
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/system-config.ts
@@ -0,0 +1,54 @@
+/***********************************************************************************************
+ * User Configuration.
+ **********************************************************************************************/
+/** Map relative paths to URLs. */
+const map: any = {
+};
+
+/** User packages configuration. */
+const packages: any = {
+};
+
+////////////////////////////////////////////////////////////////////////////////////////////////
+/***********************************************************************************************
+ * Everything underneath this line is managed by the CLI.
+ **********************************************************************************************/
+const barrels: string[] = [
+ // Angular specific barrels.
+ '@angular/core',
+ '@angular/common',
+ '@angular/compiler',
+ '@angular/http',
+ '@angular/router',
+ '@angular/platform-browser',
+ '@angular/platform-browser-dynamic',
+
+ // Thirdparty barrels.
+ 'rxjs',
+
+ // App specific barrels.
+ 'app',
+ 'app/shared',
+ /** @cli-barrel */
+];
+
+const cliSystemConfigPackages: any = {};
+barrels.forEach((barrelName: string) => {
+ cliSystemConfigPackages[barrelName] = { main: 'index' };
+});
+
+/** Type declaration for ambient System. */
+declare var System: any;
+
+// Apply the CLI SystemJS configuration.
+System.config({
+ map: {
+ '@angular': 'vendor/@angular',
+ 'rxjs': 'vendor/rxjs',
+ 'main': 'main.js'
+ },
+ packages: cliSystemConfigPackages
+});
+
+// Apply the user's configuration.
+System.config({ map, packages });
diff --git a/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts b/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts
new file mode 100644
index 0000000000..beb6cefcec
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts
@@ -0,0 +1 @@
+///
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 3a83c2bdf3..59a7e50a52 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -7,6 +7,7 @@
"e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
"http-server": "tsc && http-server",
"http-server:e2e": "http-server",
+ "http-server:cli": "http-server dist/",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
@@ -16,7 +17,8 @@
"webdriver:update": "webdriver-manager update",
"start:webpack": "webpack-dev-server --inline --progress --port 8080",
"test:webpack": "karma start karma.webpack.conf.js",
- "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
+ "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
+ "build:cli": "ng build"
},
"keywords": [],
"author": "",
@@ -42,6 +44,7 @@
"bootstrap": "^3.3.6"
},
"devDependencies": {
+ "angular-cli": "^1.0.0-beta.5",
"canonical-path": "0.0.2",
"concurrently": "^2.0.0",
"css-loader": "^0.23.1",
diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade
index d1b8bbb5f7..cef158b6e7 100644
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@@ -36,12 +36,18 @@
- var cookbook = sections('cookbook');
- var basics = sections('guide', function(item) { return item.basics; });
- var guide = sections('guide', function(item) { return !item.basics; });
+- var cliQs = sections('', function(item) { return item.slug === 'cli-quickstart'; })[0] || {};
- var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {};
- var reference = sections('', function(item) { return item.reference; });
- var anyItemSelected = function(items) {
- var selectedCount = items.filter(function(item) { return !!item.class; }).length;
- return selectedCount > 0 ? 'is-nav-title-selected' : '';
- }
+- var isCliQuickstartSelected = function() {
+- var splitted = cur.split('/');
+- var bit = splitted[splitted.length - 1].replace('.html', '');
+- return bit === 'cli-quickstart' ? 'is-nav-title-selected' : '';
+-}
- var isQuickstartSelected = function() {
- var splitted = cur.split('/');
- var bit = splitted[splitted.length - 1].replace('.html', '');
@@ -66,6 +72,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
.nav-blocks
+ a(class="nav-title #{isCliQuickstartSelected(cur)}" href="#{cliQs.href}" title="#{cliQs.tooltip}") CLI Quickstart
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
.nav-blocks
@@ -115,4 +122,4 @@ script.
sideNav.scrollTop = link.offsetTop - (window.innerHeight/2);
//alert("offsetTop: " + link.offsetTop + " side-nav top is " + sideNav.scrollTop);
}
- })()
\ No newline at end of file
+ })()
diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json
index 861e707ff1..8c713e113d 100644
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@@ -6,6 +6,13 @@
"banner": "Welcome to angular.io/dart! The current Angular 2 release is beta.17. Consult the Change Log about recent enhancements, fixes, and breaking changes."
},
+ "cli-quickstart": {
+ "icon": "query-builder",
+ "title": "CLI Quickstart",
+ "description": "Use the CLI tool to build apps quickly in Angular 2",
+ "hide": true
+ },
+
"quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart",
diff --git a/public/docs/dart/latest/cli-quickstart.jade b/public/docs/dart/latest/cli-quickstart.jade
new file mode 100644
index 0000000000..29caa74a86
--- /dev/null
+++ b/public/docs/dart/latest/cli-quickstart.jade
@@ -0,0 +1 @@
+!= partial("../../_includes/styleguide/_styleguide")
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 44be71ef79..921c0f2b8b 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -6,6 +6,13 @@
"banner": "Welcome to Angular in JavaScript! The current Angular 2 release is rc.1. Please consult the Change Log about recent enhancements, fixes, and breaking changes."
},
+ "cli-quickstart": {
+ "icon": "query-builder",
+ "title": "CLI Quickstart",
+ "description": "Use the CLI tool to build apps quickly in Angular 2",
+ "hide": true
+ },
+
"quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart",
diff --git a/public/docs/js/latest/cli-quickstart.jade b/public/docs/js/latest/cli-quickstart.jade
new file mode 100644
index 0000000000..29caa74a86
--- /dev/null
+++ b/public/docs/js/latest/cli-quickstart.jade
@@ -0,0 +1 @@
+!= partial("../../_includes/styleguide/_styleguide")
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 4c5dd3550f..24201c4c8d 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -6,6 +6,12 @@
"banner": "Welcome to Angular in TypeScript! The current Angular 2 release is rc.1. Please consult the Change Log about recent enhancements, fixes, and breaking changes."
},
+ "cli-quickstart": {
+ "icon": "query-builder",
+ "title": "CLI Quickstart",
+ "description": "Use the CLI tool to build apps quickly in Angular 2"
+ },
+
"quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart",
diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
new file mode 100644
index 0000000000..a4ca326ad9
--- /dev/null
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -0,0 +1,296 @@
+include _util-fns
+
+:marked
+ Good tools make application development quicker and easier to maintain than
+ if we did everything by hand.
+
+ The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool
+ that can create a project, add files, and perform a variety of on-going development tasks such
+ as testing, bundling, and deployment.
+
+ Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular 2
+ application in TypeScript, using Angular-CLI
+ while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
+ benefit _every_ Angular 2 project.
+
+ By the end of the chapter, we'll have a basic understanding of development with the CLI
+ and a foundation for both these documentation samples and our real world applications.
+
+ We'll pursue these ends in the following high-level steps:
+
+ - [Set up](#devenv) the development environment
+ - [Create](#create-proj) a new project
+ - [Serve and test](#serve-and-test) the app
+ - [Edit](#edit) the app
+ - [Push](#github-pages) this demo app live to GitHub Pages
+
+
+.l-main-section
+h2#devenv Development Environment
+:marked
+ We need to set up our development environment before we can do anything.
+
+ Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+ if they are not already on your machine.
+.l-sub-section
+ :marked
+ **Verify that you are running node `v5.x.x` and npm `3.x.x`**
+ by running `node -v` and `npm -v` in a terminal/console window.
+ Older and newer versions produce errors.
+:marked
+ Then **install the [Angular-CLI](https://github.com/angular/angular-cli)**
+
+code-example(format="").
+ npm install -g angular-cli
+
+.l-main-section
+h2#create-project Create a new project
+:marked
+ Open a terminal window.
+
+.alert.is-important
+ :marked
+ _Windows Developers_: open a console window opened _as an **administrator**_.
+ The Angular-CLI build steps later in this tutorial
+ create symbolic links
+ to various directories. These so-called _symlinks_ save time and space.
+ But it takes administrator rights under Windows to create them.
+
+:marked
+ Generate a new project by running the following commands:
+
+code-example(format="").
+ ng new angular2-cli-quickstart
+
+.l-sub-section
+ :marked
+ Patience please.
+ It takes time to set up a new project, most of it spent installing npm packages.
+:marked
+ **Let's serve our app.**
+
+a(id="serve-and-test")
+.l-main-section
+:marked
+ ## Serve & test
+
+ Go to the project directory and launch the server.
+code-example(format="").
+ cd angular2-cli-quickstart
+ ng serve
+:marked
+ The `ng serve` command launches the server, watches our files,
+ and rebuilds the app as we make changes to the files.
+
+ Open a browser on `http://localhost:4200/`; the app greets us with a message:
+
+figure.image-display
+ img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")
+:marked
+ Now we're ready to write some code... or are we? We certainly could start writing code right now, but our tests would break.
+
+:marked
+ ### Tests?
+
+ What tests? The Angular-CLI created tests for our initial project!
+ They are configured to run on [Google Chrome](https://www.google.com/chrome/) so make sure it is installed before running them.
+
+ Open a new terminal (or console) window and run the *end-to-end (e2e)* tests with the command: `ng e2e`.
+ Look for the following output after a few console messages:
+code-example(format="").
+ Spec started
+
+ angular2-cli-quickstart App
+ ✓ should display message saying app works
+
+ Executed 1 of 1 spec SUCCESS in 2 secs.
+
+:marked
+ Looks all green and good. Always a good sign.
+
+ Keep the server running in the original window and run the *unit tests* with the command: `ng test --build=false --watch=false`.
+ After more console output, we should see a message like this:
+
+code-example(format="").
+ Chrome 49.0.2623 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.016 secs / 0.009 secs)
+
+:marked
+ It's a good idea to run tests before and after making changes to confirm that our app behaves as we expect it to.
+
+ *At last* we are ready to write some code.
+
+a(id="edit")
+.l-main-section
+:marked
+ ## Edit the app
+
+ We open the `angular2-cli-quickstart` projecd folder in our favourite editor.
+
+ The root component is named after the project. We created the project with the name `angular2-cli-quickstart`,
+ so our root component is `Angular2CliQuickstartApp` and can be found in `src/app/angular2-cli-quickstart.component.ts`
+
+ Open it and update the title:
+
++makeExample('cli-quickstart/ts/src/app/angular2-cli-quickstart.component.ts', 'title', 'src/app/angular2-cli-quickstart.component.ts')(format=".")
+
+:marked
+ The browser reloads automatically and we see the revised title. That's nice, but we can make look better.
+
+ Open `src/app/angular2-cli-quickstart.component.css` and give the app some style
+
++makeExample('cli-quickstart/ts/src/app/angular2-cli-quickstart.component.css', null, 'src/app/angular2-cli-quickstart.component.css')(format=".")
+
+:marked
+ Looking good!
+
+figure.image-display
+ img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")
+
+:marked
+ ### Re-test and fix
+
+ We've made a few changes that we should commit to source control.
+
+ Before we do, let's run our tests again.
+ While `ng serve` continues to run in the original window,
+ enter `ng e2e` again. This time the *e2e* test fails.
+
+code-example(format="").
+ 1) angular2-cli-quickstart App should display message saying app works
+ - Expected 'My First Angular 2 App' to equal 'angular2-cli-quickstart works!'.
+
+ Executed 1 of 1 spec (1 FAILED) in 1 sec.
+
+:marked
+ Run the unit tests again: `ng test --build=false --watch=false`. They fail too.
+code-example(format="").
+ Chrome 49.0.2623 (Windows 10 0.0.0) App: Angular2CliQuickstart should have as title 'angular2-cli-quickstart works!' FAILED
+ Expected 'My First Angular 2 App' to equal 'angular2-cli-quickstart works!'.
+ ...
+ Chrome 49.0.2623 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0.038 secs / 0.022 secs)
+
+:marked
+ Our tests broke - as they should. We changed the title of our app, and our tests are looking for the original title.
+
+ Fix the expected *title* text in both tests:
+
++makeTabs(
+ 'cli-quickstart/ts/e2e/app.e2e.ts, cli-quickstart/ts/src/app/angular2-cli-quickstart.component.spec.ts',
+ 'title, title',
+ 'e2e/app.e2e.ts, src/app/angular2-cli-quickstart.component.spec.ts')(format=".")
+
+:marked
+ Run our tests again and... all green! We are back in business.
+
+ Our project is again in a stable state.
+
+h2#git Commit with git
+.l-main-section
+ The CLI created our project as a local **git** repository.
+ This is a good moment to commit our changes.
+
+code-example(format="").
+ git commit -a -m "Change root component title"
+
+a(id="github-pages")
+.l-main-section
+:marked
+ ## Push to production (Optional)
+
+ Next stop: the production environment.
+
+ Angular-CLI has a nifty command that helps us push our app onto [GitHub Pages](https://pages.github.com/) hosting.
+
+.l-sub-section
+ :marked
+ [Create a free GitHub Account](https://github.com/join) if you don't have one.
+ [Setup SSH keys](https://help.github.com/articles/generating-an-ssh-key/)
+ if you haven't done that yet.
+:marked
+ Close all windows/processes (like `ng serve`!) that are using the app files and folders.
+
+ Run `ng github-pages:deploy`.
+
+.alert.is-important
+ :marked
+ The `ng github-pages:deploy` command performs a series of git operations that add and remove files.
+ It can fail if those files are held by another process.
+
+ If the command fails, we might be left in the `gh-pages` branch instead of the `master` branch.
+
+ Run `git branch` and look for the _starred_ branch name.
+ If it isn't `master`, run `git checkout master`,
+ close open windows that might be using these files, and try `ng github-pages:deploy` again.
+
+:marked
+ This command creates a new github repository the first time we run it.
+ Subsequent calls use this existing repo.
+
+ The command prompts us for a github token that will allow the CLI to create a repo for us.
+ Don't worry, the token is used only once and we can safely delete it after the repo is created.
+ Deleting the token invalidates it.
+
+ ### Get a token
+ Go to [https://github.com/settings/tokens](https://github.com/settings/tokens), and click *Generate new token*.
+
+figure.image-display
+ img(src='/resources/images/devguide/cli-quickstart/gh-token-1.png' alt="Generate new token")
+
+:marked
+ We must login again and then choose a description and scope for the token.
+
+ Name the token `angular-cli`, chose as scope *public_repo*, and then click *Generate token* at the bottom.
+figure.image-display
+ img(src='/resources/images/devguide/cli-quickstart/gh-token-2.png' alt="Description and scope")
+
+:marked
+ On the next screen, copy the token, paste it in the console window that asked us for the token, and press enter.
+
+ Keep this page open so we can delete the token when we're done.
+figure.image-display
+ img(src='/resources/images/devguide/cli-quickstart/gh-token-3.png' alt="Copy and delete")
+
+:marked
+ The command prompts for our github username. Then it creates the repository, builds the app, and deploys it as a Github Page.
+ The entire process we just described looks like this:
+
+code-example(format="." language="").
+ $ ng github-pages:deploy
+ Built project successfully. Stored in "dist/".
+
+ In order to deploy this project via GitHub Pages, we must first create a repository for it.
+ It's safer to use a token than to use a password, so you will need to create one.
+
+ Go to the following page and click 'Generate new token'.
+ https://github.com/settings/tokens
+
+ Choose 'public_repo' as scope and then click 'Generate token'.
+
+ ? Please enter GitHub token you just created (used only once to create the repo): YOUR_TOKEN_HERE
+ ? and your GitHub user name: YOUR_USERNAME_HERE
+ Deployed! Visit https://YOUR_USERNAME_HERE.github.io/angular2-cli-quickstart/
+ Github pages might take a few minutes to show the deployed site.
+
+:marked
+ We can now delete the github token under the name of `angular-cli`, as it won't be needed anymore.
+
+ Now all we have to do is visit [https://YOUR_USERNAME_HERE.github.io/angular2-cli-quickstart/](https://YOUR_USERNAME_HERE.github.io/angular2-cli-quickstart/) and check out our new web app!
+
+ We can continue to develop it locally and deploy it whenever we want. The repo creation step only happens on the first time, so next times there is no need to get a token.
+
+.l-main-section
+:marked
+ ## Wrap Up
+ Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
+
+ We kept it simple in our first pass: we generated a project, edited a page,
+ fixed some tests and finally pushed it live. That's about all we'd expect to
+ do for a "Hello, World" app.
+
+ **We have greater ambitions.**
+
+ The good news is that the overhead of setup is (mostly) behind us.
+ We'll probably only touch the `package.json` to update libraries.
+ We'll likely open `system-config.ts` only if we need to add a library.
+
+ Angular-CLI will help us do the rest, and we can push it online at any time.
diff --git a/public/resources/images/devguide/cli-quickstart/app-works.png b/public/resources/images/devguide/cli-quickstart/app-works.png
new file mode 100644
index 0000000000..ade2555d47
Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/app-works.png differ
diff --git a/public/resources/images/devguide/cli-quickstart/gh-token-1.png b/public/resources/images/devguide/cli-quickstart/gh-token-1.png
new file mode 100644
index 0000000000..d9fc74ddaf
Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/gh-token-1.png differ
diff --git a/public/resources/images/devguide/cli-quickstart/gh-token-2.png b/public/resources/images/devguide/cli-quickstart/gh-token-2.png
new file mode 100644
index 0000000000..6a45e178ad
Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/gh-token-2.png differ
diff --git a/public/resources/images/devguide/cli-quickstart/gh-token-3.png b/public/resources/images/devguide/cli-quickstart/gh-token-3.png
new file mode 100644
index 0000000000..d9348ab211
Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/gh-token-3.png differ
diff --git a/public/resources/images/devguide/cli-quickstart/my-first-app.png b/public/resources/images/devguide/cli-quickstart/my-first-app.png
new file mode 100644
index 0000000000..77a660ad77
Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/my-first-app.png differ