Search code examples
firebasefluttergoogle-cloud-firestorefirebase-hostingflutter-web

The same Flutter web build runs locally with `dhttp` but fails with `firebase serve` or `firebase deploy`

I'm developing a Flutter app for both mobile and web. It uses several packages, including those for Firestore:

  cloud_firestore: ^0.12.9+1 #imported conditionally for mobile
  firebase_web: ^5.0.9 #imported conditionally for web
  #firebase_core: ^0.4.3+1 #not sure whether it's required in my case, assuming not (?)

My web/index.html includes the following scripts:

  <script src="main.dart.js" type="application/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-firestore.js"></script>
  <script src="/__/firebase/init.js"></script>

1) The app works as expected in debug mode.

2) Then I make a build with flutter build web with the resulting file structure similar to those from the tutorial.

2.1) It works as expected when I run it locally with dhttpd flutter pub global run dhttpd --path build/web

3) Then I'm trying to deploy it to Firebase hosting.

When running firebase init I set build/web as a public directory. At first I was confused by the answer to this question that it should be just build but I assume it was true for the preview version of Flutter for web, and now it's build/web where index.html lives.

As for configuring as a single-page app (rewrite all urls to /index.html) I tried both yes/no with no visible difference. Again a small confusion from the comment to the answer from the link above: "Your other mistake was to configure this as a single page app. It won't find any assets you might have."

3.1) Firstly, trying it out locally following the tutorial firebase serve or firebase serve --only hosting - both of them gives me an empty page with the background of the correct color from the defined theme, but with nothing else present. In page inspector and sources tab I see all the same html structure and scripts loaded as in step (2.1), with the only difference being the extra directories assetes and __/firebase in case of Firebase.

firebase serve local results

3.2) Trying to firebase deploy results in the same empty background screen as in (3.1). There's no errors to investigate in the firebase-debug.log. Which other logs should I look into?

(using Flutter latest version master v1.13.3-pre.12, Firebase tools v7.10.0)

Solution

  • So the problem was in the order of including the scripts in web/index.html. Placing the /__/firebase/init.js foremost solved it:

      <script src="/__/firebase/init.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-firestore.js"></script>

    Thanks to @emanuel-muroni for leading me to the answer.