react-firebase-workflow-setup.txt

React Firebase Check List (Revision 1.0):
 
Dependencies:
i) Node and NPM
ii) firebase-tools
iii) VSCode

This checklist is suitable for you if:
i) You use Windows operating system.
ii) You use ReactJS as your development library and Firebase as your BaaS.
iii) You want to automate some aspects of your application scaffolding.
iv) You want a checklist of the things you need to do when starting a project and/or to keep you from forgetting and being disorganized while you do it.

* Curly braces denote placeholders which can be replaced with your values without the braces.

1. Create and start a React project with `npx create-react-app {app-name} && cd {app-name} && start && start . && code . && yarn start`.

2. Create a Firebase development and production projects with `firebase projects:create {project-name}-dev && firebase projects:create {project-name}-prod`.

3. Link Google Analytics in production version of your Firebase project and change currency local from User settings > Integrations.

4. Add the Firebase products that you will be using in your app from the Firebase console (e.g Authentication, RealTime Database, Firestore, etc).

5. In your project folder, on the command prompt, run `firebase login` or `firebase login --reauth` if necessary to login to Firebase, then `firebase init` in your React project folder and select the Firebase features that correspond to the products you added from the last step. Accept defaults and follow any further instructions.

6. In your React project folder, run from the command prompt; `firebase use --add`, select your development project from the list and give it the alias "default". Run the command again and select your production project and give it an alias of "prod". Inspect your .firebaserc file which is in the top level of your React project folder and you should see something similar to:
        {
		"projects": {
			"default": "{project-name}-dev",
			"prod: "{project-name}-prod"
		}
	}

7. To make switching between development and production versions more convenient, add the following properties "changeToProd" and "changeToDev" under the "scripts" section in your React project's package.json (Not your Firebase's package.json file): 
        {
		...
		"scripts": {
			...
			"changeToProd": "firebase use prod",
			"changeToDev": "firebase use default"
		},
		...
	}

Now you run `npm run changeToProd` or `yarn run changeToProd` and vice versa to switch between production and development versions of your Firebase project. Since you will be working initially on the development version of you project, ensure to switch to the dev version.

8. Run `firebase apps:create web {app-app}`

9. Run `yarn run changeToDev && firebase apps:sdkconfig > ./src/firebase-dev.js && yarn run changeToProd && firebase apps:sdkconfig > ./src/firebase-prod.js`

10. Create 2 environment files: .env.development.local and .env.production.local to hold environment variables for your dev and prod environments respectively.: 

Then populate them each respectively, with values from the firebase-dev.js and firebase-prod.js files:
e them both with: 
        REACT_APP_FIREBASE_PROJECT_ID={Your-Firebase-Project-ID}
	REACT_APP_FIREBASE_APP_ID={Your-Firebase-App-ID}
        REACT_APP_DATABASE_URL={Your-Firebase-Database-URL}
	REACT_APP_FIREBASE_STORAGE_BUCKET={Your-Firebase-Storage-Bucket}
        REACT_APP_LOCATION_ID={Your-Firebase-Location-ID}
        REACT_APP_FIREBASE_API_KEY={Your-Firebase-API-Key}
        REACT_APP_FIREBASE_AUTH_DOMAIN={Your-Firebase-Auth-Domain}
        REACT_APP_FIREBASE_MESSENGER_SENDER_ID={Your-Firebase-Messenger-Sender-ID}

Depending on the products you turn on in the Firebase console, you may need to include some or all of the lines above in your .env.development.local and .env.production.local files.

Because you turned on Analytics for the production version of your project, your .env.production.file will contain one additional line:
	REACT_APP_FIREBASE_MEASUREMENT_ID={Your-Firebase-Measurement-ID}

11. In the command prompt, run `firebase init emulators`, select the development version of your Firebase project and select the features you want to enable in your emulator. Accept defaults and follow any further instructions.


12. Create a config.js file in a folder called "firebase" within your React projects "src" folder, that is ./src/firebase/config.js and include the following code:
 
        import firebase from "firebase/app";

        import "firebase/auth";
        import "firebase/firestore";
        import "firebase/storage";
        import "firebase/functions";

        // If in production mode:
        if (process.env.NODE_ENV !== "production") {
          import("firebase/analytics").then(() => {
            firebase.analytics();
          });
        }

        const firebaseConfig = {
          projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
          appId: process.env.REACT_APP_FIREBASE_APP_ID,
          databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
          storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
          locationId: process.env.REACT_APP_FIREBASE_LOCATION_ID,
          apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
          authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
          messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,

          // Depending on whether this is in the development or production environment
          measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
            ? process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
            : null,
        };

        function firebaseInit() {
          if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
          }
        }

        firebaseInit();

        // Initialize Firebase Auth, Firestore, Storage and Functions
        const auth = firebase.auth();
        const projectFirestore = firebase.firestore();
        const projectStorage = firebase.storage();
        const projectFunctions = firebase.functions();
        const timestamp = firebase.firestore.FieldValue.serverTimestamp;

        // If testing on Emulator
        // eslint-disable-next-line no-restricted-globals
        if (location.hostname === "localhost") {
          // alert(location.hostname);
          auth.useEmulator("http://localhost:9099", { disableWarnings: true });
          projectFirestore.useEmulator("localhost", 8080);
          projectStorage.useEmulator("localhost", 9199);
          projectFunctions.useEmulator("localhost", 5000);
        }

        export default firebase;
        export { auth, projectFirestore, projectStorage, projectFunctions, timestamp };