@description 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 ongoing development tasks such as testing, bundling, and deployment. The goal in this guide is to build and run a simple Angular application in TypeScript, using the Angular CLI while adhering to the [Style Guide](guide/guide/style-guide) 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 for real world applications. You'll pursue these ends in the following high-level steps: 1. [Set up](guide/cli-quickstart#devenv) the development environment. 2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application. 3. [Serve](guide/cli-quickstart#serve) the application. 4. [Edit](guide/cli-quickstart#first-component) the application. And you can also download the example.

Step 1. Set up the Development Environment

You need to set up your 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} **Verify that you are running at least node `6.9.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. ~~~ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. npm install -g @angular/cli

Step 2. Create a new project

Open a terminal window. Generate a new project and skeleton application by running the following commands: ng new my-app ~~~ {.l-sub-section} Patience please. It takes time to set up a new project, most of it spent installing npm packages. ~~~

Step 3: Serve the application

Go to the project directory and launch the server. cd my-app ng serve --open The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the `--open` (or just `-o`) option will automatically open your browser on `http://localhost:4200/`. Your app greets you with a message:

Step 4: Edit your first Angular component

The CLI created the first Angular component for you. This is the _root component_ and it is named `app-root`. You can find it in `./src/app/app.component.ts`. Open the component file and change the `title` property from _app works!_ to _My First Angular App_: The browser reloads automatically with the revised title. That's nice, but it could look better. Open `src/app/app.component.css` and give the component some style.

Looking good! ## 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](guide/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. ## 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. ### 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.

src app app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

assets .gitkeep

environments environment.prod.ts

environment.ts

favicon.ico

index.html

main.ts

polyfills.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

File	Purpose
`app/app.component.{ts,html,css,spec.ts}`	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.
`app/app.module.ts`	Defines `AppModule`, the [root module](guide/guide/appmodule) that tells Angular how to assemble the application. Right now it declares only the `AppComponent`. Soon there will be more components to declare.
`assets/*`	A folder where you can put images and anything else to be copied wholesale when you build your application.
`environments/*`	This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are 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. You might even use some mock services. Either way, the CLI has you covered.
`favicon.ico`	Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
`index.html`	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 automatically adds all `js` and `css` files when building your app so you never need to add any `