Use Firebase to host your Flutter app on the web

Anthony Robledo
Nov 11, 2019 · 5 min read

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 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 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 , you must install that first.

☝️Note: If you are not sure whether is installed on your machine, run , and see if it lists a version number. If it does, then you already have . 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 is installed, run the following command to install the :

$ npm install -g 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 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 ( and ) in your root directory. Check and make sure they are there. If not, check for errors in the step and retry.

Step 4: Build and deploy!

Build your app for web:

$ flutter build web

This builds the necessary files in .

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!

Flutter

Flutter is Google's mobile UI framework for crafting…

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Anthony Robledo

Written by

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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