How To Host Your Flutter Web App With Firebase Hosting

Firebase category image

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.


An In-Depth Firebase Guide For Flutter Developers!

This compendium is a comprehensive guide with many step-by-step guides and code examples. Learn the essentials of Firebase and enhance your apps with cloud services in no time!


💡 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.

Screenshot of the initialization of Firebase Hosting by author
Screenshot of the initialization of Firebase Hosting by author

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.

Screenshot of the build process of a Flutter web app by author
Screenshot of the build process of a Flutter web app by author

Run the command flutter build web to create the web app.

Screenshot of the deployment of the Flutter web app to Firebase Hosting by author
Screenshot of the deployment of the Flutter web app to Firebase Hosting by author

Afterward, use the command firebase deploy --only hosting to publish the web app to Firebase Hosting.

Screenshot of the deployed Flutter web app with Firebase Hosting by author
Screenshot of the deployed Flutter web app with Firebase Hosting by author

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.

Screenshot of the Hosting menu in Firebase by author
Screenshot of the Hosting menu in Firebase by author

You can see the deployed version in the release overview.

Screenshot of release overview in Firebase Console by author
Screenshot of release overview in Firebase Console by author

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.

Screenshot of a preview channel in Firebase Hosting by author
Screenshot of a preview channel in Firebase Hosting by author

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.

Additional resources

Here are some additional resources about Firebase in case you want to dive deeper into the topic.

Firebase Cloud Functions

Your all-in-one toolbox to building serverless infrastructures in the cloud. Write once and scale to infinity!

Firebase Cloud Storage

Upload and download user-generated content like on a file system. Firebase Cloud Storage makes file handling simple!

Firebase Remote Config

Real-time feature toggles or A/B testing are typical use cases of Firebase Remote Config. Learn how to implement them now!

Firebase Console

Learn how to manage projects, apps, users, billing plans, and costs with step-by-step guides in the Firebase Console.

Firebase Cloud Firestore

Learn about Firebase Firestore and write mobile apps with the power of a modern and fast NoSQL database.

Firebase Authentication

Implement email/password authentication or use social providers like Google, Microsoft, and Facebook for your apps!

Firebase Hosting

Host your web apps, microservices, dynamic, and static content with this powerful yet simple solution from Firebase!


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Become A Firebase Expert!

Take a deep dive into Firebase and learn how to really handle their services. This ebook makes you an instant Firebase professional!

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!