https://github.com/aprilmintacpineda/pwa-reactjs-webpack-boilerplate
Boiler for a PWA using react-js, material-ui and webpack with support for s3 static hosting upload.
https://github.com/aprilmintacpineda/pwa-reactjs-webpack-boilerplate
boilerplate progressive-web-app pwa react-js s3-static-hosting webpack
Last synced: 9 months ago
JSON representation
Boiler for a PWA using react-js, material-ui and webpack with support for s3 static hosting upload.
- Host: GitHub
- URL: https://github.com/aprilmintacpineda/pwa-reactjs-webpack-boilerplate
- Owner: aprilmintacpineda
- License: mit
- Created: 2020-05-04T04:22:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-11T10:05:09.000Z (about 6 years ago)
- Last Synced: 2025-04-09T20:48:25.907Z (about 1 year ago)
- Topics: boilerplate, progressive-web-app, pwa, react-js, s3-static-hosting, webpack
- Language: JavaScript
- Homepage:
- Size: 1.36 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `` -- `mv pwa-reactjs-webpack-boilerplate `
- `cd `
- 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](https://www.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](https://app-manifest.firebaseapp.com/). 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](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps#Core_PWA_guides)
- [react-js](https://reactjs.org/)
- [material-ui](http://material-ui.com/)
- [webpack](https://webpack.js.org/)
- [NodeJS](https://nodejs.org/)
- [npm-check](https://github.com/dylang/npm-check)
- [react-fluxible](https://github.com/aprilmintacpineda/react-fluxible)
- [fluxible-js](https://github.com/aprilmintacpineda/fluxible-js)
- [eslint](https://eslint.org/)
- [prettier](https://prettier.io/)
- [husky](https://github.com/typicode/husky)
- [lint-staged](https://github.com/okonet/lint-staged)
# Credits
- The default logo used in this template was made by [Freepik](https://www.flaticon.com/authors/freepik) from [flaticon.com](https://www.flaticon.com/).