CODEWITHSUNDEEP
firebaseflutterflutter-webfirebase-hosting
littleironical
littleironical

Reputation: 1914

Firebase hosting not showing up

I was hosting a Flutter Web project using Firebase Hosting.

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

enter image description here

I think you also this kind of error while hosting.

Upvotes: 11

Views: 4474

Answers (1)

littleironical
littleironical

Reputation: 1914

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.

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✌

Upvotes: 29

Related Questions