GhettoGeek / react-pwa-reference

A project boilerplate and reference example of a universal, reactiflux, progressive web application

react-pwa-reference

A project boilerplate and reference example for isomorphic universal reactiflux progressive web applications.

Summary

This project is an evolution of flux-react-example and flux-react-example-sw that adds evolved tooling and organization. It's a rather complete, performance minded reference PWA that uses data-driven routes and content from an attached service. The data service driving the app is this Github repo.

Environment Prerequisites

Just Node 8.
Some development dependencies of this project have binary installs (node-sass, image manipulators), so YMMV.

Stack

• Node
• Express
• React (Facebook)
• Fluxible (Yahoo)
• sw-toolbox, sw-precache (Google)
• babel6, gulp4, webpack, eslint, mocha/chai, sass

Setup

1. git clone https://github.com/localnerve/react-pwa-reference
2. npm install

Run

Run Production

npm run build:server && npm start

Run Development

npm run dev

Development Tasks

command	description
npm run build:list	dump the asset build task tree to console
npm run config:dev	dump the development config to console
npm run config:prod	dump the production config to console
npm run dev	lint, build assets, start the server, verbose, NODE_ENV=development, offline NOT supported
npm run dev:analyze	analyze webpack stats file and dump bundle size analysis to console
npm run dev:ccss	build css assets, watch and recompile sass on change
npm run dev:debug	lint, build assets, start/debug server, NODE_ENV=development, wait debugger attach
npm run dev:inspect	like dev:debug, but use node --inspect, best w/Node 7+
npm run dev:perf	lint, build assets, scripts w/source maps, start server, NODE_ENV=production, offline supported
npm run dev:prod	lint, build assets, start server, NODE_ENV=production, offline supported
npm run fixtures:dev	build test fixtures from data service, development
npm run fixtures:prod	build test fixtures from data service, production
npm run lint	run linter on entire project
npm run perfbudget	used by CI to test performance budget against service
npm run test	run the entire test suite
npm run test:cover	run the entire test suite, capture coverage, and report
npm run test:debug	build with source maps, start the test suite, wait debugger attach
npm run test:inspect	like test:debug, but use node --inspect, best w/Node 7+
npm run test:func	used by CI to run functional tests against selenium grid