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):
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.
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