A project boilerplate and reference example for
isomorphicuniversal reactiflux progressive web applications.
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.
Just Node 14+
Some development dependencies of this project have binary installs (image manipulators), so YMMV.
- Node
- Express
- React (Facebook)
- Fluxible (Yahoo)
- sw-toolbox, sw-precache (Google)
- babel, gulp, webpack, eslint, mocha/chai, sass
git clone https://github.com/localnerve/react-pwa-referencenpm install
npm run build:server && npm start
npm run dev
All npm run development commands:
| command | description |
|---|---|
build:list | dump the asset build task tree to console |
config:dev | dump the development config to console |
config:prod | dump the production config to console |
dev | lint, build assets, start the server, verbose, NODE_ENV=development, offline NOT supported |
dev:analyze | analyze webpack stats file and dump bundle size analysis to console |
dev:analyzer | analyze webpack stats file visually |
dev:ccss | build css assets, watch and recompile sass on change |
dev:debug | lint, build assets, start/debug server, NODE_ENV=development, wait debugger attach |
dev:inspect | like dev:debug, but use node --inspect, best w/Node 7+ |
dev:perf | lint, build assets, scripts w/source maps, start server, NODE_ENV=production, offline supported |
dev:prod | lint, build assets, start server, NODE_ENV=production, offline supported |
fixtures:dev | build test fixtures from data service, development |
fixtures:prod | build test fixtures from data service, production |
lint | run linter on entire project |
perfbudget | used by CI to test performance budget against service |
test | run the entire test suite |
test:cover | run the entire test suite, capture coverage, and report |
test:debug | build with source maps, start the test suite, wait debugger attach |
test:inspect | like test:debug, but use node --inspect, best w/Node 7+ |
test:func | used by CI to run functional tests against selenium grid |
test:contact | use to manually test the contact worker after nodemailer update |
- webpack.github.io/analyse/#modules still works on webpack stats files to visualize the module dependency graph.