Here is how to host your Flutter web app with Firebase Hosting. This article guides you through all the steps needed.
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.
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.
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!
