Deploying Flutter Web App to Firebase With a Custom Domain

Published in

Geek Culture

5 min readMar 16, 2021

Web apps are supported on the stable channel in Flutter 2.0. In this post, we’ll take a look at deploying a web app to Firebase static hosting and front it with a custom domain.

We’ll deploy an existing application to firebase hosting. If you have initialized the web using flutter create don’t forget to update the favicon and the application icons under the web/icons folder before proceeding with the deployment. This guide does not cover how to create a flutter web application. The instructions are for a *nix system. It should be a very similar setup on a windows system.

Bootstrap

The first step is to create a firebase account if you don’t have one. Only after the account is, you can start configuring the Flutter project. Next, install the firebase CLI.

$ npm install -g firebase-tools

Firebase setup

Once the firebase CLI is installed, login using the command below.

$ firebase login

This would open up the browser to let you sign in to your google account. Once the login is successful, you should see a message on the terminal:

✔ Success! Logged in as youremail@domain.com

Next, initialize firebase hosting by running the following command in the root directory of the flutter project.

$ firebase init hosting

You’ll be prompted to create a new project or pick an existing project if you want to use an existing project.

Next, you’ll be prompted to pick the public directory of your web application that you want to deploy. The default for a flutter web app build is build/web .

This is what the interaction would look like:

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: shiped-7b848 (shipantherproject)
i  Using project shiped-7b848 (shipantherproject)? What do you want to use as your public directory? build/web
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

If you are running this in a git repository that points to Github remote, firebase CLI would also prompt you to configure the Github actions for automatic deployment. You can skip this, if you prefer.

Deploying the web application

You are now ready to build and deploy the web application.

$ flutter build web
Compiling lib/main.dart for the Web...                             24.9s

Once the build is done, let’s publish the application to firebase hosting.

$ firebase deploy --only hosting=== Deploying to 'shiped-7b848'...i  deploying hosting
i  hosting[shiped-7b848]: beginning deploy...
i  hosting[shiped-7b848]: found 30 files in build/web
✔  hosting[shiped-7b848]: file upload complete
i  hosting[shiped-7b848]: finalizing version...
✔  hosting[shiped-7b848]: version finalized
i  hosting[shiped-7b848]: releasing new version...
✔  hosting[shiped-7b848]: release complete✔  Deploy complete!Project Console: https://console.firebase.google.com/project/shiped-hash/overview
Hosting URL: https://shiped-7b848.web.app

You can now navigate to the Hosting URLin your browser

Flutter web app deployed to firebase hosting

Adding a custom domain to the application

Now that we have the application deployed to firebase, we’ll continue to setup a custom domain for the web app. You can skip this if it does not apply to your case.

Binding a custom domain involves telling firebase about the domain, proving ownership of the domain and then wait for SSL certificates to be issued.

Let’s begin by telling firebase about the domain you’d like to host the web application on. Navigate to the Hosting side panel on the Firebase console of your project. Select “Add custom domain”

Click Add custom domain on the Hosting panel in Firebase Console

Add the domain name that you’d like to point to web application

Click Continue and follow the instructions to setup the DNS for the domain. In this step, add the two A records to the DNS. Usually, the DNS is managed differently for different Domain registrars(eg: Go daddy, Google Domains, AWS Route 53, etc.). You’ll need to follow instructions specific to your Domain registrar.

Add the DNS records mentioned here to the DNS settings of your domain

Once the records are added, you can verify them via running a dig command

$ dig shipanther-test.bigpanther.ca A; <<>> DiG 9.10.6 <<>> shipanther-test.bigpanther.ca A
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 54464
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;shipanther-test.bigpanther.ca. IN      A;; ANSWER SECTION:
shipanther-test.bigpanther.ca. 3600 IN  A       151.101.65.195
shipanther-test.bigpanther.ca. 3600 IN  A       151.101.1.195;; Query time: 59 msec
;; SERVER: 192.168.67.67#53(192.168.67.67)
;; WHEN: Mon Mar 15 19:23:54 PDT 2021
;; MSG SIZE  rcvd: 90

At this point firebase would be able to verify the ownership of your domain and you can navigate to https://shipanther-test.bigpanther.ca(this should be your custom domain) to see the results. Please note that it can take up to 24 hours for the DNS changes to propagate and for Firebase to issue a valid SSL certificate for the domain.

Check that the domain validation has succeeded. Until it is done, SSL certificate would not be issued and the browser would show an error like NET::ERR_CERT_COMMON_NAME_INVALID. Check back in some time to allow DNS propagation to finish.

Conclusion

Using Firebase Hosting with Flutter web is a great combination. In a few steps, you can go from adding web support to your existing cross-platform mobile application to deploying it with ease to give your customers a great experience on the platform of their choice. Let me know in the comments below how you are using Flutter to reach your customers in new ways. Happy Fluttering!

The source code for the changes that the firebase CLI makes to the git project can be found here if you are interested. You are also welcome to contribute to Shipanther development. Don’t hesitate to engage with the team on Github.