Skip to content

CaliStyle/NgEngine-boilerplate

Repository files navigation

NgEngine Boilerplate

Build status

An Angular CLI, Angular Universal, Trails, and Proxy Engine Boiler Plate complete with NgPacks concept.

Do you need to use Angular 5+ with Server Side Rendering (SSR) and an advanced node.js framework? This is the boiler plate for you!

Looking for NgEngine?

Features

NgEngine and NgPacks

From our time spent working on Trails, we've really enjoyed some of the design patters, specifically Trailpacks. We're bringing that to Angular. With NgPacks you can register all of your modular components, reducers, actions, effects and more, even if they are lazy loaded without loosing performance. The other thing that we love about Trails is it's configuration concept. With NgEngine, you now have environment driven configuration for all your NgPacks.

Configuring your Application

Trails

For Trails documentation see the Trails Website. The only difference is that we are extending trails with Typescript and bundling it with webpack. You can configure Trails through src/apiConfig.

Angular

For Angular documentation see the Angular Website. You can configure your NgEngine Angular app through src/appConfig.

NgEngine

For NgEngine documentation and to learn how "packs" work, see the NgEngine Repo.

Running your Application

Trails server

run npm run build && node dist/server.js for the trails server to start. Navigate to http://localhost:3000/

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run npm start for a dev server that expects the API server at http://localhost:3000.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Quick Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Alternatively run npm run build. The build artifacts will be stored in the dist/ directory.

Production Build

Run npm run serve:prod:ngsw for a production build with Service Workers and PWA. To just build the service worker build, run npm run build:prod:ngsw and then start it with node dist/server

Run npm run build:prod for a production build. The build artifacts will be stored in the dist/ directory. To start the server run node dist/server.

Running CI tests

Run npm test to execute the unit test, end to end tests, and mocha spec test for node.js.

Running unit tests

Run ng test or npm run test:ng to execute the unit tests via Karma. To continuously run unit tests, run npm run test:ng:watch

Running end-to-end tests

Run ng e2e or npm run test:e2e to execute the end-to-end tests via Protractor.

Deploying to Heroku

First you will need to create a Heroku app. The package.json includes a "heroku-postbuild" script that will build the app. The Procfile includes the location to start the node server which will serve the app on Heroku.

Known Issues

The Trails REPL (trailpack-repl) includes some characters that production webpack builds (webpack -p) can not parse and fails during the uglify process. Currently, we use the normal webpack build which is faster but has a larger slug. If you can fix this, we would love a PR!

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.