Search code examples
flutterfirebase-hostingflutter-web

How to host Flutter Web (Hummingbird) on Firebase Hosting

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 :

enter image description here

firebase.json :

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

Commands:

enter image description here

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

Solution

  • 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 enter image description here 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,

    enter image description here