codepolyglot / react-firebase-boilerplate

create-react-app based firebase, react & redux pre-setup project

React Firebase Boilerplate

• Live Preview

About

We spend a large amount of time to setup a project; changing file structure, installing libraries, create reusable components and so on. The purpose of using the project is to minimize the redundant effort to setup a project from scratch. In the boilerplate, it contains only commonly-used libraries and the all setup done for you.

Require Package Version

• Node: v16.x
• Yarn: v1.22.x
• Npm: v8.1.x

Yarn preferable. The deploy automation using yarn.

How to use

Step-1. Setup Firebase App

1. Create firebase web app in firebase console
2. Enable Authentication and turn on "Email/Password" option
3. Enable Storage and update Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }

    match /users/{userId} {
      allow read, write : if request.auth.uid == userId;
		}
  }
}

4. Enable Hosting

Step-2. Install firebase tools

1. Global install firebase tools (skip if you done the step)

$  npm install -g firebase-tools

2. Login to your firebase account (skip if you done the step)

$ firebase login

Step-3. Setup the Boilerplate Project

1. Click "Use Template" to start or download the boilerplate from Download Zip button
2. Open the project in the editor
3. Go to firebase console again. Copy all API keys from (gear icon) -> Project Settings. Then paste in .env.development
4. Replace project name with yours in .firebaserc
5. Install packages with command: yarn install or npm install
6. Start project with command: yarn start or npm run start

Available Scripts

Build storybook

$ yarn storybook
- or -
$ npm run storybook

Run Unit Test

$ yarn test
- or -
$ npm run test

Run Lint

$ yarn lint
- or -
$ npm run lint

Format Code

$ yarn format
- or -
$ npm run format

Analyze Bundle Size

$ yarn analyze
- or -
$ npm run analyze

Run Local Build Test

$ yarn build && firebase serve
- or -
$ npm build && firebase serve

Deploy Live

$ yarn build && firebase deploy --only hosting
- or -
$ npm build && firebase deploy --only hosting

Libraries

Database/hosting/authentication

• firebase

Icons

• fontawesome

Style

• bootstrap
• css-module
• node-sass

UI Components

• reactstrap
• react-select
• react-spinners

Navigation

• react-router-dom

Store

• redux
• redux-logger

SEO

• react-helmet

Test

• jest
• storybook

Dev

• eslint
• prettier
• jest
• husky

CI and Auto Deployment

• GitHub Action for Firebase

Licence

This project is available under the MIT license. See the LICENSE file for more info.