Web Installation

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

caution

Support for web is currently limited. We are working to bring full support for web to all plugins. To learn more, visit the FlutterFire Roadmap.

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/7.20.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.

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:

web/index.html
<html>
...
<body>
<script src="https://www.gstatic.com/firebasejs/7.20.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>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Initializing FlutterFire

Once complete follow the instructions on Initializing FlutterFire.