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.
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.
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.
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.
Here are some additional resources about Firebase in case you want to dive deeper into the topic.