angular-cn/aio/content/guide/setup.md

@title Setup for local development

@intro Install the Angular QuickStart seed for faster, more efficient development on your machine.

@description

{@a develop-locally}

Setup a local development environment

The QuickStart live-coding example is an Angular _playground_. It's not where you'd develop a real application. You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github. Make sure you have !{_prereq} installed. Then ...

1. Create a project folder (you can call it quickstart and rename it later).
2. Clone or download the QuickStart seed into your project folder.
3. !{_Install} !{_npm} packages.
4. Run !{_npm} !{_start} to launch the sample application.

{@a clone}

Clone

Perform the clone-to-launch steps with these terminal commands.

git clone .git quickstart cd quickstart

`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.

{@a download}

Download

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

cd quickstart

`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.

{@a non-essential}

Delete non-essential files (optional)

You can quickly delete the non-essential files that concern testing and QuickStart repository maintenance (including all git-related artifacts such as the .git folder and .gitignore!).

Do this only in the beginning to avoid accidentally deleting your own tests and git setup!

Open a terminal window in the project folder and enter the following commands for your environment:

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt rm src/app/*.spec*.ts rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q

{@a seed}

What's in the QuickStart seed?

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies.

Files inside src/ "belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise.

The following are all in src/

<th>
  File
</th>


<th>
  Purpose
</th>

<td>
  <ngio-ex>app/app.component.ts</ngio-ex>
</td>


<td>
  Defines the same `AppComponent` as the one in the QuickStart !{_playground}.      
        It is the **root** component of what will become a tree of nested components      
        as the application evolves. 
</td>

<td>
  <code>app/app.module.ts</code>
</td>


<td>
  Defines `AppModule`, the  [root module](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.
</td>

<td>
  <ngio-ex>main.ts</ngio-ex>
</td>


<td>
  Compiles the application with the [JIT compiler](glossary) and      
        [bootstraps](guide/appmodule)       
        the application's main module (`AppModule`) to run in the browser.      
        The JIT compiler is a reasonable choice during the development of most projects and      
        it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.      
        You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation.      
        
</td>

Next Step

If you're new to Angular, we recommend staying on the learning path.

{@a install-prerequisites}

Appendix: !{_prereq}