include _util-fns
  
:marked
  Good tools make application development quicker and easier to maintain than
  if you 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 
  application in TypeScript, using Angular-CLI 
  while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
  benefit _every_ Angular project.
  
  By the end of the chapter, you'll have a basic understanding of development with the CLI
  and a foundation for both these documentation samples and our real world applications.

  You'll pursue these ends in the following high-level steps:
  
  1. [Set up](#devenv) the development environment
  2. [Create](#create-proj) a new project and skeleton application
  3. [Serve](#serve) the application
  4. [Edit](#first-component) the application


.l-main-section
h2#devenv Step 1. Set up the Development Environment
:marked
  You need to set up our development environment before you 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 at least node `4.x.x` and npm `3.x.x`**
    by running `node -v` and `npm -v` in a terminal/console window.
    Older versions produce errors, but newer versions are fine.
:marked
  Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
  
code-example(language="sh" class="code-shell").
  npm install -g angular-cli
  
.l-main-section
h2#create-project Step 2. Create a new project
:marked
  Open a terminal window.

:marked
  Generate a new project and skeleton application by running the following commands:

code-example(language="sh" class="code-shell").
  ng new my-app

.l-sub-section
  :marked
    Patience please. 
    It takes time to set up a new project, most of it spent installing npm packages.

.l-main-section
h2#serve Step 3: Serve the application
:marked
  Go to the project directory and launch the server.

code-example(language="sh" class="code-shell").
  cd my-app
  ng serve
  
:marked
  The `ng serve` command launches the server, watches our files, 
  and rebuilds the app as you 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!")

.l-main-section
h2#first-component Step 4: Edit our first Angular component
:marked
  The CLI created our first Angular component for us. 
  This is the _root component_ and it is named `app-root`.
  You can find it in `./src/app/app.component.ts`.

:marked
  Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
  
+makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")

:marked
  The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
  
  Open `src/app/cli-quickstart.component.css` and give our component some style 

+makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")

figure.image-display
  img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")  
  
:marked
  Looking good!

.l-main-section
:marked
  ## What's next?
  That's about all you'd expect to do in a "Hello, World" app.

  You're ready to take the [Tour of Heroes Tutorial](./tutorial) and build
  a small application that demonstrates the great things you can build with Angular.

  Or you can stick around a bit longer to learn about the files in your brand new project.

.l-main-section
:marked
  ## Project file review

  An Angular-CLI project is the foundation for both quick experiments and enterprise solutions.

  The first file you should check out is `README.md`.
  It has some basic information on how to use CLI commands.
  Whenever you want to know more about how Angular-CLI works make sure to visit 
  [the Angular-CLI repository](https://github.com/angular/angular-cli) and 
  [Wiki](https://github.com/angular/angular-cli/wiki).

  Some of the generated files might be unfamiliar to you. 

block src-files
  :marked
    ### The `src` folder
    Your app lives in the `src` folder.
    All Angular components, templates, styles, images and anything else your app needs go here.
    Any files outside of this folder are meant to support building your app.

.filetree
  .file src
  .children
    .file app
    .children
      .file app.component.css
      .file app.component.html
      .file app.component.spec.ts
      .file app.component.ts
      .file app.module.ts
    .file assets
    .children
      .file .gitkeep
    .file environments
    .children
      .file environment.prod.ts
      .file environment.ts
    .file favicon.ico
    .file index.html
    .file main.ts
    .file polyfills.ts
    .file styles.css
    .file test.ts
    .file tsconfig.json

style td, th {vertical-align: top}
table(width="100%")
  col(width="20%")
  col(width="80%")
  tr
    th File
    th Purpose
  tr
    td <code>app/app.component.{ts,html,css,spec.ts}</code>
    td
      :marked
        Defines the `AppComponent` along with an HTML template, CSS stylesheet and a unit test.
        It is the **root** component of what will become a tree of nested components
        as the application evolves. 
  tr
    td <code>app/app.module.ts</code>
    td
      :marked
        Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module") 
        that tells Angular how to assemble the application.
        Right now it declares only the `AppComponent`. 
        Soon there will be more components to declare. 
  tr
    td <code>assets/*</code>
    td
      :marked
        A folder where you can put images and anything else you need to be copied wholesale 
        when you build your application.
  tr
    td <code>environments/*</code>
    td
      :marked
        This folder contains one file for each of your destination environments,
        each exporting simple configuration variables to use on your application.
        The files will be replaced on-the-fly when you build your app.
        You might use a different API endpoint for development than you do for production.
        Or maybe different analytics tokens.
        Maybe even some mock services.
        Either way, the CLI has you covered.
  tr
    td <code>favicon.ico</code>
    td
      :marked
        Every site wants to look good on the bookmark bar.
        Get started with your very own Angular icon.
  tr
    td <code>index.html</code>
    td
      :marked
        The main html page that is served when someone visits your site.
        Most of the time you'll never need to edit it.
        The CLI will automatically add all `js` and `css` files when building your app so you 
        never need to add any `<script>` or `<link>` tags here manually.
  tr
    td <code>main.ts</code>
    td
      :marked
        The main entry point for your app.
        Compiles the application with the [JiT compiler](glossary.html#jit)
        and [bootstraps](guide/appmodule.html#main "bootstrap the application") 
        the application to run in the browser.
        You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation)
        without changing any code by passing on `--aot` to `ng build` or `ng serve`.
  tr
    td <code>polyfills.ts</code>
    td
      :marked
        Different browsers have different levels of support of the web standards.
        Polyfills help normalize those differences.
        You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
        the [Browser Support guide](guide/browser-support.html) for more information.
  tr
    td <code>styles.css</code>
    td
      :marked
        Your global styles go here. 
        Most of the time you'll want to have local styles in your components for easier maintenance,
        but styles that affect all of your app need to be in a central place.
  tr
    td <code>test.ts</code>
    td
      :marked
        This is the main entry point for your unit tests.
        It has some custom configuration that might be unfamiliar, but it's not something you'll
        need to edit.
  tr
    td <code>tsconfig.json</code>
    td
      :marked
        Configuration for the TypeScript compiler.


block root-files
  :marked
    ### The root folder
    The `src/` folder is just one of the items inside the project's root folder. 
    Other files help you build, test, maintain, document, and deploy the app. 
    These files go in the root folder next to `src/`.

.filetree
  .file my-app
  .children
    .file e2e
    .children
      .file app.e2e-spec.ts
      .file app.po.ts
      .file tsconfig.json
    .file node_modules/...
    .file src/...
    .file .editorconfig
    .file .gitignore
    .file angular-cli.json
    .file karma.conf.js
    .file package.json
    .file protractor.conf.js
    .file README.md
    .file tslint.json        

style td, th {vertical-align: top}
table(width="100%")
  col(width="20%")
  col(width="80%")
  tr
    th File
    th Purpose
  tr
    td <code>e2e/*</code>
    td
      :marked
        Inside `e2e/` live the End-to-End tests. 
        They shouldn't be inside `src/` because e2e tests are really a separate app that
        just so happens to test your main app. 
        That's why it they even have their own `tsconfig.json`.
  tr
    td <code>node_modules/...</code>
    td
      :marked
        `Node.js` creates this folder and puts all third party modules listed in 
        `package.json` inside of it.
  tr
    td <code>.editorconfig</code>
    td
      :marked
        Simple configuration for your editor to make sure everyone that uses your project
        has the same basic configuration.
        Most editors support an `.editorconfig` file.
        See http://editorconfig.org for more information.
  tr
    td <code>.gitignore</code>
    td
      :marked
        Git configuration to make sure autogenerated files are not commited to source control.
  tr
    td <code>angular-cli.json</code>
    td
      :marked
        Configuration for Angular-CLI.
        In this file you can set several defaults and also configure what files are included
        when your project is build.
        Check out the official documentation if you want to know more.
  tr
    td <code>karma.conf.js</code>
    td
      :marked
        Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
        used when running `ng test`.
  tr
    td <code>package.json</code>
    td
      :marked
        `npm` configuration listing the third party packages your project uses.
        You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
  tr
    td <code>protractor.conf.js</code>
    td
      :marked
        End-to-end test configuration for [Protractor](http://www.protractortest.org/),
        used when running `ng e2e`.
  tr
    td <code>README.md</code>
    td
      :marked
        Basic documentation for your project, pre-filled with CLI command information.
        Make sure to enhance it with project documentation so that anyone
        checking out the repo can build your app!
  tr
    td <code>tslint.json</code>
    td
      :marked
        Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
        [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
        Linting helps keep your code style consistent.
        
.l-sub-section
  :marked
    ### Next Step

    If you're new to Angular, we recommend staying on the 
    [learning path](guide/learning-angular.html "Angular learning path").        
    You can skip the "Setup" chapter since you're already using the Angular-CLI setup.