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.
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.
Or download it directly from Node.js.
npm is installed, run the following command to install the
$ 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.
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 (
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
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
$ ~ $ flutter devices
$ 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!