You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://gitter.im/preboot/angular2-webpack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
**Note: This guide is following the Angular's [Style Guide](http://angular.io/styleguide) so I will be changing conventions here and there eventually. You are free to use your own conventions with this starter.**
7
-
**Note 2: There is no conventions yet for RC5 on the style guide so there will be a future update here for that.**
5
+
## Running the app
8
6
9
-
A complete, yet simple, starter for Angular 2 using Webpack.
10
-
11
-
This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.
12
-
* Best practices in file and application organization for [Angular 2](https://angular.io/).
13
-
* Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/).
14
-
* Testing Angular 2 code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/).
15
-
* Coverage with [Istanbul](https://github.com/gotwarlost/istanbul)
16
-
* End-to-end Angular 2 code using [Protractor](https://angular.github.io/protractor/).
17
-
* Stylesheets with [SASS](http://sass-lang.com/) (not required, it supports regular css too).
18
-
* Error reported with [TSLint](http://palantir.github.io/tslint/) and [Codelyzer](https://github.com/mgechev/codelyzer).
19
-
* Documentation with [TypeDoc](http://typedoc.io/).
20
-
21
-
>Warning: Make sure you're using the latest version of Node.js and NPM
go to [http://localhost:8080](http://localhost:8080) in your browser.
43
-
44
-
# Table of Contents
45
-
46
-
*[Getting Started](#getting-started)
47
-
*[Dependencies](#dependencies)
48
-
*[Installing](#installing)
49
-
*[Developing](#developing)
50
-
*[Testing](#testing)
51
-
*[Production](#production)
52
-
*[Documentation](#documentation)
53
-
*[Frequently asked questions](#faq)
54
-
*[TypeScript](#typescript)
55
-
*[License](#license)
56
-
57
-
# Getting Started
58
-
59
-
## Dependencies
60
13
61
-
What you need to run this app:
62
-
*`node` and `npm` (Use [NVM](https://github.com/creationix/nvm))
63
-
* Ensure you're running Node (`v5.x.x`+) and NPM (`3.x.x`+)
14
+
Install all dependencies with:
64
15
65
-
## Installing
66
-
67
-
*`fork` this repo
68
-
*`clone` your fork
69
-
*`npm install` to install all dependencies
70
-
71
-
## Developing
72
-
73
-
After you have installed all dependencies you can now start developing with:
74
-
75
-
*`npm start`
16
+
```bash
17
+
npm i
18
+
```
76
19
77
-
It will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The application can be checked at `http://localhost:8080`.
20
+
Now you'll need a backend API. I recommend [json-server](https://github.com/typicode/json-server) along with [todos-list](https://github.com/shansm/todos-list).
78
21
79
-
As an alternative, you can work using Hot Module Replacement (HMR):
22
+
Once the backend is up and running you can now run this app with:
80
23
81
-
*`npm run start:hmr`
24
+
```bash
25
+
npm start
26
+
```
82
27
83
-
And you are all set! You can now modify your components on the fly without having to reload the entire page.
28
+
It will start a local server using `webpack-dev-server` and then head over to `http://localhost:8080`.
84
29
85
30
## Testing
86
31
@@ -91,66 +36,6 @@ And you are all set! You can now modify your components on the fly without havin
91
36
92
37
#### 2. End-to-End Tests (aka. e2e, integration)
93
38
94
-
* single run:
95
-
* in a tab, *if not already running!*: `npm start`
96
-
* in a new tab: `npm run webdriver-start`
97
-
* in another new tab: `npm run e2e`
98
-
* interactive mode:
99
-
* instead of the last command above, you can run: `npm run e2e-live`
100
-
* when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
101
-
* you can learn more about [Protractor Interactive Mode here](https://github.com/angular/protractor/blob/master/docs/debugging.md#testing-out-protractor-interactively)
102
-
103
-
## Production
104
-
105
-
To build your application, run:
106
-
107
-
*`npm run build`
108
-
109
-
You can now go to `/dist` and deploy that to your server!
110
-
111
-
## Documentation
112
-
113
-
You can generate api docs (using [TypeDoc](http://typedoc.io/)) for your code with the following:
114
-
115
-
*`npm run docs`
116
-
117
-
# FAQ
118
-
119
-
#### Do I need to add script / link tags into index.html ?
120
-
121
-
No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.
122
-
123
-
#### How to include external angular 2 libraries ?
124
-
125
-
It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/preboot/angular2-webpack/blob/master/src/main.ts) of your application.
126
-
127
-
#### How to include external css files such as bootstrap.css ?
128
-
129
-
Just install the lib and import the css files in [vendor.ts](https://github.com/preboot/angular2-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap:
130
-
131
-
```sh
132
-
npm install bootstrap@next --save
133
-
```
134
-
135
-
And in [vendor.ts](https://github.com/preboot/angular2-webpack/blob/master/src/vendor.ts) add the following:
136
-
137
-
```ts
138
-
import'bootstrap/dist/css/bootstrap.css';
139
-
```
140
-
141
-
# TypeScript
142
-
143
-
> To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.
144
-
145
-
## Use a TypeScript-aware editor
146
-
147
-
We have good experience using these editors:
148
-
149
-
*[Visual Studio Code](https://code.visualstudio.com/)
0 commit comments