Giter VIP home page Giter VIP logo

johnasbroda / angular-universal-pwa Goto Github PK

View Code? Open in Web Editor NEW

This project forked from maciejtreder/ng-toolkit

0.0 0.0 0.0 4.72 MB

:star: Angular Universal PWA boilerplate/starter schematics for Angular CLI; with serverless environment support.

Home Page: https://www.angular-universal-pwa.maciejtreder.com

License: MIT License

JavaScript 5.05% TypeScript 75.91% HTML 14.54% CSS 4.01% Shell 0.49%

angular-universal-pwa's Introduction

Maintainability Test Coverage Build Status Dependency Status Backers on Open Collective Sponsors on Open Collective npm version

Angular 5/6 Universal Progressive Web App - starter Tweet

angular-universal-PWA report

Star it and share with others!

This repo is the 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?

  • 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:
  • 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 5.x & 6.x
  • Angular CLI 1.x & 6.x
  • Webpack
  • Serverless framework

Get Started

Whatch on Youtube: How to start project with angular-universal-pwa

Using Angular CLI schematics

npm install -g angular-universal-pwa

Create project:

ng new --collection angular-universal-pwa myApp
cd myApp
npm start

CLI params

  • --provider - What serverless provider you want to use? (aws | gcloud | both) - default both
  • --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/angular-universal-pwa.git
cd angular-universal-pwa/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 Node.JS

npm run build:prod
npm run server

Serverless environments

AWS Lambda

ng new --collection angular-universal-pwa myApp --provider aws
npm run build:deploy

Google Cloud Functions

ng new --collection angular-universal-pwa myApp--provider gcloud 
npm run build:deploy

To do

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

Funding

You can support development of this project via Open Collective, Donorbox, Liberapay,

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

angular-universal-pwa's People

Contributors

maciejtreder avatar monkeywithacupcake avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.