A project boilerplate and reference example of a universal, reactiflux, progressive web application
JavaScript CSS HTML
Clone or download
localnerve Merge pull request #911 from localnerve/greenkeeper/compression-1.7.3
Update compression to the latest version 🚀
Latest commit 3239ad3 Jul 16, 2018

README.md

react-pwa-reference

Greenkeeper badge

Build Status Codacy Badge Coverage Status Known Vulnerabilities Maintenance Dependency Status devDependency Status

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