Setting up the Polymer with Firebase for production

I am using Polymerfire library and a native javascript API in my project and I need to set up the production environment. I searched through multiple posts (for example this one) and I came to a conclusion that I need to create a separate project. However since I am using Polymerfire library I have my app name specified all over the project.

<firebase-auth id="auth" user="{{user}}" app-name="project-name" provider="password"
               signed-in="{{signedIn}}"></firebase-auth>

To deploy in production it is required to change this name everywhere. I was thinking that I could create a computeAppName function which would return the app name according to the environment but I hope there is a better solution.

The same issue doesn't occur when I use the native javascript API because I am simply selecting the first app in the array (I'll never use multiple apps in my project).

Example

            var actionCode = this.route.__queryParams["oobCode"],
                auth = firebase.apps[0].auth();

In my opinion ideal, behavior would be if Polymerfire library automatically selected the only existing app in firebase.apps array. If that would be the case I could initialize one firebase-app element with app name in index.html and leave the app name unspecified deeper in the DOM tree.

This issue would be eliminated if I stopped using the Polymerfire library entirely but that would not follow the "Polymer way" of doing things.

Another option would be to create a task in a build system (like gulp) to replace the app name for production but that would be probably overly complicated.

What do you think?

Edit: For now I am using a workaround:

firebase-app element in index.html:

<firebase-app id="main_app"
              name="project-id"
              api-key="key"
              auth-domain="project-id.firebaseapp.com"
              database-url="https://project-id.firebaseio.com"
              storage-bucket="project-id.appspot.com">
</firebase-app>

In every element where Polymerfire is used I created a appName property which uses document selector to get the app name from element in the index:

        appName: {
            type: String,
            value: function () {
                return document.getElementById("main_app").name;
            }
        }

<firebase-auth id="auth" user="{{user}}" app-name="[[appName]]" provider="password"
               signed-in="{{signedIn}}"></firebase-auth>

Thanks Jan

Name property of firebase-app element is only used as a name for the firebase app object, which can be arbitrary and there is no need to change it when switching to production project.