Modern React 16 PWA (Workbox and Firebase) setup with Webpack 4, axios, React Router 4 and Redux Saga. Additionally installed react-helmet, react-ga, material-ui with typeface-roboto fonts and icons. More information on the setup project and wiki. For the http requests basics project and wiki. For routing basics project and wiki. For redux basics project and wiki
You can also check this project's wiki. This project is a an upgrade of my react-pwa repository with wiki.
cd path-to-your-project
yarn
- Feel free to use npm if you don't like using yarn.
npm i -g ntl
- By running ntl you can choose which script to run. For example start, build, build:prod and watch will be some of the choices. All of these scripts are in the
package.jsonfile in the scripts object. - Command to start ntl and choose an option
ntl
- Firebase should be set up
npm i -g firebase-tools
- This command will install the firebase cli tools. After this make sure you are inside the project directory (print working directory
pwd).
firebase login
-
You will be asked to access a link in order to authenticate with your google account.
-
Before initializing the project you should create a firebase project and database (with public access).
firebase init
- Initialization options choices example. In this repository we already have the functions folder so choose not to overwrite existing files when asked to.
Do you want to use ESLint to catch probable bugs and enforce style? No
File functions/package.json already exists. Overwrite? No
Skipping write of functions/package.json
File functions/index.js already exists. Overwrite? No
Skipping write of functions/index.js
-
I am declining the use of ESLint inside functions because I use Prettier with StandardJS updated ESLint rules (eslintrc config file), read more here.
-
Once the initialization is done you will need to set up the constants in the .env files and in functions/index.js.
-
In order to generate vapid keys, inside
cd functions, usenpm run web-push generate-vapid-keys. Copy the keys and paste them inside the previously mentioned files. Remember not to place the private key on the client side, only server side code should know about it. One last thing to download and add to the functions folder is the service account key, make sure when you download it from your firebase Project Overview -> Settings -> Service Accounts screen to rename it into serviceAccountKey and make sure it's .json file type. -
When the functions/index.js file is properly set up you can
cd ..(go to the project directory) and runfirebase deploy --only functions. If everything goes well you will get a link that ends with .cloudfunctions.net/storeData copy that link and update the .env files and sw.js file (at the bottom, registerRoute function first argument). -
Now you should be able to run the dev-server, build the application and deploy it on firebase.
If you don't want to use ntl you can use the npm run command with the chosen script, examples:
- For development bundle
yarn build
- For production ready bundle
yarn build:prod
- For development server
yarn start
- For Webpack watch
yarn watch
- For testing with jest
yarn test
MIT