CODEWITHSUNDEEP
firebasefluttergoogle-cloud-firestorefirebase-hostingflutter-web
LuckyLizard
LuckyLizard

Reputation: 425

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)

Upvotes: 0

Views: 971

Answers (2)

LuckyLizard
LuckyLizard

Reputation: 425

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.

Upvotes: 0

Emanuel Muroni
Emanuel Muroni

Reputation: 200

Try to modify your web/index.html

from

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

to

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

This way the "main.dart.js" script is executed when the page has finished parsing

Upvotes: 4

Related Questions