Published in


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

  1. 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.

firebase deploy

Well… That’s it 🥳, Follow the link shown in the terminal to see your Flutter Web app in action.




A list of Flutter Tutorials and app templates

Recommended from Medium

Python Algorithms Every Programmer Should Know — Part 1

BISKIT Development Content

Top 5 Emerging Technology Areas CTOs Should Invest in 2021

Top 5 Emerging Technology Areas CTOs should Invest in 2021

How to improve your iOS app releases

My Accidental New Pre-Coding Practice

Flutter: BLoC vs Cubit

How to make Filebeat work on Kubernetes with AWS ElasticSearch

How to Reset Samsung Galaxy J3 SM-J320Y

Reset Samsung Galaxy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Vijay R

Flutter Developer

More from Medium

Email Authentication with Flutter — Firebase

Flutter Custom Text Widget

Create and display a SnackBar in flutter.

Flutter Web Template — Flutter Web Drawer Widget Example