Firebase separate firebase.json file for test and production - use Angular environments file variables?

Question

The settings for Firebase deployment - Firestore, Hosting, and Cloud Functions - are in the firebase.json file. Does anyone know a way to have 2 separate firebase.json files - one for test and one for prod? Or use variables which are configurable? My project is Angular so my first idea was to use the environments variables which are referenced during the build process - test and prod. Is this possible?

My specific goal is to use a different set of firebase.rules for test and production. I want to specify a firebase.prod.rules file for example when deploying to production. This technique can be useful for changing firebase indexes file or hosting test vs prod project differences for which there are many configuration options available in the firebase.json file.

"firestore": {
    "indexes": "firestore.indexes.json",
    "rules": "firestore.rules"
}

See firebase.googleblog.com/2016/07/…, stackoverflow.com/questions/37450439/… and firebase.google.com/docs/configure. — Frank van Puffelen
Yes, I did find both of those useful articles during my search. However I already have a test and prod build going to two different Firebase projects. That works just fine. What doesn't seem to be supported is having a separate firebase.json file for each. This file and configuration settings are shared to test and prod. Maybe there is a way to have separate firebase.json configs but not documented AFAIK. — Meliovation
I'm a bit confused: isn't the whole purpose of this setup to ensure you can easily switch between test/staging and production environments where you have the same configuration? If you want separate configurations, can't you just keep them in separate directories? — Frank van Puffelen
Not sure what you mean by separate directories. Yes I have been switching between test and prod builds (Angular) and deployments (Firebase). However it is sometimes necessary to have different config settings in firebase.json for test versus prod. Like having different security rules for test. Since this file is automatically deployed by firebase deploy cmd, my test or prod rules file will get overwritten. The file .firebasesrc specifies the test and prod hosting targets, but shares firebase.json and .rules between both. I thought it would be more flexible. Thanks! — Meliovation

Swoox Swoox · Accepted Answer · 2018-11-23T12:27:50

You can make a config file and put it in your assests.

From your assests you import it to your ngModule and get the value of the string with the http.

After this you build your project and change the config file. Now change it back for the serve. And you keep the build config file, never copy it again to the build location.

Check out Dynamic module/service configuration and AOT for an example.

public getEnvironment(): Promise<string> { return new Promise<string>(resolve => { let me = this; this.http.get('./config.json') .map(res => res.json()) .toPromise() .then((config) => { resolve(config.url); }); }); }

Your config file look something like:

{"url": ""}

Firebase separate firebase.json file for test and production - use Angular environments file variables?

1 Answers