Web Installation

Notice

This page is archived and might not reflect the latest version of the FlutterFire plugins. With the latest plugins, manual installation is not required. You can find the latest information on firebase.google.com:

https://firebase.google.com/docs/flutter/setup

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:

web/index.html

<html>
  ...
  <body>
    <!-- Add this line -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/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.

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:

web/index.html

<html>
  ...
  <body>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/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>

  </body>
</html>