pwa-reactjs-webpack-boilerplate

A boilerplate for your Progressive Web App (PWA) with react-js, material-ui, fluxible-js, and react-fluxible using webpack with S3 Static Hosting built-in support. Also has built-in code formatting using eslint, prettier. Codes will be formatted on commit using husky and lint-staged.

Getting started

Install

• git clone git@github.com:aprilmintacpineda/pwa-reactjs-webpack-boilerplate.git
• Rename folder to <your_project> -- mv pwa-reactjs-webpack-boilerplate <your_project>
• cd <your_project>
• Delete the .git directory because you won't need it -- rm -rf .git
• Change name, description, author, and license on package.json.
• npm i -- Optionally you can use npm-check and do npm-check -u to update and install the dependencies.

favicons

You can use favicon-generator.org to generate the images you'll need for the favicon. Replace the assets/images/favicon.icon with the generated one and replace the matching file names on /assets/images/icons.

Manifest icons

For the manifest icons and the manifest.json, you can use Manifest generator. After downloading the zip file, replace all images in /assets/images/manifest-icons with the images from images/icons included in the zip file.

Edit the manifest.json file and change the name, short_name, etc., but you don't need to change the icons

Development

All JS files are in src folder, start by going to src/entry.js which is the main entry point for webpack. To start development run npm run start:dev which will start up a dev-server and open up a window for you. Then you can make changes to the files in src, the opened window will automatically refresh when changes were made.

You can also run npm run start:staging which will do the same but will use staging as the NODE_ENV.

Production

To build for production just do npm run build. It will generate a production build of your app in build directory, this directory is ready to be deployed to production.

You can also build for dev or staging environments by running npm run build:dev or npm run build:staging respectively.

Uploading to S3

The boilerplate supports uploading the build to an S3 bucket.

1. Create S3 bucket and enable static file hosting.
2. Rename configs/uploadToS3.example.js to configs/uploadToS3.js -- mv configs/uploadToS3.example.js configs/uploadToS3.js.
3. Create an IAM user with programmatic access to be used for the uploader, and get the access key id and secret access key and put those in the configs/uploadToS3.js files.
4. Run one of the following commands: npm run deploy:dev to deploy to dev env, npm run deploy:staging to deploy to staging env, npm run deploy to deploy to production env.

Parameters

• --env=dev is the target env to deploy to as defined in the config.

Notes:

• Your old files will be deleted after successful uploads, this is to ensure that the bucket is clean because the build is using hash generated by webpack as filenames. Files that has similar names (not using hash) WILL NOT BE DELETED.
• All files other than images will be compressed using gzip before upload, this will allow S3 hosting to serve these files as gzip to minimize the file size being transfered.

Environment variables

You can put your environment variables in .env file, all environment variables in that file must be prefixed with APP_ (case-sensitive), i.e., TITLE=app title becomes APP_TITLE=app title but you access them as process.env.TITLE in your application (without prefix).

Issues

Feel free to open an issue anytime.

References

• PWA
• react-js
• material-ui
• webpack
• NodeJS
• npm-check
• react-fluxible
• fluxible-js
• eslint
• prettier
• husky
• lint-staged

Credits

• The default logo used in this template was made by Freepik from flaticon.com.