A few weeks ago, after Google I/O, we upgraded our web apps from Firebase 2.X to Firebase 3.X. I hadn't had much experience with Firebase before then, so it was a good learning exercise for me.

I am relatively new to the concept of backend as a service, having always worked with a backend developer, but I'm excited to be tinkering. I, naturally, ran into a roadblock along the way.

Screenshot to illustrate:

• I kept getting this page instead of seeing my Ember app
• Ran ember build and firebase deploy multiple times to no avail
• The index.html page that was appearing in the /dist directory was indeed markup that matched this page, though
• Obviously, there was something wrong with my process

What I had done to get the erroneous result:

• Went to the Firebase console, made a new app and clicked on "Add Firebase to your web app"

• A modal popped up and I followed the instructions to copy/paste the following code snippet into my index.html:

  // TODO: Replace with your project's customized code snippet
  <script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js">    </script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',
      databaseURL: '<your-database-url>',
      storageBucket: '<your-storage-bucket>'
    };
    firebase.initializeApp(config);
  </script>

• Followed the rest of the steps in various guides to configure environment and such
• Got Welcome to Firebase Hosting page. This wasn't what I wanted or expected to get

Note: This approach probably only works for static websites and may not have worked for me because [single page app](https://en.wikipedia.org/wiki/Single-pageapplication). So don't do this, I guess._

Solution:

1. Sign up for a Firebase account if you haven't already
2. Create an app on the Firebase dashboard
3. Install emberfire as an ember-cli addon: ember install emberfire in your app directory on localhost

4. Configure Firebase Database URL:

   // config/environment.js
   firebase: 'https://firebase-app-name.firebaseio.com'

5. Remember that this firebase property is for your database, so it has to be .firebaseio.com NOT .firebaseapp.com

6. Add database rules:

   // database.rules.json
   {
     "rules": {
     ".read": true,
     ".write": true
     }
   }

7. Run ember build to build to ./dist
8. firebase init in app directory
9. Enter ./dist when prompted for your public directory
10. Run firebase use --add and select respective app
11. Running firebase deploy will deploy to the cloud from local

Resources:

Most of the steps I mentioned in this note are actually available in the following links. I just put them here, explicitly, so I could add notes to help me remember why shit worked and why shit didn't.

• yoember.com
• Old Firebase docs
• emberfire

Will have to work towards using more Firebase features beyond just hosting.

That is all.