@ng-toolkit/init
v8.0.3
Published
Angular Universal PWA boilerplate for serverless environment.
Downloads
7
Maintainers
Readme
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 as back-end
- Safari push - Using 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
) - defaultaws
--firebaseProject
- projectID, used when you choosefirebase
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
) - defaultfalse
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.)
Looking for something more?
Feel free to create issue with your feature request
Support @ng-toolkit/init
You can support development of this project via
If you want, you can be listed on the List of donors on the demo page.
Open Collective Backers
Thank you to all our backers! 🙏 [Become a backer]
Open Collective Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Credentials
- Checkout my home page and find out more about me