6

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>
Thomas David Kehoe
  • 10,040
  • 14
  • 61
  • 100

2 Answers2

9

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.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
1

This worked for me.

Upon running flutter clean, flutter build web --release and firebase init, you will reach at this point as shown in the image: setting public directories

Choose No at the File build/web/index.html already exists. Overwrite? (y/N). This is because Firebase overwrites the /index.html with its own code that generates the screen that you are viewing.

After that, you can run firebase deploy.

Alternatively, if you have already at the point where you see that firebase hosting setup complete screen, just run flutter build web --release to configure the build/web/index.html to your project and firebase deploy

Murungi Muhumuza
  • 81
  • 1
  • 4