@bonsaiilabs/create-pwa-app

A React Starter to develop Progressive Web Applications (PWA) and deploy to Google Play Store

Usage no npm install needed!

<script type="module">
  import bonsaiilabsCreatePwaApp from 'https://cdn.skypack.dev/@bonsaiilabs/create-pwa-app';
</script>

README

Pre-requisites

  • Requires npm version >= 7.20.0. Install the latest npm using command npm install -g npm@latest.
  • Requires yarn.

What it contains

  • ReactJS support with TypeScript
  • Testing support using Jest and React Testing Library
  • Formatting support using Prettier
  • ESLint support
  • Ability to collect code coverage via Jest
  • Support for Storybook

Commands

  • yarn install to install dependencies.
  • yarn start to develop locally.
  • yarn test to test and see the code coverage.
  • yarn build to create a production build.
  • yarn build-for-pwa to create a production build and generate assetlinks.json for PWA.
  • yarn start:prod to serve production build on port 5000.
  • yarn create:start:prod to create and start a production build.
  • yarn storybook to start storybook in development mode.
  • yarn build-storybook to create production build for storybook.
  • npx -y serve storybook-static -l 5858 to serve production build for storybook on port 5858.

A note about routing

Since this is a React Single Page Application (SPA), you may find that if you refresh the page for a URL other than / in production build that you get 404 message. This is because when you refresh the page at a deeper URL, your client-side router (react-router) in this project has not got chance to load and handle routing. Therefore, since your do not have a server (in this project), you get 404 back.

A nice explanation is available on this stackoverflow answer

There are 2 places we need to resolve this problem - at production build hosted locally, and production build hosted on provider.

Production build hosted locally

This project uses serve which has a flag called -s (Github). This flag re-writes all non-found requests to index.html. This loads javascript code at /, which kicks off the client-side router, hence making URL refreshes work.

Production build hosted on Vercel (provider)

This project is hosted on Vercel, so we needed to write a configuration called vercel.json, which is available here.

If you are using Firebase Hosting, refer to their documentation on how to configure re-writes.

For other provides, I encourage folks to update this documentation by opening up a PR. If you do, please provide the reference to the official documentation.

Powered by Vercel