Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthoffner/es-react-pwa
Minimalist boilerplate with react, snowpack and workbox
https://github.com/matthoffner/es-react-pwa
Last synced: about 1 month ago
JSON representation
Minimalist boilerplate with react, snowpack and workbox
- Host: GitHub
- URL: https://github.com/matthoffner/es-react-pwa
- Owner: matthoffner
- Created: 2020-01-11T23:25:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-26T22:11:12.000Z (over 1 year ago)
- Last Synced: 2024-08-04T01:11:24.189Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 486 KB
- Stars: 13
- Watchers: 3
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-snowpack - [Source - react-pwa.netlify.com/) (Examples)
README
# es-react-pwa
minimalist and modern react boilerplate designed for minimal configuration.
[demo](https://es-react-pwa.netlify.com/)
## usage
### Install and build
```js
npm install && npm run build && npm run pwa
```### Serve locally
```js
npm run serve
```## contents:
* [snowpack](https://snowpack.dev)
* [styled-components](https://styled-components.com)
* [es-module-shims](https://github.com/guybedford/es-module-shims)
* [kv-storage](https://github.com/WICG/kv-storage)
* [workbox](https://developers.google.com/web/tools/workbox)
* [htm](https://github.com/developit/htm)## concepts:
### import maps
included is es module shims, which includes polyfill support for `importmaps`. these allow direct global imports. this is key in not requiring babel.
### web modules (snowpack)
snowpack allows you to treeshake es module dependencies in a convinient way. there is a production command that will do the treeshaking, and a post npm install step which will localize the es modules.
```sh
npm run prepare
``````sh
npm run optimize
```### progressive web app (workbox)
workbox is configured to be run during build to generate the caching configuration.
intialization:
```sh
npm run pwa:init
```to generate caching with each build
```sh
npm run pwa
```