npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-universal-pwa

v2.1.1

Published

Angular Universal PWA boilerplate for serverless environment.

Downloads

56

Readme

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

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

##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

Support this project with a monthly donation and help us continue our activities. [Become a backer]

Open Collective Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

Credentials