cloud_firestore_web

The web implementation of cloud_firestore.

Usage

Import the package

This package is the endorsed implementation of cloud_firestore for the web platform since version 0.13.2, so it gets automatically added to your application by depending on cloud_firestore: ^0.13.2.

No further modifications to your pubspec.yaml should be required in a recent enough version of Flutter (>=1.12.13+hotfix.4):

...
dependencies:
  ...
  cloud_firestore: ^0.13.2
  ...

Update index.html

Due to this bug in dartdevc, you will need to manually add the Firebase JavaScript files to your index.html file.

In your app directory, edit web/index.html to add the following:

<html>
    ...
    <body>
        <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
        <!-- Other firebase SDKs/config here -->
        <script src="main.dart.js"></script>
    </body>
</html>

Initialize Firebase

If your app is using the "default" Firebase app (this means that you're not doing any package:firebase_core initialization yourself), you'll need to initialize it now, following the steps in the Firebase Web Setup docs.

Specifically, you'll want to add the following lines to your web/index.html file:

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
  <script>
    // TODO: Replace the following with your app's Firebase project configuration.
    // See: https://support.google.com/firebase/answer/7015592
    var firebaseConfig = {
      apiKey: "...",
      authDomain: "[YOUR_PROJECT].firebaseapp.com",
      databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
      projectId: "[YOUR_PROJECT]",
      storageBucket: "[YOUR_PROJECT].appspot.com",
      messagingSenderId: "...",
      appId: "1:...:web:...",
      measurementId: "G-..."
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
  <!-- END OF FIREBASE INIT CODE -->

  <script src="main.dart.js"></script>
</body>

Use the plugin

Once you have modified your web/index.html file, you should be able to use package:cloud_firestore as normal. Refer to the cloud_firestore documentation for more details.

Libraries

cloud_firestore_web