Introduction
Here is how to host your Flutter web app with Firebase Hosting. This article guides you through all the steps needed. This service is free of charge!
Flutter apps are available for various platforms like Android, iOS, desktop systems, and also the web. With Firebase Hosting, there is an easy tool to deploy your Flutter web app and access it in a browser. This is a simple way to distribute apps to testers or automate the release process of new versions. Here is how to host your Flutter web app with Firebase Hosting.
Flutter ❤️ Firebase
Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!
💡 Tip
Do you already have a Firebase project? If not, follow my setup article below with all steps in detail!
Open any command line tool (PowerShell, cmd, bash, Visual Studio terminal, …) and navigate to your Flutter project. Then, execute the command firebase init hosting.
You will be asked several questions. Answer them like me in the image above to get a feeling of the workflow. Set your public directory to build/web because this is the location where the Flutter framework will put the files for the web app. This will then be deployed to Firebase Hosting.
Run the command flutter build web to create the web app.
Afterward, use the command firebase deploy --only hosting to publish the web app to Firebase Hosting.
The Hosting URL of the command-line output points to the location where the web app is running. Open it in a browser and verify that everything works as intended. If you use the provided demo application, you should see something like the image above.
To manage your releases, you can use the Firebase Hosting dashboard.
In the Build menu, go to Hosting.
You can see the deployed version in the release overview.
That’s it. Your web app is published and can be managed with Firebase Hosting! ?
How can I deploy to a preview channel?
Follow the steps describe before but when deploying, use the command firebase hosting:channel:deploy CHANNEL_NAME to push your deployment to Firebase. A new channel will appear in the Hosting dashboard. You can customize its storage settings and expiration time by clicking on the date button. By default, the channel will be deleted after 7 days and store 10 releases at most.
How can I delete a previous release to free up storage space?
In Firebase Console, go to Hosting and look for the desired deployment in your release history. Click the three dots on the right and select Delete. This will schedule a deletion of the deployed contents within 24 hours. However, the table entry will remain.
You can only delete previous releases but not the active one.
How can I change Firebase Hosting settings?
You can either rerun the firebase init hosting command or edit the firebase.json file in your repository manually. In any case, you have to follow up with the command firebase deploy --only hosting to publish the changes.
Conclusion
In this article, we learned how to host your Flutter web app with Firebase Hosting. You can find an example app on my GitHub page. Deploy it to your Firebase project to test.
Related articles
