@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](guide/!{_qsRepo} "Install the github QuickStart repo"). Make sure you have [!{_prereq} installed](guide/setup#install-prerequisites "What if you don't have !{_prereq}?"). Then ... 1. Create a project folder (you can call it `quickstart` and rename it later). 1. [Clone](guide/setup#clone "Clone it from github") or [download](guide/setup#download "download it from github") the **QuickStart seed** into your project folder. 1. !{_Install} [!{_npm}](guide/setup#install-prerequisites "What if you don't have !{_prereq}?") packages. 1. 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 ~~~ {.alert.is-important} `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 ~~~ {.alert.is-important} `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`!). ~~~ {.alert.is-important} 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/`
File Purpose
app/app.component.ts 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.
app/app.module.ts 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.
main.ts 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.
### Next Step If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular).



{@a install-prerequisites} ## Appendix: !{_prereq}