quickstart.md

Reactfire Quickstart

⚛ + 🔥 = 🌯

We'll build a web app that displays, in real time, the tastiness of a burrito. It will listen to Cloud Firestore for its data, and we'll configure Firebase Performance Monitoring so we can get some perf stats.

To see the completed app, check out this StackBlitz workspace.

1. In a terminal, create a fresh React app and cd into its directory.

Prerequisite: make sure you have Node.js installed.

npx create-react-app myapp
cd myapp

2. Install reactfire and the Firebase SDK

# yarn
yarn add firebase reactfire@canary

# or

# npm
npm install firebase reactfire@canary

3. Create a document in Cloud Firestore

1. Go to the Database tab in the Firebase console. If your project doesn't have a Cloud Firestore instance yet, initialize it in locked mode

2. Add a document

   1. In the Data tab of the console, click Add Collection

   2. Name the collection tryreactfire

   3. Add a document with ID burrito and boolean field yummy: true

   

3. Add the following to your security rules and click Publish

   match /tryreactfire/burrito {
     allow read: if true;
     allow write: if request.auth.uid != null;
   }
   

4. Modify src/index.js

1. Import firebase and reactfire

   //...
   import { FirebaseAppProvider } from 'reactfire';
   import 'firebase/performance';
   //...

2. Wrap your app in a FirebaseAppProvider and provide the config object from the Firebase console

   //...
   const firebaseConfig = {
     /* add your config object from Firebase console */
   };
   ReactDOM.render(
     <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance>
       <App />
     </FirebaseAppProvider>,
     document.getElementById('root')
   );
   //...

5. Modify src/App.js

1. Import the useFirestoreDocData and useFirestore hooks

   //...
   import { useFirestoreDocData, useFirestore } from 'reactfire';
   //...

2. Add a function component

   //...
   function Burrito() {
     // lazy load the Firestore SDK
     const firestore = useFirestore();
   
     // create a document reference
     const burritoRef = firestore()
       .collection('tryreactfire')
       .doc('burrito');
   
     // subscribe to the doc. just one line!
     const burrito = useFirestoreDocData(burritoRef);
   
     // get the value from the doc
     const isYummy = burrito.yummy;
   
     return <p>The burrito is {isYummy ? 'good' : 'bad'}</p>;
   }
   //...

3. Render your component inside of a Suspense tag

We need to do this because useFirestoreDocData throws a Promise while it is waiting for a response from Firestore. Suspense will catch the Promise and render fallback until the Promise is resolved.

Replace the App function with the following:

//...
function App() {
  return (
    <div className="App">
      <SuspenseWithPerf
        fallback={'loading burrito status...'}
        traceId={'load-burrito-status'}
      >
        <Burrito />
      </SuspenseWithPerf>
    </div>
  );
}
//...

6. Run your app!

yarn start
# or
npm run start

1. Edit the value of yummy in the Firebase console, and watch it update in real time in your app! 🔥🔥🔥

But what about Firebase Performance Monitoring?

By passing the initPerformance prop to FirebaseAppProvider, our app will automatically measure common performance stats, as well as report on our custom trace, load-burrito-status, that we set in the traceId prop of SuspenseWithPerf.

However, Firebase Performance Monitoring can take about 12 hours to crunch your data and show it in the Performance tab of the Firebase console.

This is an example of some of the stats in the Firebase Performance Monitoring console after 12 hours: