Skip to content

Latest commit

 

History

History
67 lines (51 loc) · 2.22 KB

web.mdx

File metadata and controls

67 lines (51 loc) · 2.22 KB
title
Web Installation

Before using FlutterFire on the web, you must first import the Firebase JavaScript SDK and initialize Firebase.

Add Firebase SDKs

The only way to currently add the Firebase SDKs to your Flutter web project is by importing the scripts from the Firebase content delivery network (CDN). Add the firebase-app.js script to your index.html file:

<html>
  ...
  <body>
    <!-- Add this line -->
    <script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-app.js"></script>

    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

For more information on setting Firebase up for the web, view the official documentation.

We are actively investigating ways to initialize Firebase without directly using the CDN and will update the documentation once this becomes available.

Initializing Firebase

The next step is to initialize Firebase using your project configuration. Create a new web app (or choose an existing one) on the Firebase Console and copy the configuration details.

Initialize Firebase using these configuration details, placing the following script below the CDN imports added above:

<html>
  ...
  <body>
    <script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-app.js"></script>

    <!-- Firebase Configuration -->
    <script>
      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>

    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

Initializing FlutterFire

Once complete follow the instructions on Initializing FlutterFire.