Firebase hosting not showing up

Question

I was hosting a Flutter Web project using Firebase Hosting.

I did firebase init then firebase deploy but my hosted website looks like this:

I think you also this kind of error while hosting.

Answer 1

Answering my own question as I didn't find an answer that helped me out. So I found a way out.

EDIT(08/2023)

After doing firebase init and selecting the initial options provided by firebase, firebase creates a firebase.json file which looks like this:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

If you do firebase deploy here, you'll be seeing the same website as shown in the question.

Here's what you can do to avoid it.

• STEP1: flutter clean then flutter pub get
• STEP2: Build your application with either HTML or Canvaskit web renderer

flutter build web --web-renderer html --release (for faster download speed) OR

flutter build web --web-renderer canvaskit --release (for smooth performance) OR

flutter build web --release would also work.

• STEP3: firebase init (Answer the firebase questions carefully)

? What do you want to use as your public directory? build/web
? Configure as a single-page app (rewrite all URLs to /index.html)? yes
? Set up automatic builds and deploy with GitHub? no
? File build/web/index.html already exists. Overwirte? no

Now before doing firebase deploy, make sure you change the "public" directory to "build/web" as shown below, as that is the web flutter has built.

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

• STEP4: firebase deploy

THINGS TO REMEMBER

1. Use build/web directory instead of public as public directory during Firebase initialization

2. DO NOT override build/web/index.html as Firebase overrides their own screen (THE SCREEN SHOWN IN THE PROBLEM)

This is all you need to know. Peace✌