Firebase Hosting in Flutter

Host Flutter web app for free using Firebase.

With Flutter 2.0, the Flutter Web has become stable. In this article we shall be discussing about how to publish our flutter web app with the help of Firebase.

Hosting made easy with Flutter

Register the app:

Create a project in Firebase and register the app name with the Web Hosting option enabled.

2. Add Firebase SDK snippet:

After registering the app in Firebase, we will be able to get the Firebase SDK snippet inside the app console. Now copy and paste these scripts into the bottom of <body> tag, of Index.html file.

3. Run Commands

Now its time to build the app and deploy it in Firebase by running the following commands one by one.

Ensure you have the Firebase CLI installed in your system, if not installed, then install it by running the following command in the terminal.

npm install -g firebase-tools

After installing the Firebase CLI, Log into Firebase using your Google account by running the following command.

firebase login

Now build your Flutter app by running.,

flutter build web

Once the app has been built successfully, run the command.

firebase init

This will ask for certain details, hit (y/n) based on your preference and continue.

Are you ready to proceed? Yes
What do you want to use as your public directory? build/web
Configure as a single-page app (rewrite all urls to /index.html)?Yes
Set up automatic builds and deploys with GitHub? No
File build/web/index.html already exists. Overwrite? No //if already added the contents in index.html manually

⚠ Note: For selecting an option use spaceBar and hit enter

Now for finally deploying your app, run the command.