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
andfirebase 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
- Remember that this
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.