Host Flutter Web App On Firebase Hosting

Gihan Lakshan — Thu, 29 Apr 2021 05:05:58 +0000

Hello guys, in this post I will show you how to deploy your Flutter Web App on Firebase.

In this tutorial I’m assuming you have installed firebase-tools and you have created firebase project on firebase console.

Click here to learn How to Install firebase-tools

Before diving into the process, Let’s talk about some topics in flutter web deployment.

Minification

Minification is handled for you when you create a release build.

A debug build of a web app is not minified and tree shaking has not been performed.

A profile build is not minified and tree shaking has been performed.

A release build is both minified and tree shaking has been performed.

Web Renderers

By default, the flutter build and flutter run commands use the auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. This is Flutter recommended combination to optimize for the characteristics of each platform. You can also define the renderer when building by using --web-renderer option with flutter build web command. See more about Web Renderers

Building Flutter Project for Release

Open your terminal and cd to your root of flutter project
Then run flutter build web command, This generates the app including the assets, and places the files into build/web directory
The release build of a simple app has the following structure:

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Initializing Firebase

Run firebase init command in root of the project
Choose Hosting: Configure and deploy Firebase Hosting sites option (press space bar to choose) and press Enter
Now I’m using Use an existing project option you can use Create a new project option if you haven’t created the firebase project yet.
Now select your newly created project
Now enter build/web as public directory
For next question enter Y
Then it will ask to setup automatic builds and deploys using git, in this tutorial we skip that option by saying N
It will ask another question, to override the build/web/index.html, say no to it by entering N
Now firebase has initialized on our project directory, you will see two new files as firebase.json & .firebaserc, it means firebase has initialised, let’s move on
Now run firebase deploy this command will deploy our app to firebase, after successful deploy you will see like below.
Visit your newly hosted web app by going to Hosting URL

Watch the short video tutorial on YouTube:

Want to develop this simple landing page using Flutter? Watch my tutorial on YouTube:

DEV Community: Gihan Lakshan

Host Flutter Web App On Firebase Hosting

Minification

Web Renderers

Building Flutter Project for Release

Initializing Firebase