Skip to content

Instantly share code, notes, and snippets.

@maheshj01

maheshj01/firebase.md

Last active October 27, 2025 16:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maheshj01/e4a29a387c6e9ad3b71d71d2ca968d0a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maheshj01/e4a29a387c6e9ad3b71d71d2ca968d0a to your computer and use it in GitHub Desktop.
Download ZIP
flutter firebase notes
Raw
firebase.md

Table of Contents

  1. Deploying flutter webapp using Firebase Hosting
  2. Set Firebase messaging notification icon
  3. CORS issue in firebase storage
  4. Firebase analytics

1. Deploying flutter webapp using Firebase Hosting

  1. install npm cli
  2. Install firebase tools using npm
  3. run firebase login

And then you ar ready to deploy to firebase

Maheshs-MacBook-Air-M1:beautiful_snippet mahesh$ flutter pub get
flutteRunning "flutter pub get" in beautiful_snippet...                         902ms
 webMaheshs-MacBook-Air-M1:beautiful_snippet mahesh$ flutter build web

💪 Building with sound null safety 💪

Compiling lib/main.dart for the Web...                                          19.3s
Maheshs-MacBook-Air-M1:beautiful_snippet mahesh$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/mahesh/Documents/flutter_projects/beautiful_snippet

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure a
nd deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using beautiful-snippet.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? 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
i  Skipping write of build/web/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
Maheshs-MacBook-Air-M1:beautiful_snippet mahesh$ firebase deploy

=== Deploying to 'beautiful-snippet'...

i  deploying hosting
i  hosting[beautiful-snippet]: beginning deploy...
i  hosting[beautiful-snippet]: found 13 files in build/web
✔  hosting[beautiful-snippet]: file upload complete
i  hosting[beautiful-snippet]: finalizing version...
✔  hosting[beautiful-snippet]: version finalized
i  hosting[beautiful-snippet]: releasing new version...
✔  hosting[beautiful-snippet]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/beautiful-snippet/overview
Hosting URL: https://beautiful-snippet.web.app
Maheshs-MacBook-Air-M1:beautiful_snippet mahesh$

Firebase hosting by default deploys the app to default site to deploy to a another site you need to change the target. -a site deleted cannot be recovered.

The example below shows how site was deployed to https://vocabhub.web.app when the default site was https://vocabhub-34c7f.web.app

  • Add to firebase.json "site": "vocabhub", e.g after adding firebase.json would like this
{
  "hosting": {
    "public": "build/web",
    "site": "vocabhub",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  } 
}
  • run the deploy to this hosting command
mahesh@Maheshs-MacBook-Air-M1 vocabhub % firebase hosting:sites:list

Sites for project vocabhub-34c7f

┌────────────────┬────────────────────────────────┬─────────────────┐
│ Site ID        │ Default URL                    │ App ID (if set) │
├────────────────┼────────────────────────────────┼─────────────────┤
│ vocabhub-34c7f │ https://vocabhub-34c7f.web.app │ --              │
└────────────────┴────────────────────────────────┴─────────────────┘
mahesh@Maheshs-MacBook-Air-M1 vocabhub % firebase deploy --only hosting:vocabhub

=== Deploying to 'vocabhub-34c7f'...

i  deploying hosting
i  hosting[vocabhub]: beginning deploy...
i  hosting[vocabhub]: found 13 files in build/web
✔  hosting[vocabhub]: file upload complete
i  hosting[vocabhub]: finalizing version...
✔  hosting[vocabhub]: version finalized
i  hosting[vocabhub]: releasing new version...
✔  hosting[vocabhub]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/vocabhub-34c7f/overview
Hosting URL: https://vocabhub.web.app

2. Set Firebase messaging Notification icon in Android app

originally posted here flutter/flutter#17941 (comment)

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="When Coin"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@mipmap/ic_notification" />
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

3. CORS issue in firebase storage

mahesh@Maheshs-MacBook-Air-M1 firebase_storage % gsutil cors set cors.json gs://app-triage.appspot.com
Setting CORS on gs://app-triage.appspot.com/...
ServiceException: 401 Anonymous caller does not have storage.buckets.update access to the Google Cloud Storage bucket.
mahesh@Maheshs-MacBook-Air-M1 firebase_storage % /Users/mahesh/Downloads/google-cloud-sdk/bin/gcloud init                  Welcome! This command will take you through the configuration of gcloud.

Your current configuration has been set to: [default]

You can skip diagnostics next time by using the following flag:
  gcloud init --skip-diagnostics

Network diagnostic detects and fixes local network connection issues.
Checking network connection...done.                                                                                                          
Reachability Check passed.
Network diagnostic passed (1/1 checks passed).

You must log in to continue. Would you like to log in (Y/n)?  y

Your browser has been opened to visit:

    https://accounts.google.com/o/oauth2/auth?xxxxxxxxxxx

You are logged in as: [[email protected]].

Pick cloud project to use: 
 [1] app-triage
 [2] hello-79c7c
 [3] world-voyage-217607
 [4] Create a new project
Please enter numeric choice or text value (must exactly match list item):  1

Your current project has been set to: [app-triage].

Not setting default zone/region (this feature makes it easier to use
[gcloud compute] by setting an appropriate default value for the
--zone and --region flag).
See https://cloud.google.com/compute/docs/gcloud-compute section on how to set
default compute region and zone manually. If you would like [gcloud init] to be
able to do this for you the next time you run it, make sure the
Compute Engine API is enabled for your project on the
https://console.developers.google.com/apis page.

Created a default .boto configuration file at [/Users/mahesh/.boto]. See this file and
[https://cloud.google.com/storage/docs/gsutil/commands/config] for more
information about configuring Google Cloud Storage.
Your Google Cloud SDK is configured and ready to use!

* Commands that require authentication will use [email protected] by default
* Commands will reference project `camera-triage` by default
Run `gcloud help config` to learn how to change individual settings

This gcloud configuration is called [default]. You can create additional configurations if you work with multiple accounts and/or projects.
Run `gcloud topic configurations` to learn more.

Some things to try next:

* Run `gcloud --help` to see the Cloud Platform services you can interact with. And run `gcloud help COMMAND` to get help on any gcloud command.
* Run `gcloud topic --help` to learn about advanced features of the SDK like arg files and output formatting
mahesh@Maheshs-MacBook-Air-M1 firebase_storage % /Users/mahesh/Downloads/google-cloud-sdk/bin/gsutil listingDid you mean this?
        list
CommandException: Invalid command "listing".
mahesh@Maheshs-MacBook-Air-M1 firebase_storage % gsutil list   
gs://camera-triage.appspot.com/
gs://staging.camera-triage.appspot.com/
mahesh@Maheshs-MacBook-Air-M1 firebase_storage % gsutil cors set cors.json gs://camera-triage.appspot.com
Setting CORS on gs://app-triage.appspot.com/...

4. Firebase analytics

  • Add routeObserver to MaterialApp
 navigatorObservers: [
            FirebaseAnalyticsObserver(analytics: firebaseAnalytics),
 ],
  • Send events to firebase using firebaseAnalytics e.g firebaseAnalytics.setScreen(name:'screenName');
  • To test in realtime use debugView

enable debug mode

adb shell setprop debug.firebase.analytics.app <package_name>

Disable debug mode

adb shell setprop debug.firebase.analytics.app .none.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment