Deploy Your Flutter Web Application to Firebase hosting

In the Flutter Engage 2021 Flutter team announced there new release Flutter 2.0. With the Flutter 2.0 update flutter support for the web platform has become stable.

With this, the Flutter team pushes the reusability of code to another level with the support of the web platform.

Our vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, we’re announcing that Flutter’s web support has hit the stable milestone.

(In the keynote Flutter Engage 2021)

Read about Flutter Engage 2021 from my old Stories: https://thilinaweerasinghe.medium.com/flutter-engage-2021-13bc352ce0f9

From this article you’ll see how to deploy web application in to Firebase Hosting.

There are simple steps:

  1. Create the Firebase project

Go to the Firebase console and Add new project and after that add a name to your project and click Continue.

Next click Create project.

Next click continue

After a few seconds, your project is ready! ✌️

2. Install the firebase-tools cli

(🏃‍♀Skip this step if you already have firebase-tools installed.)

🛑necessary that Node.js is installed on your machine.

Firebase CLI provides a variety of tools for managing, viewing, and deploy to Firebase projects.

Run this code npm install -g firebase-tools

For more info refer the Firebase CLI reference.

3. Initialize Firebase hosting for your Flutter project

Navigate to the root directory of your Flutter app and run this command to exec the login:

firebase login

this opens a web page where it’s possible to insert your credentials to authenticate to the system. Accept all permissions. A message of success informs you of the outcome of the operation.

Then initialize your Firebase project and run this command:

firebase init

This asks for which Firebase CLI features do you want setup for this folder. Move with the arrow key and press the ‘Space’ button to select Firebase Hosting and then click ‘Enter to confirm your choice.

Project Setup: Firebase hosting

Then select Use an existing project and click enter.

Project setup: Use an existing project

When the terminal ask for “What do you want to use as your public directory” insert build web and press enter.

Project setup: Hosting setup

In the end, a message informs you of the outcome of the operation.
✔ Firebase initialization complete!

4. Build and deploy the app

To build your app launch:

flutter build web

This creates the necessary files in /build/web folder.

At the end of the build process run:

firebase deploy

At the end of process, All the files are uploaded and hosted in your Firebase URL.

Configure Custom Domain

After upload your web application to firebase you can deploy your flutter web application to your own custom domain.

  1. First go to hosting section of your firebase console and click on add custom domain.

2. Then enter your domain and click continue.

3. After copy the values and go to domain provider.

4. Go to DNS section on domain providers web.

5. Go to A records and add your copied value records on the ipv4 Address text field and click on save button.

6. After configuration step you need to wait up to 24 hours until firebase actually verifies the ownership of your website and this may can take some time.

7. After above step you can see your connected message on the status column

8. Then you can use your custom domain.🧑‍💻

Using this method you can easily host your flutter web application using firebase hosting service. ✌️

Thank you!

--

--

--

Undergraduate & Flutter & Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SOLID Design Principles

Hardware Asset Management: 8 Benefits Of Dedicated Software For Your Business

Hardware Asset Management: 8 Benefits Of Dedicated Software For Your Business

Resource Editor Complete

4 Recommendations of Arduino Types for Beginners

Uno R3 DIP Arduino

Scope Management | Paramount in Project Management Life Cycle

A Brief Introduction to Flexbox

Show Me the Laws

Handy tips for debugging JavaScript in Chrome

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thilina Weerasinghe

Thilina Weerasinghe

Undergraduate & Flutter & Web Developer

More from Medium

Create an API with Dart and Supabase

Flutter Tab to Scroll Top on nested navigation

Flutter Sliding Sheet with Custom Modification

Nuxt NFT dApp with MetaMask and Ethers.js - Wallet Plugin