Must try: Use Firebase to host your Flutter app on the web

Anthony Robledo
Nov 11 · 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

Switch to the dev channel and enable web if you have not done so already:

$ flutter channel dev
$ flutter upgrade
$ flutter config — enable-web

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!

Anthony Robledo

Written by

Flutter

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade