Hosting Flutter Website On Firebase For Free

Last Updated : 29 Aug, 2022

Flutter is a user interface development software development kit. Flutter is an open-source project maintained by Google. It enables software developers to make beautiful natively compiled applications for IOS, Android, Web, and Desktop with a single code base. Although developing flutter applications is very fun and interesting, but it is also important to showcase the product to the end-user. And one of the best ways to do that is by hosting the flutter web application on firebase hosting.

Firebase is also a google’s product available to developers as a backend and a service. It is mainly used to develop and maintain the backend of the software applications. Firebase provides multiple services like real-time database and ML kit and else to help developers focus on the functionality of the application rather than struggling to implement it. So, here we are going to use firebase hosting to host our flutter application. And the most important thing is there are no charges involved to start working with firebase.

Prerequisites:

Flutter project which is to be hosted. Here we are going to host an interactive story app.
A Gmail account.
Node JS installed on the computer. It will enable us to install firebase CLI (command line interface).

Now follow the below steps to Host a flutter web app on Firebase for free:

Step 1: Create a new project on firebase

The first step is to create a project in firebase. Visit firebase.google.com and sign-up if you haven’t already and go to console. Here, we will create a new project and give it any name of our choice.

Step 2: Creating flutter web app

In this step, we will create the web application of the flutter project we have already prepared. I have made an interactive story app that changes the story based on the user’s input. To create the web application of the flutter project we will use the following command ‘flutter build web‘. This will create a light and smooth flutter web application and the build folder inside the web directory. You can even check if there is any problem with the build or not by using this command :

flutter run -d chrome --release

Step 3: Registering App

In this step, we will create a web instance in the firebase project that we have created and register our web app and generate a name (URL) for the flutter web app.

Step 4: Adding Firebase SKD

Now we will add the firebase system development kit in our flutter app. It helps firebase identify the web app, track its version, keep track of its usage. It is done by adding two or three scripts in the body of the index.html page.

Step 5: Installing Firebase CLI

In this step, we will install a firebase command-line interface that lets us interact with firebase and use its functionalities. It is done by running the below command in the terminal:

npm install -g firebase-tools

Step 6: Deploying the app

This is the final step we will deploy our flutter web app to the firebase hosting. First, we need to run the command ‘firebase login‘ to confirm we are connected with the firebase. Then we will initialize the process by running the command ‘firebase inti‘. And now we need to select a few options that you can see in the video below. And after all the initializing steps are done then we will the command ‘firebase deploy‘ or the one was given on the firebase website. This command will push all the files to the hosting server and it will return us a URL to the web app we have successfully hosted. And in this case, it was https://gfg-flutter-story.web.app/, you can check this out if you want.