2017-02-22 13:09:39 -05:00
@title
Setup for local development
@intro
2017-03-11 08:44:25 -05:00
Install the Angular QuickStart seed for faster, more efficient development on your machine.
2017-02-22 13:09:39 -05:00
@description
2017-03-27 11:08:53 -04:00
2017-02-22 13:09:39 -05:00
{@a develop-locally}
## Setup a local development environment
< span if-docs = "ts" >
The < live-example name = quickstart > QuickStart live-coding</ live-example > example is an Angular _playground_ .
It's not where you'd develop a real application.
2017-03-11 10:36:40 -05:00
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.
2017-02-22 13:09:39 -05:00
< / span >
Setting up a new project on your machine is quick and easy with the **QuickStart seed** ,
2017-03-11 10:36:40 -05:00
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}?" ).
2017-02-22 13:09:39 -05:00
Then ...
1. Create a project folder (you can call it `quickstart` and rename it later).
2017-03-11 10:36:40 -05:00
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.
2017-02-22 13:09:39 -05:00
1. Run `!{_npm} !{_start}` to launch the sample application.
{@a clone}
### Clone
Perform the _clone-to-launch_ steps with these terminal commands.
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< code-example language = "sh" class = "code-shell" >
git clone .git quickstart
cd quickstart
< / code-example >
~~~ {.alert.is-important}
`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.
~~~
{@a download}
### Download
< a href = "!{_qsRepoZip}" title = "Download the QuickStart seed repository" > Download the QuickStart seed< / a >
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< code-example language = "sh" class = "code-shell" >
cd quickstart
< / code-example >
~~~ {.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)
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< code-example language = "sh" class = "code-shell" >
xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt
< / code-example >
### Windows
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< code-example language = "sh" class = "code-shell" >
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
< / code-example >
{@a seed}
## What's in the QuickStart seed?
2017-03-27 11:08:53 -04:00
The **QuickStart seed** contains the same application as the QuickStart playground.
But its true purpose is to provide a solid foundation for _local_ development.
Consequently, there are _many more files_ in the project folder on your machine,
most of which you can [learn about later ](guide/setup-systemjs-anatomy ).
{@a app-files}
Focus on the following three TypeScript (`.ts`) files in the ** `/src` ** folder.
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-filetree >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-folder >
src
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-folder >
app
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-file >
app.component.ts
< / aio-file >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-file >
app.module.ts
< / aio-file >
< / aio-folder >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< aio-file >
main.ts
< / aio-file >
< / aio-folder >
< / aio-filetree >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< code-tabs >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< code-pane title = "src/app/app.component.ts" path = "setup/src/app/app.component.ts" >
< / code-pane >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< code-pane title = "src/app/app.module.ts" path = "setup/src/app/app.module.ts" >
< / code-pane >
2017-03-30 15:04:18 -04:00
2017-03-27 11:08:53 -04:00
< code-pane title = "src/main.ts" path = "setup/src/main.ts" >
< / code-pane >
< / code-tabs >
2017-02-22 13:09:39 -05:00
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/`
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< style >
td, th {vertical-align: top}
< / style >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< table width = "100%" >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< col width = "20%" >
< / col >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< col width = "80%" >
< / col >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< th >
File
< / th >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< th >
Purpose
< / th >
< / tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< td >
< ngio-ex > app/app.component.ts< / ngio-ex >
< / td >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< 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 >
< / tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< tr if-docs = "ts" >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< td >
< code > app/app.module.ts< / code >
< / td >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< td >
2017-03-11 10:36:40 -05:00
Defines `AppModule` , the [root module ](guide/appmodule ) that tells Angular how to assemble the application.
2017-02-22 13:09:39 -05:00
Right now it declares only the `AppComponent` .
Soon there will be more components to declare.
< / td >
< / tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< tr >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< td >
< ngio-ex > main.ts< / ngio-ex >
< / td >
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< td >
2017-03-11 10:36:40 -05:00
Compiles the application with the [JIT compiler ](glossary ) and
[bootstraps ](guide/appmodule )
2017-02-22 13:09:39 -05:00
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.
2017-03-11 10:36:40 -05:00
You'll learn about alternative compiling and [deployment ](guide/deployment ) options later in the documentation.
2017-02-22 13:09:39 -05:00
< / td >
< / tr >
< / table >
2017-03-27 11:08:53 -04:00
~~~ {.l-sub-section}
2017-02-22 13:09:39 -05:00
### Next Step
2017-03-11 10:36:40 -05:00
If you're new to Angular, we recommend staying on the [learning path ](guide/learning-angular ).
2017-03-27 11:08:53 -04:00
~~~
2017-02-22 13:09:39 -05:00
< br > < / br > < br > < / br >
{@a install-prerequisites}
2017-03-27 11:08:53 -04:00
## Appendix: !{_prereq}
Node.js and npm are essential to modern web development with Angular and other platforms.
Node powers client development and build tools.
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
< a href = "https://docs.npmjs.com/getting-started/installing-node" target = "_blank" title = "Installing Node.js and updating npm" >
Get them now< / a > if they're not already installed on your machine.
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
by running the commands `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
We recommend [nvm ](https://github.com/creationix/nvm ) for managing multiple versions of node and npm.
You may need [nvm ](https://github.com/creationix/nvm ) if you already have projects running on your machine that
use other versions of node and npm.