Deploying a Flutter Web App to Firebase

30 July 2023

Enable web testing for your iOS or Android targeted Flutter app.

I recently worked on a Flutter project where the application was designed and targeted specifically for mobile use on iOS and Android. The original thinking was to build iOS and Android versions of the application that would be deployed to the relevant app stores at production.

As development progressed, we needed to allow the testers to start testing the functionality of the app. This is where some issues started to arise.

You might not know this, but building a test version of the app and deploying it to the Apple and Google test programs for someone to install and test on their mobile phone, proved a lot more involved and time consuming than we envisioned.

Luckily, our application ran smoothly as a web app when we tested it out of Android Studio with Chrome. So we deciced to approach the first functional testing phase with web capability.

As a first functional test, the testers were happy to test using a web browser on their phones and in the later stages of the test cycle sample the mobile app builds.

Even though we normally deploy our non-mobile apps, backends and services to AWS, we decided to deploy the Flutter web build to Firebase as an experiment. The process was smooth and effective, giving us a test hosting URL immediately after deployment.

I have decided to document the steps below for future use, or should someone stumble upon it.

Flutter project setup

1 - Ensure you have the latest Flutter SDK installed.

2 - If not already, Enable web support on your project.

flutter config --enable-web

3 - Make sure you can run your Flutter app smoothly in a web browser by using Android to launch the web version of the application.

5 - Once tested and your happy with the result, go ahead and build the web app:

flutter build web --web-renderer canvaskit

Note: By passing the arguments for the web renderer, the experience on web is way better.

Firebase deployment:

We chose Firebase as the hosting provider, the steps below indicate the deployment to Firebase specifically:

1 - Ensure you have the latest Flutter SDK

2 - If not already, Enable web support.

firebase init hosting

Here is an example of our test init:

Some points to note on the above init:

a) You can either create a new project or use an existing project you might have on Firebase

b) When asked, you need to set the public directory - build/web

c) You need to configure the app as a single-page app.

2 - After the firebase init command has completed successfully, go ahead and deploy the app by executing the following command:

firebase deploy --only hosting

Next steps:

Now that your Flutter web app is up and running on Firebase. These are the only two commands you need to execute after you have made changes to the app and want to re-deploy:

1 - Build your app