Angular 2 Starter Kit
What we’ve got here
- Server Side rendering for instant page loading
- Entire Angular2 application is running in a Web Worker (UI always will be smooth)
- Preboot to catch browser events before Angular2 is ready to work.
- Webpack and its Code Splitting feature which allows us to lazy load parts of an application if needed.
- Live Reloading, a browser will be reloaded on any change in server or browser code. It works well for both a main thread and web workers.
- Typescript withTypings
- Linting with TSLint
- Express – de facto standard for Node.js web apps.
- PM2 – most advanced Node.js process manager
- Unit testing with Karma
- End-to-End testing with Protractor
- Docker for easy deployments.
# install dependencies npm install # build and run the production server npm start
Go to http://localhost:3000 in your browser.
You may want to stop or restart the production server:
# stop the production server npm stop # restart the production server npm restart
# build the production project npm run build
# run the server with pm2 npm run serve
Development with Live Reloading
# make sure that the production server is not running npm stop # run the development server with live reloading support npm run dev
The development server will watch for any changes, make rebuilds and reload a browser. All built code will be kept in memory, so
dist folder will not be generated ( all means code for both client and server sides).
Turning server side rendering and web workers on/off
You can optionally turn server side rendering or web workers support on/off. You just need to change
// ... // Server side rendering. Set it to `false` to turn it of. exports.HAS_SS = 'NG2_SS' in process.env ? process.env.NG2_SS === 'true' : true; // For example: // exports.HAS_SS = false; // Web workers support. Set it to `false` to turn it of. exports.HAS_WW = 'NG2_WW' in process.env ? process.env.NG2_WW === 'true' : true; // For example: // exports.HAS_WW = 'NG2_WW' in process.env ? process.env.NG2_WW === 'true' : false; // exports.HAS_WW = false; //...
Then you need to restart the server to apply the changes:
# for production server npm restart # for development server - stop its process and run it again npm run dev
# check the project (source files) npm run lint # check the project and start watching for its changes npm run lint:watch
The next command will run both unit and end-to-end tests.
For end-to-end tests you need to start Selenium Server and application server first (seeEnd-to-End Testing).
# run all tests (single run) npm test
# run unit tests (single run) npm run unit # run unit tests and start watch for changes npm run unit:watch # run unit tests for specified directory (path must be relative to root directory) # currently you can specify paths only for "src" directory npm run unit src/app # run unit tests for specified file and start watch for changes npm run unit:watch src/app/app.spec.ts
For end-to-end tests you need to start Selenium Server (webdriver) and application server first.
# build and start application server npm run build && npm run serve # start Selenium Server (webdriver) npm run webdriver:start # run end-to-end test (single run) npm run e2e
# remove "dist" and "logs" folders npm run clean # remove "dist" folder npm run clean:dist # remove "logs" folder npm run clean:logs
转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Angular2 starter kit – production ready universal web app boilerplate