0

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

Community
  • 1
  • 1
Jan Beneš
  • 742
  • 1
  • 5
  • 24
  • 1
    Hi, i'm curious, why do you want to change the app name, and not just keep it, and change the firebase-app element's configuration in index ? – Arfost Apr 18 '17 at 11:41
  • Because the app name has to be harcoded as a parameter in every polymerfire element (firebase-document, firebase-auth etc.). Which means I would have to change the app name in tens of locations when deploying in production. – Jan Beneš Apr 18 '17 at 15:31
  • 1
    I know that, but in our project, we juste change the firebase-app element configuration (api-key, auth-domain, database-url, and storage-bucket) on the index page, so only one modification, and for the others polymerfire elements, nothing has to change, since they always reference the same firebase-app, wich change his configuration :) – Arfost Apr 18 '17 at 15:56
  • Thank you, I made a dumb assumption that the name property of firebase-app element hast to be the same as the firebase project name, which is obviously not the case since it's only used for firebase-app initialization. Thanks again, I can remove a lot of unnecessary complexity from my code now :) – Jan Beneš Apr 20 '17 at 14:03

1 Answers1

0

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.

Jan Beneš
  • 742
  • 1
  • 5
  • 24