Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maciejtreder/ng-toolkit

:star: Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more
https://github.com/maciejtreder/ng-toolkit

angular angular-schematics angular-universal aws aws-lambda boilerplate firebug-lite google-cloud google-cloud-functions offline push push-notifications pwa pwa-apps safari-push-notifications schematics server-side-rendering serverless serverless-framework webpush

Last synced: 25 days ago
JSON representation

:star: Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more

Awesome Lists containing this project

README 

        
# @ng-toolkit [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Check%20out%20ng-toolkit%20-%20collection%20of%20great%20tools%20for%20angular&url=https://github.com/maciejtreder/ng-toolkit&via=maciejtreder&hashtags=angular,pwa,webapp,software,developers)



This project has two faces:



- First, a Angular Universal PWA boilerplate, prepared for easy deployment on Serverless environment. The boilerplate contains all of the best practices and is continously evolving. [Find out more about the boilerplate here.](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/init)

- Second, a collection of `schematics` (used with the `ng add` command) which can be applied to existing Angular projects. All `schematics` comes from the boilerplate mentioned above. The main goal is to make those schematics **interchangeably** (developer can apply them in any order)!



## Wanna be a server-side Angular hero?

If you want to sharpen your skills in Angular Universal or you won't find what you're looking for in this project; check out the [Guide to Angular Universal](https://www.newline.co/courses/newline-guide-to-angular-universal) written by me for Newline.co!



## Content



- [What's inside](#quickOverview)

  - [Application starter/boilerplate](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/init)

  - [Angular Universal/server-side rendering](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/universal)

  - [Serverless support (Firebase, AWS Lambda, Google Cloud Functions)](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/serverless)

- [Planned features](#planned-features)

- [Question, Problem, Feature Request](#question)

- [Support @ng-toolkit](#funding)



##  What's inside



### **PWA starter**



```console

npm install -g @ng-toolkit/init

ng new --collection @ng-toolkit/init myApp [--provider --firebaseProject --gaTrackingCode --firebug]

```



- [Read more documentation](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/init/README.md)



### **PWA - @angular/pwa extension**



Add update mechanism and server-side rendering fixes to your PWA



```console

ng add @ng-toolkit/pwa [--serverModule]

```



- [Read more documentation](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/pwa/README.md)



### **Serverless (Firebase, AWS Lambda, Google Cloud Functions)**



Make your app deployable on serverless environment (FaaS)



```console

ng add @ng-toolkit/serverless [--provider --firebaseProject]

```



- [Read more documentation](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/serverless/README.md)

- [Read article about serverless with @ng-toolkit](https://medium.com/@maciejtreder/angular-serverless-a713e86ea07a)



### **Angular Universal**



Add server-side rendering and improve SEO of your app



```console

ng add @ng-toolkit/universal

```



- [Read more documentation](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/universal/README.md)

- [Read article about server-side rendering with @ng-toolkit](https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688)



### **Firebug-lite**



Add firebug-lite to your Angular app



```console

ng add @ng-toolkit/firebug

```



- [Read more documentation](https://github.com/maciejtreder/ng-toolkit/tree/master/schematics/firebug/README.md)



## Planned features



- [@ng-toolkit/googleAnalytics](https://github.com/maciejtreder/ng-toolkit/issues/225) - tracking user and JS exceptions in Google Analytics

- [@ng-toolkit/compodoc](https://github.com/maciejtreder/ng-toolkit/issues/275) - introduce [compodoc](https://github.com/compodoc/compodoc) - documentation tool for your angular app

- @ng-toolkit/safariPush - add pushes for Safari users



###  Looking for something more?



Feel free to [create issue with your feature request](https://github.com/maciejtreder/ng-toolkit/issues/new)



##  Support @ng-toolkit



You can support development of this project via:



- [Open Collective](https://opencollective.com/ng-toolkit)

- [Donorbox](https://donorbox.org/ng-toolkit)

- [Liberapay](https://liberapay.com/maciejtreder/donate)

- [Paypal](https://www.paypal.me/ngtoolkit)



If you want, you can be listed on the [List of donors](https://www.angular-universal-pwa.maciejtreder.com/donors) on the demo page.



### *Open Collective Backers*



Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ng-toolkit#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](https://opencollective.com/ng-toolkit#sponsor)]
























##  Credentials



- Checkout my [home page](https://www.maciejtreder.com) and find out more about me