Use Firebase to host your Flutter app on the web

So you have a Flutter app, and you want to show it to the world? Look no further! This tutorial shows how to host your Flutter app on the web through a Firebase-hosted URL in just 4 easy steps (2 steps if you already have firebase-tools installed and an existing Firebase project). It is assumed that you have Flutter installed and are able to run your Flutter app locally. If you are new to Flutter, first check out the getting started guide.

Prerequisite

If your project was created before flutter web was enabled, your project needs a copy of the web folder with an index.html file. If there is not a web folder in your root directory, run the following command to make one:

$ flutter create .

If you create a project after enabling the web, it automatically creates the web/index.html file for you. Good, now on to the Firebase Hosting setup.

☝️Note: Step 1 and 2 can be skipped if you already have a Firebase project and firebase-tools installed.

Step 1: Create the Firebase project

🏃‍♀ Skip this step if you already have a Firebase project to use.

☝️Note: A new project can also be created on the command line from within step 2, but this tutorial creates it in the Firebase console.

In a browser, go to the Firebase console.

Click Add project and give your project a name:

☝️Note: The actual project name might generate some extra characters at the end for uniqueness.

Click Continue. For simplicity, don’t enable Google Analytics for this project, so turn off the switch and click Create project. If you want to use Google Analytics, leave the switch on, and there will be one extra step of choosing or creating a Google Analytics project.

Watch for a few seconds as the project is created, until you see that it is ready and click Continue.

That’s it for step 1!

Step 2: Install the firebase-tools CLI

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

If you do not have npm, you must install that first.

☝️Note: If you are not sure whether npm is installed on your machine, run $ npm -v , and see if it lists a version number. If it does, then you already have npm. If it says “command not found”, you need to install it.

Installing npm on windows.

Installing npm on linux.

Installing npm on mac.

Or download it directly from Node.js.

Once npm is installed, run the following command to install the firebase-tools:

$ npm install -g firebase-tools

firebase-tools is now installed!

Step 3: Initialize Firebase hosting for your Flutter project

Open a terminal and navigate to the root directory for your Flutter app and run this command to login:

$ firebase login

☝️Note: If you are already logged in and want to re-login as different account, first logout with:

$ firebase logout

Follow the command prompt and the link in your browser. Accept the permissions by clicking Ok. When you return to your terminal you should see that you are now logged in:

Next, run this command from the root directory of your Flutter app to initialize your Firebase project:

$ firebase init

Use the arrow keys to navigate the cursor to Hosting and hit the spacebar to select it, then press enter. Now you will see this screen:

Select Use an existing project by pressing Enter. Use the arrow keys to select the project you made in step 1.

Next, enter build/web as the public directory and press enter, then enter y (for yes) to select the single page app option:

☝️Note: After this step, 2 new files are created (.firebaserc and firebase.json) in your root directory. Check and make sure they are there. If not, check for errors in the firebase init step and retry.

Step 4: Build and deploy!

Build your app for web:

$ flutter build web

This builds the necessary files in <root-directory>/build/web.

Note: If you see a warning: “Experimental feature web is not supported on stable branches”, make sure you are on at least the dev channel and have web enabled. For example:

$ flutter channel
  beta
* dev
  master
  stable
$ ~ $ flutter devices
2 connected devices:
Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.87
Web Server • web-server • web-javascript • Flutter Tools

Finally, run:

$ firebase deploy

The hosting files are uploaded and hosted at your Firebase URL. You can follow the link in your terminal to your Flutter web project!