Does ionic need google-services.json?

I build an ionic app based on capacitor that use firebase. Until now I had one environment but after launch of the app, I want to have a dev environment and a prod environent, in order to not change the data in production.
So I created a new firebase project. In this project I created a web app and android app.
I copy the firebaseConfig from the web app and put it in the environment.ts while the prod firebaseConfig is in environment.prod.ts.
I run several test to understand how do I use each environment and my conclusion is that google-service.json has no impact on ionic app. I test it on the chrome simulator and on real devices.
I summerized my tests on the following table (result column is the actual environment that used):
image
As you can see, the google-services.json has no impact at all. The only thing that matter is the --prod since it determince which environment.ts file is used.
Am I right?

Which firebase sdk are u using? Web sdk does not need this file imho

Capacitor or cordova I cant tell

I am pretty sure it is required for at least Push Notifications as it is documented here Capacitor - Push Notifications.

2 Likes

I don’t sure about that.
In my firebase functions I’m using:

"firebase-admin": "^9.8.0",
"firebase-functions": "^3.14.1"

But in the code of my app I don’t really know. I think I only copy the firebaseConfig to the environment.ts file.
From the documentation it seems to me that ‘firebaseConfig’ is for websites while google-service.json if for android apps. But from my tests it seems only ‘firebaseConfig’ has impact.
Maybe ionic application in this case is like a website (since it is not a native app)?

Maybe you are right.
In my test I only check the authorization and the firestore. I didn’t check the push notifications.

These seem to be backend dependencies. Not front-end. The question is your package.json of the app itself - likely angular, right? Can you post it here?

Yes, angular.
Here is the package.json of the app:

"dependencies": {
    "@angular/common": "^11.2.14",
    "@angular/core": "^11.2.14",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "^11.2.14",
    "@angular/platform-browser": "^11.2.14",
    "@angular/platform-browser-dynamic": "^11.2.14",
    "@angular/router": "^11.2.14",
    "@awesome-cordova-plugins/app-version": "^5.38.0",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/image-picker": "^5.37.3",
    "@awesome-cordova-plugins/in-app-browser": "^5.37.3",
    "@capacitor-community/firebase-analytics": "^1.0.0",
    "@capacitor/android": "3.1.2",
    "@capacitor/app": "^1.0.6",
    "@capacitor/camera": "^1.2.0",
    "@capacitor/core": "^3.0.2",
    "@capacitor/device": "^1.0.6",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/push-notifications": "^1.0.7",
    "@capacitor/splash-screen": "^1.1.6",
    "@capacitor/status-bar": "1.0.2",
    "@codetrix-studio/capacitor-google-auth": "^3.0.2",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/badge": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/deeplinks": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-chooser": "^5.36.0",
    "@ionic-native/file-path": "^5.36.0",
    "@ionic-native/firebase": "^5.36.0",
    "@ionic-native/firebase-authentication": "^5.36.0",
    "@ionic-native/image-resizer": "^5.36.0",
    "@ionic-native/ionic-webview": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/angular": "^5.8.5",
    "@ionic/lab": "^3.2.10",
    "@ionic/storage": "^3.0.6",
    "@ionic/storage-angular": "^3.0.6",
    "@robingenz/capacitor-badge": "^1.2.0",
    "angular-country-picker": "^2.2.0",
    "angularfire2": "^5.4.2",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-filechooser": "^1.2.0",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-firebase-authentication": "^4.0.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-telerik-imagepicker": "^2.3.6",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "cordova-support-android-plugin": "^1.0.2",
    "date-fns": "^2.28.0",
    "firebase": "^8.10.0",
    "firebase-functions": "^3.16.0",
    "firebaseui": "^4.8.1",
    "firebaseui-angular": "^5.1.3",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-plugin-deeplinks": "^1.0.24",
    "ionic5-star-rating": "https://github.com/JeongJun-Lee/ionic5-star-rating/tarball/master",
    "ngx-image-compress": "^11.0.3",
    "ngx-pipes": "^2.7.6",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.1",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.15",
    "@angular/cli": "^11.2.15",
    "@angular/compiler": "^11.2.14",
    "@angular/compiler-cli": "^11.2.14",
    "@angular/language-service": "^11.2.14",
    "@capacitor/cli": "^3.0.2",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/jasmine": "^3.6.11",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.37",
    "codelyzer": "^6.0.2",
    "cordova-android": "^9.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-sqlite-storage": "^5.1.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jetifier": "^2.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.0.8"
  },
  "description": "PayTip",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-firebase": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-filechooser": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "browser"
    ]
  }

Ok
so this tells me you are using the firebase JS SDK - likely for all CRUD operations and so on, And Angularfire as wrapper. Cool.

And you are using capacitor - push notifications so you have @twestrick answer on the necessity of the google…json file.

So environment.ts and environment.prod.ts is supposed to help you with prod/dev config of the JS SDK.

I am not an expert on the capacitor part, but I reckon you need to use some sort of hook to have the builder use the proper google…json file. Ionic has some nice build hooks you can use here. Configuring - Ionic CLI Documentation (ionic:build:before)

Not sure why firebase-functions is needed in the front-end. What functions are you using? Curious to learn.

Ps. there are two angularfire libraries there. Not sure if that is a great idea.

First, thanks a lot.
Good catch, I think when I installed the firebase-functions I did it by mistake in the app and after that fixed it and installed it in the functions, but didn’t un-installed it from the app. I will try to un-install and see if it really needed.

P.S. I don’t see any doubled angularfire library.

@angular/fire”: “^6.1.5”,

“angularfire2”: “^5.4.2”,

Correction on the hooks - I would do a delete/copy command in the npm script. So npm run dev would copy the json file for dev. And npm run build, the one for prod. I wouldn’t use ionic cli directly myself. Maybe there are more elegant way using ionic cli, but this would work for me

Thanks, I will check those optoins

1 Like