Deploying an Ember 2.5 app to Firebase 3.X

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. 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'
    
    • Remember that this firebase property is for your database, so it has to be .firebaseio.com NOT .firebaseapp.com
  5. Add database rules:

    // database.rules.json
    {
      "rules": {
      ".read": true,
      ".write": true
      }
    }
    
  6. Run ember build to build to ./dist
  7. firebase init in app directory
  8. Enter ./dist when prompted for your public directory
  9. Run firebase use --add and select respective app
  10. 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.

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

That is all.