How to host Flutter Web (Hummingbird) on Firebase Hosting

Question

I created a flutter web project and work fine in localhost. So I planned to host the website in firebase. I followed the commands it deployed successfully but it shows only black screen in the console it shows error message.

Error :

Loading failed for the with source “https://myportfolioflutterweb.firebaseapp.com/web/main.dart.js”. SyntaxError: expected expression, got '<'[Learn More]

My Project Structure :

firebase.json :

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
    {
      "source": "/",
      "destination": "/web/index.html",
      "type": 302
    }
  ]
  }
}

Commands:

Note: When I give public dir as the public folder it creates index.html. I deleted the file manually and navigate to the path as web/index.html

Answer 1

Finally, I solved the issue. I navigate the wrong path in public folder on firebase hosting. To deploy flutter web first I need to build the project using below command

Build

webdev build

After I build the project It creates a build folder inside the project

Before I public path as root but the correct path is build

Correct Path:

 What do you want to use as your public directory? build

I attached full command of firebase hosting deployment below,