Search code examples
firebaseflutter-webfirebase-hosting

How to host flutter on firebase?

I am following the steps to host my flutter helloworld application. All steps go smooth, however instead of my application I see this screen.

What can be wrong?

enter image description here

My commands:

polinach-macbookpro3:my_app1 polinach$ flutter build web

šŸ’Ŗ Building with sound null safety šŸ’Ŗ

Compiling lib/main.dart for the Web...                             391ms
polinach-macbookpro3:my_app1 polinach$ firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/polinach/_/__/my_app1


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Create a new project
i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 polina-test2
? What would you like to call your project? (defaults to your project ID) 
āœ” Creating Google Cloud Platform project
āœ” Adding Firebase resources to Google Cloud Platform project

šŸŽ‰šŸŽ‰šŸŽ‰ Your Firebase project is ready! šŸŽ‰šŸŽ‰šŸŽ‰

Project information:
   - Project ID: polina-test2
   - Project Name: polina-test2

Firebase console is available at
https://console.firebase.google.com/project/polina-test2/overview
i  Using project polina-test2 (polina-test2)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? 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 deploys with GitHub? No
? File build/web/index.html already exists. Overwrite? Yes
āœ”  Wrote build/web/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

āœ”  Firebase initialization complete!
polinach-macbookpro3:my_app1 polinach$ firebase deploy --only hosting

=== Deploying to 'polina-test2'...

i  deploying hosting
i  hosting[polina-test2]: beginning deploy...
i  hosting[polina-test2]: found 21 files in build/web
āœ”  hosting[polina-test2]: file upload complete
i  hosting[polina-test2]: finalizing version...
āœ”  hosting[polina-test2]: version finalized
i  hosting[polina-test2]: releasing new version...
āœ”  hosting[polina-test2]: release complete

āœ”  Deploy complete!

Project Console: https://console.firebase.google.com/project/polina-test2/overview
Hosting URL: https://polina-test2.web.app
Solution

  • Look at this part of your output:

    ? 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 deploys with GitHub? No
? File build/web/index.html already exists. Overwrite? Yes
āœ”  Wrote build/web/index.html

    You told it to overwrite the existing build/web/index.html. That's what you're seeing in the browser - the HTML provided by the Firebase CLI.

    You will need to make sure your "public directory" (which you set as "build/web") contains what you want to deploy with an index.html to serve by default before you run firebase deploy.