Hosting Flutter Web Applications on Firebase for Free with Generous Spark Plan
Dear Flutter enthusiasts,
In this article, I will be explaining how to Host a Flutter for web applications with minimum steps in less than 10 mins, thanks to Firebase and Firebase CLI.
If you can remain within below limits of free tier you can use storage up to 10 GB in total for free with data transfer up to 360MB per day. If you need to use more than below limits you will need to upgrade your plan.
Prerequisites
You need to have
- A Google Account
- Firebase project
- Firebase CLI installed on your PC or Mac
I assume you have already enabled web support in your project.
You will need to login to Firebase CLI with the below command
firebase loginInitialize Firebase on your flutter app
firebase initThen you need to use arrow keys and select
Hosting: Configure and deploy Firebase Hosting Sites
for the next prompts use below answers, If you are not using routing with URL paths. If you need routing enabled please select No for the second option.
That’s all for Firebase Initialization.
Then You will have to build your Flutter for Web Project with the below command.
flutter build webAfter project successfully built , you will be able see a folder called web inside your projects root directory, build folder.
you will have to run the the below command 2 commands.
firebase use --addYou will need to select the project on from the available project list.
As the final step run
firebase deploy
That’s all. Congratulations! You have successfully deployed your web app.
Bonus Content for your knowledge.
You can visit this link and check your usage statics for the project.
https://console.firebase.google.com/project/_/usage
See you in another article…
Your claps will encourage me to write more articles in the future. If you have any questions or anything to be improved please write a comment in the comments section or send me an email — chamithc25@gmail.com
