workbox-webpack-react
workbox-webpack-react copied to clipboard
Offline first application. Minimal workbox, webpack and react implementation.
Workbox Webpack React Redux PWA
Minimal workbox, webpack, react implementation just to get started with offline first applications.
Try it here (it might take a while before the free server wakes up)
Uses:
- Workbox-Sw 2.1.2
- Express 4.16.2
- Webpack 3.10.0
- React 16.2.0
- React Router 4.2.2
- Redux 3.7.2
Installing the project
Run
yarn install
Make sure that /public/vendor/vendors.js
file is generated.
Development server
Development server is served by express framework. Webpack is injected to the app through webpack-dev-middleware and webpack-hot-middleware.
To start the server just run: yarn dev
Production server
Production server is also served by express framework.
Project files are generated into the /public
folder using yarn build
command.
Use yarn prod
command in order to start the app. This command will build static files and start express server.
Code Quality Tools
Other tips
-
This app works offline thanks to service workers. If you have any problems with production changes. Don't forget to kill old service workers. In
chrome development tools -> application -> Clear Storage -> Clear Site Data
. Users will see updates on everyn + 1
visit. -
This app is heroku ready. You have to set
heroku config:set NPM_CONFIG_PRODUCTION=false
on your heroku server. Everything else is prepared.Procfile
will runyarn prod
command. -
New npm dependencies should be added into the
vendors
array in/webpack/webpack.dll.babel.js
. Dll file with vendor libraries is generated after everyyarn install
. This makes webpack builds a lot faster.