Based on Jad Joubran's repo pwa-series videos (https://github.com/jadjoubran/pwa-series).
The basic idea behind this repo is, that any feature to the repository and the resulting PWA can be studied by looking at the specific commit(s). Thus providing a running course in setting up your PWA and the automation from the committed code.
Prerequisites:
- Git code versioning system installed
- Node.js and NPM installed
- A text/code editor
- A browser to test your work in
- Clone this repo.
- Run
npm install. - Start a local server with
npx serveor usenpm run devfor hot reload. - Customize the source files in folder "src".
- Add your own splash icons by providing an image on https://realfavicongenerator.net.
A demo site of the latest version of this project is hosted on both Netlify at https://pwa-boilerplates.netlify.app/ and GitHub Pages at https://rroodselaar.github.io/PWA-boilerplate/.
The folks at Netlify supply various ways to automatically deploy using Git Integration and a neat CLI global tool.
This repo now employs a scripted push of the build-artifacts to a specific branch used to publish to GitHub Pages from. Automated with Git Hooks. Read more on this in:
- Using Git Worktree to Deploy GitHub Pages: https://sangsoonam.github.io/2019/02/08/using-git-worktree-to-deploy-github-pages.html
- Including Hooks in a Git Repository: https://www.darrenlester.com/blog/including-hooks-in-a-git-repository
To use the Git Hook-strategy with this repo, simply
- apply execution rights to the Git hook file
chmod +x .githooks/<hook filename>and - run
git config core.hooksPath .githooksfrom the console in the root of your local copy.
The Lighthouse Badge above is generated using Emanuele Mazzotta's Lighthouse Badges repo: https://github.com/emazzotta/lighthouse-badges.
These badges are automatically generated when committing into the master branch of this repository. This is done using the above mentioned Git Hook modification in conjunction with the Netlify CLI to run in a temporary deployment of the application on Netlify to enjoy all the benefits of TLS and other prerequisites for successful hosting of a PWA.
- install Lighthouse Badges from NPM
npm i -g lighthouse-badges - install the global tool
npm install netlify-cli -g - run
netlify deploy --openonce to link it to your account and see its behavior - install JSON toolkit globally to parse output
npm install -g json-cli-toolkit