Search code examples
flutter-webfirebase-hosting

Flutter web app won't deploy to Firebase hosting

My Flutter app looks great in the Chrome (web) emulator and running on a local server.

I navigated to this directory:

Users/TDK/StudioProjects/kabbalah/build/web/

I installed the Firebase CLI tools and then ran

firebase init hosting

I wasn't sure about this question:

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

I responded y. The response was

✔  Firebase initialization complete!

Then I ran

firebase deploy --only hosting

The response is

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/kabbalah-numerology/overview
Hosting URL: https://kabbalah-numerology.web.app

When I go to the Project Console I see

Deployed

When I go to https://kabbalah-numerology.web.app I get this screen:

enter image description here

Shouldn't I see my web app? Did I deploy from the wrong directory?

I opened Safari to check if Chrome was cacheing an old webpage but I got the same screen.

I put this code block into index.html. It made no difference.

<body>
<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "my-super-secret-key",
  authDomain: "kabbalah-numerology.firebaseapp.com",
  projectId: "kabbalah-numerology",
  storageBucket: "kabbalah-numerology.appspot.com",
  messagingSenderId: "my-sending-id",
  appId: "my-app-id",
  measurementId: "my-measurement-id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
Solution

  • Check the firebase.json file, which controls your hosting setup. Most likely the public folder in there, which determines from what directory files are served, points to the wrong location.

    I typically run firebase init in the root of my project, and then point public in firebase.json to the output of the flutter web build.