神刀安全网

Angular2 starter kit – production ready universal web app boilerplate

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.

Requirements

  • node >= 5.0.0
  • npm >= 3.0.0

Quick start

# 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

Building

# build the production project npm run build

Running Server

# 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 HAS_SS and HAS_WW in constants.js

// ...  // 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

Linting

# check the project (source files) npm run lint  # check the project and start watching for its changes npm run lint:watch

Testing

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

Unit Testing

# 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

End-to-End Testing

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

Cleaning

# 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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮