Quick start
Make sure you have Node version >= 5.0 and NPM >= 3
Clone/Download the repo then edit
app.component.ts
inside/src/app/app.component.ts
install the repo with npm
npm install
start the server
npm start
use Hot Module Replacement
npm run server:dev:hmr
File Structure
We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
easy-testing/
├──config/ * our configuration
| ├──helpers.js * helper functions for our configuration files
| ├──spec-bundle.js * ignore this magic that sets up our angular 2 testing environment
| ├──karma.conf.js * karma config for our unit tests
| ├──protractor.conf.js * protractor config for our end-to-end tests
│ ├──webpack.dev.js * our development webpack config
│ ├──webpack.prod.js * our production webpack config
│ └──webpack.test.js * our testing webpack config
│
├──src/ * our source files that will be compiled to javascript
| ├──main.browser.ts * our entry file for our browser environment
│ │
| ├──index.html * Index.html: where we generate our index page
│ │
│ │
│ ├──app/ * WebApp: folder
│ │ ├──app.component.spec.ts * a simple test of components in app.component.ts
│ │ ├──app.e2e.ts * a simple end-to-end test for /
│ │ └──app.component.ts * a simple version of our App component components
│ │
│ └──assets/ * static assets are served here
│ ├──service-worker.js * ignore this. Web App service worker that's not complete yet
│
│
├──tslint.json * typescript lint config
├──typedoc.json * typescript documentation generator
├──tsconfig.json * typescript config used outside webpack
├──tsconfig.webpack.json * config that webpack uses for typescript
├──package.json * what npm uses to manage it's dependencies
└──webpack.config.js * webpack main configuration file
Getting Started
Dependencies
What you need to run this app:
node
andnpm
(brew install node
)- Ensure you're running the latest versions Node
v4.x.x
+ (orv5.x.x
) and NPM3.x.x
+
If you have
nvm
installed, which is highly recommended (brew install nvm
) you can do anvm install --lts && nvm use
in$
to run with the latest Node LTS. You can also have thiszsh
done for you automatically
Once you have those, you should install these globals with npm install --global
:
webpack
(npm install --global webpack
)webpack-dev-server
(npm install --global webpack-dev-server
)karma
(npm install --global karma-cli
)protractor
(npm install --global protractor
)typescript
(npm install --global typescript
)
Running the app
After you have installed all dependencies you can now run the app. Run npm run server
to start a local server using webpack-dev-server
which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://0.0.0.0:3000
(or if you prefer IPv6, if you're using express
server, then it's http://[::1]:3000/
).
server
# development npm run server# production npm run build:prodnpm run server:prod
Other commands
build files
# development npm run build:dev# production (jit) npm run build:prod# AoT npm run build:aot
hot module replacement
npm run server:dev:hmr
watch and build files
npm run watch
run unit tests
npm run test
watch and run our tests
npm run watch:test
run end-to-end tests
# update Webdriver (optional, done automatically by postinstall script) npm run webdriver:update# this will start a test server and launch Protractor npm run e2e
continuous integration (run unit tests and e2e tests together)
# this will test both your JIT and AoT builds npm run ci
run Protractor's elementExplorer (for end-to-end)
npm run e2e:live
build Docker
npm run build:docker