Flutter Web - Firebase Hosting

princetomarappdev

Prince Tomar

Posted on August 15, 2024

Flutter Web - Firebase Hosting

This article contains steps to host Flutter Web project on Firebase Hosting.

βœ… Requirements

  1. Flutter Project which does not use .env for configurations (Firebase Hosting Limitation).
  2. Firebase Hosting access.
  3. Bitbucket Admin access for configuring Pipelines.
  4. (Optional)GCP IAM & Admin (Used to create Service Account, if you want to configure CI/CD pipeline.)
  5. Firebase CLI

πŸ“„Sections

Setup Firebase Hosting

1.Create Firebase Project & Hosting Setup
2.run command -

firebase init
Enter fullscreen mode Exit fullscreen mode

, in your project directory terminal

Image description

3.After running the command Firebase asks me if I wish to proceed.
Type y and hit the enter key.

Image description

4.Next, select what features you need in my project. In this article,
hosting is all we need, I've used arrow keys to move
between the features, select hosting using the space bar key,
and then hit the enter key.

Image description

5.To use an existing Firebase project? or creating a new
firebase project? or add to an existing Google Cloud Platform
Project? or don’t set up a default project? Since I have an
existing project, I will hit the enter key.

Image description

  1. Use the arrow key to move and hit the enter key to select a
    project.

  2. Firebase asks what we want to use as the public directory. The
    default name public is in the bracket and you can type the
    name of any other directory you want to use. As I have the
    public directory ready, I hit the enter key.

Image description

  1. Before deploying our website, we must ensure that if everything works as desired in our local server.

RUN -

firebase serve
Enter fullscreen mode Exit fullscreen mode

Firebase Deployment

  1. Once testing is done, we deploy our project using the deployment command and make it live for other users. RUN - `


firebase deploy

`

Image description

πŸ’– πŸ’ͺ πŸ™… 🚩
princetomarappdev
Prince Tomar

Posted on August 15, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Flutter Web - Firebase Hosting
flutter Flutter Web - Firebase Hosting

August 15, 2024