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:

Sign up for a Firebase account if you haven't already
Create an app on the Firebase dashboard
Install emberfire as an ember-cli addon: ember install emberfire in your app directory on localhost
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

Add database rules:

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

Run ember build to build to ./dist
firebase init in app directory
Enter ./dist when prompted for your public directory
Run firebase use --add and select respective app
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.

Menu

Screenshot to illustrate:

What I had done to get the erroneous result:

Solution:

Resources: