fix(examples): add firebase as a dependency to complete/simple example (#866) - @dzoba

chore(examples): add emulator support to simple example

Author: prescottprue

examples/complete/simple/README.md

@@ -62,8 +62,14 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
+## Emulator
 
-### Integrating Auth
+The database emulators provided by Firebase allow you to run the full application on a database the is emulated locally. This means that the data will be cleared each time you start the emulator. To use the emulator run the following:
+
+1. Start the emulators: `yarn emulate`
+1. Start the app: `yarn dev`
+
+## Integrating Auth
 
 Checkout [the auth recipes](../../../docs/recipes/auth.md) for some simple examples of how to integrate auth.
 

examples/complete/simple/firebase.json

@@ -15,5 +15,13 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "emulators": {
+    "database": {
+      "port": 9000
+    },
+    "firestore": {
+      "port": 8080
+    }
   }
 }

examples/complete/simple/package-lock.json

@@ -6,28 +6,38 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "emulate": "firebase emulators:start --only firestore,database",
+    "dev": "cross-env REACT_APP_USE_DB_EMULATORS=true yarn start"
   },
   "dependencies": {
+    "firebase": "^7.8.2",
     "prop-types": "^15.7.2",
-    "react": "16.10.0",
-    "react-dom": "16.10.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-redux": "^7.1.0",
-    "react-redux-firebase": "next",
+    "react-redux-firebase": "*",
     "redux": "^4.0.4",
-    "redux-firestore": "^0.9.0",
+    "redux-firestore": "^0.12.0",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "react-scripts": "3.1.0"
+    "cross-env": "^7.0.0",
+    "react-scripts": "3.4.0"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

examples/complete/simple/package.json

@@ -8,13 +8,14 @@ import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
 import { createFirestoreInstance } from 'redux-firestore';
 import Home from './Home'
 import configureStore from './store'
-import { firebase as fbConfig, reduxFirebase as rfConfig } from './config'
+import initFirebase from './initFirebase'
+import { reduxFirebase as rfConfig } from './config'
 import './App.css'
 
 const initialState = window && window.__INITIAL_STATE__ // set initial state here
 const store = configureStore(initialState)
 // Initialize Firebase instance
-firebase.initializeApp(fbConfig)
+initFirebase()
 
 export default function App () {
   return (

examples/complete/simple/src/App.js

@@ -16,7 +16,7 @@ function NewTodo() {
   }
 
   return (
-    <div>
+    <div style={{ marginBottom: '4rem' }}>
       <h4>New Todo</h4>
       <input value={inputVal} onChange={onInputChange} />
       <button onClick={addTodo}>Add</button>

examples/complete/simple/src/NewTodo.js

@@ -0,0 +1,38 @@
+import firebase from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/database'
+import 'firebase/firestore' // make sure you add this for firestore
+import { firebase as fbConfig } from './config'
+
+let firebaseInstance
+
+export default function initFirebase(initialState, history) {
+  if (firebaseInstance) {
+    return firebaseInstance
+  }
+
+  // Initialize firebase instance if it doesn't already exist
+  if (!firebaseInstance) {
+    const shouldUseEmulator = process.env.REACT_APP_USE_DB_EMULATORS
+
+    if (shouldUseEmulator) { // or window.location.hostname === 'localhost' if you want
+      console.log('Using RTDB emulator')
+      fbConfig.databaseURL = `http://localhost:9000?ns=${fbConfig.projectId}`
+    }
+
+    // Initialize Firebase instance
+    firebase.initializeApp(fbConfig)
+
+    if (shouldUseEmulator) { // or window.location.hostname === 'localhost' if you want
+      console.log('Using Firestore emulator')
+      firebase.firestore().settings({
+        host: 'localhost:8080',
+        ssl: false
+      })
+    }
+    firebaseInstance = firebase
+  }
+
+
+  return firebaseInstance
+}