Deploying Flutter Web App using Firebase

3 min readDec 13, 2020

Deploying flutter web app to firebase as easy as making it in the first place. If you have a flutter web app and looking for hosting it to the server to reach more people, this is it. In less than 5 minutes of read we are going a deploy a flutter web app with firebase.

Step 1

Create a flutter web project whether it is a small default launcher or a portfolio to showcase your projects and skills.

Step 2

Go to your firebase console and create a project for your web app.

deploy flutter web app with firebase — Creating a new firebase project

Step 3

In step 3 we are doing to install firebase tools using command line, but first you need to install npm (node package manager).

If you do not have the npm installed, you can go and install it directly on your computer from node.js.

Once you have got your npm installed its time to install firebase tools from your command prompt or terminal if you’re using mac.

npm install -g firebase-tools

and now we have installed firebase-tools successfully.

Step 4

Now we need to initialize our flutter web project for firebase hosting.

Navigate to root folder of your flutter project from cmd. As mine was:

D:\web>

Run the following command to login with your firebase console account and grant it permission to use CLI:

D:\web> firebase login

Now you have successfully logged in.

Initialize your project using the command:

D:\web> firebase init

Use the arrow keys to navigate to “Hosting” and hit “SPACEBAR” to select that option.

Step 5

Inside your firebase console select your project and navigate to web app icon. Register your site’s name as follows:

Copy and paste the following lines of code in your index.html file inside <body> tag of your flutter web project.

<script src=”/__/firebase/8.2.0/firebase-app.js”></script>
<script src=”/__/firebase/init.js”></script>

Inside your firebase.json file in your project folder, copy the name of your website from firebase console and paste it inside the “hosting” key value.

Final Step.

Final step is to build and deploy your web app.

To build your web app go to the root folder of your app in your terminal and run the following command:

flutter build web

When you are ready to deploy your web app simply use the following command to deploy it on the firebase:

firebase deploy — only hosting:farrukhsajjad

Result

You will receive the following success result in your terminal:

Now you can share your hosting URL with your friends and social circle to let them know about your web app.