Firebase recently added Flutter Web support for Firestore, Firebase Auth and Firestore Storage. Here's how I set up a pre-existing Flutter + Firestore mobile app to run on Web.
Feb 2022 update
The latest doc to set it up is at https://firebase.google.com/docs/flutter/setup?platform=web. Now we don't need to modify index.html with custom js imports anymore!
Set up the Web project
First I ran
flutter create . as instructed at https://flutter.dev/docs/get-started/web#add-web-support-to-an-existing-app.
Add js libs to index.html
I went over to https://pub.dev/packages/cloud_firestore to get the set up instructions. They redirect us to https://firebase.flutter.dev/docs/firestore/usage/. At the footer of the page, they have a page dedicated to Web: https://firebase.flutter.dev/docs/installation/web. This page shows how to add the dependency to firebase-app.js, and initialize the project.
Heading over to Firebase Console, I added a Web app to my app.
Adding the web app in Firestore Console
The odd thing is when I added the web app in Firestore Console, instead of showing me the JS code snippet to initialize the app, it showed me this snippet:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<!-- TODO: Add SDKs for Firebase products that you want to use
<!-- Initialize Firebase -->
It's only after I got out of the "create web app" wizard, and went into Project settings, apps, web, that I got the choice of Firebase SDK snippet between automatic, CDN (script imports and the initialization code) and Config (just the initialization variable definition).
CDN is the one I want.
Setting up Google Sign-in
After setting things up, it was time to try running it. I used
flutter run -d chrome as mentioned at https://flutter.dev/docs/get-started/web#command-line. When I ran it, I got an error telling me the project's client ID wasn't set up. To find it, go to your Firebase Console, Authentication, Methods, click Google, then expand Web SDK configuration.
After adding the meta tag to my index.html, then running the project again, I got this error in the Chrome debugger tools:
Caught error: PlatformException(idpiframe_initialization_failed, Not a valid origin for the client: localhost:53677 has not been registered for client ID [redacted].apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID., https://developers.google.com/identity/sign-in/web/reference#error_codes, null)
If you go to console.developers.google.com, you'll see that localhost:5000 is white-listed, but not the random port that
flutter run -d chrome uses. So instead, we should specify the port web running that command:
flutter run -d chrome --web-port 5000
Once it ran on the right port, sign in with Google worked fine.
To set up Firebase hosting, I used https://firebase.google.com/docs/hosting/quickstart. First sign in with
firebase login, then
firebase init hosting. I set up the path to deploy as
build/web, since this is where
flutter build web outputs the build.
Finally I deployed by running. It output a link for me to check out my app: https://[redacted].web.app/. When I tried to sign in, it failed, telling me it wasn't whitelisted in Google Sign in.