@ng-toolkit/init

			Stars	Issues	Version	Updated	Created	Size
	@ng-toolkit/init		1,124	209	8.0.3	4 years ago	6 years ago

Angular Universal PWA starter/boilerplate (CLI schematics)

Star it and share with others!

This is part of the @ng-toolkit project. Check main page for more
This is boilerplate for (PWA) progressive web app with Angular Universal (serverside rendering). It is prepared to be easily deployed on serverless environment (Google Cloud Functions & AWS Lambda supported).
Live demo
Angular Universal PWA on AWS Lambda + API Gateway

Content

- What's inside - Getting started - Deployment - To do - Question, Problem, Feature Request - Support @ng-toolkit/init

What's inside

PWA - content is cached and available offline, it can be also installed as native app on Android devices and Google Chrome
AMP - Accelerated Mobile Pages - super fast initial load (down to ~650ms)
Push notifications:

* Vapid webpush (Chrome and Firefox) - Using [aws-sns-webpush](https://github.com/maciejtreder/aws-sns-webpush) as back-end
* Safari push - Using [aws-sns-webpush](https://github.com/maciejtreder/aws-sns-webpush) as back-end

Server-side rendering with Angular Universal
TransferState
Lazy loading modules
External modules (You can split your application into multiple projects and lazy-load them, read more here) TBD after CLI merge - #150
Angular Material
Unit tests
Firebug Lite (great solution for development on touch-screen devices, ie: tablets)

Used frameworks/technologies

Angular 6.x
Webpack
Serverless framework

Getting Started

Whatch on Youtube:

Using Angular CLI schematics

npm install -g @ng-toolkit/init

Create project:

ng new --collection @ng-toolkit/init myApp
cd myApp
npm start

CLI params

--provider - What serverless provider you want to use? (aws | gcloud | firebase) - default aws
--firebaseProject - projectID, used when you choose firebase in above param
--gaTrackingCode - Provide your Google Analytics tracking code, to enable GA (ie --gaTrackingCode UA-123456)
--firebug - Decide if you want to download firebug-lite (true | false) - default false

Cloning the repo

git clone https://github.com/maciejtreder/ng-toolkit.git
cd ng-toolkit/application
npm install
npm start

Running modes

Development mode (autoreload only): ``npm start`
Development mode (autoreload + unit tests): `npm run build:dev`
Development mode (autoreload + firebug lite): `npm run build:firebug`
Development mode (autoreload + firebug lite + unit tests): `npm run build:dev:firebug`
Unit tests: `npm run test``

Deployment

Production mode with NodeJS

npm run build:prod
npm run server

Serverless environments

Maintenance link (not customized)

npm run build:serverless:deploy

Custom link

npm run build:prod:deploy

Check out Serverless library documentation Read more about link customization in AWS API Gateway & Lambda

To do

prerender app for 'no-backend' hosting
microservices support - make replacement eligible external module without recompiling whole app
ng-http-sw-proxy (all requests done offline, are synced when app comes back online) - not working since Angular 5.x (more info can be found in this issue)
e2e tests

Won't implement:

load static content from S3 (JavaScript, styles, images):

* when serving all static content from S3 load speed up is not really visible (increase is around ~0,2 sec),
* problems with CORS on Chrome,
* problems with compression of some files (.js files are not compressed in some cases)
* needs a lot of manual setup (cloudfront setup etc.)