DEV Community

loading...

How to host a Flutter web app on Firebase

DailyFlutter.Monster
I try to make cool things with flutter.
Originally published at dailyflutter.monster ・3 min read

Alt Text

Firebase is a great tool for whoever wants to host their web app or website for free and easily. In this tutorial, I will be showing how to quickly create a firebase project and host a flutter web app.

The App

For the purpose of keeping things simple, I will just be sticking with the initial counter app that comes with every new flutter project.

So, in the terminal, I run

  • flutter create 'firebase_hosted_app

This creates the app for me in that directory we will not even have to look at the code in reality and everything that we have to do to get it hosted can be done from the terminal.

Change to the drectory of the app

  • cd firebase_hosted_app

Next thing is to build for the web.

  • flutter build web

this wil create the web project that you will be hosting in the directory build/web

Integrating Firebase into the Project

for this, you will first need the Firebase CLI. If you do not have these installed please follow this tutorial of how to do that and then come back to this part:

https://firebase.google.com/docs/cli#install_the_firebase_cli

Now you must login to firebase though the terminal (note you must have a google account to use firebase).

In the terminal enter:

  • firebase login

You will then be redirected to a link on the browser where you will have to log in to your google account. Once this is done you can close the browser and return to the terminal.

Now run:

  • firebase init

This will initilize your firebase project and you will be promtedd with 6 options:

Alt Text

Move down to hositng with the arrow keys, hit the spacebar to select it then press enter. The next pormt will look like this:

Alt Text

Choose 'create a new project'

You will then be asked to specify a unique project ID (note: the id cannot include these characters: ' " ! _).

The next prompt is what would you like to call you to project just leave this blank and let it default to the id unless you want to change the name

then firebase will create the project for you:

Alt Text

For the public directory it will be build/web (the one we created in the first section)

It will ask you if you want you configure as a single-page app

Type Y and enter (to say yes)

It will then say that index.html already exists. Overwrite?

Type N and enter (to say no)

This is what the process should look like:

Alt Text
The only thing that is left now is to enter in the terminal:

  • firebase deploy

Alt Text

Now are done!!

we can follow the host url to the the project online. In my case it is: https://fir-hosted-app825.web.app/#/

and sure enough we get the flutter counter app:

Alt Text

Conclusion

I hope I managed to show you how easy and quick it is to host your flutter project using firebase, this is great if you want to showcase you app without having the user download it from one of the stores, instead since flutter has one codebase, you can host you app online.

Discussion (0)