title: Setting up the Polymer with Firebase for production
body: <p>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 <a href="https://stackoverflow.com/a/37491077/3952906">this one</a>) 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.</p>
  
  <pre><code>&lt;firebase-auth id="auth" user="{{user}}" app-name="project-name" provider="password"
                 signed-in="{{signedIn}}"&gt;&lt;/firebase-auth&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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).</p>
  
  <p>Example</p>
  
  <pre><code>            var actionCode = this.route.__queryParams["oobCode"],
                  auth = firebase.apps[0].auth();
  </code></pre>
  
  <p>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.</p>
  
  <p>This issue would be eliminated if I stopped using the Polymerfire library entirely but that would not follow the "Polymer way" of doing things.</p>
  
  <p>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.</p>
  
  <p>What do you think?</p>
  
  <p>Edit:
  For now I am using a workaround:</p>
  
  <p>firebase-app element in index.html:</p>
  
  <pre><code>&lt;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"&gt;
  &lt;/firebase-app&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>        appName: {
              type: String,
              value: function () {
                  return document.getElementById("main_app").name;
              }
          }
  
  &lt;firebase-auth id="auth" user="{{user}}" app-name="[[appName]]" provider="password"
                 signed-in="{{signedIn}}"&gt;&lt;/firebase-auth&gt;
  </code></pre>
  
  <p>Thanks Jan </p>