Firebase + Ember = Mind Blown

Emad Ibrahim
Oct 19, 2018 · 3 min read

I don’t think there is a faster way to build a web app than firebase and ember.

The awesomeness of Firebase’s realtime database, no server, no backend, instant deployment, hosting and user authentication makes it an incredibly productive choice.

Ember’s conventions and best practices and incredibly productive CLI makes it an excellent choice for your front-end. Let’s see how fast we can get a working app together.

Create a Firebase App

Go to your firebase console and create a new app

Image for post
Image for post
Firebase Console

Create a Firebase Database

Image for post
Image for post
Create a Realtime Database

Make sure you change the rules to enable read/write for testing purposes. Learn more about Firebase rules.

Create an Ember App

Install ember globally

Create a new app

Install ember add-on into your app to enable firebase integration

I ran into an issue (can’t remember what) but installing this add-on fixed it

Configure EmberFire

Get firebase credentials and add them to your ember app.

Image for post
Image for post
Configure EmberFire

Enable Authentication in Firebase

I hate writing authentication code. This is the fastest I have ever added authentication to an application. We will add Google login but firebase supports several OAuth providers including github, twitter, etc…

Image for post
Image for post
Enable Google Authentication

Add Authentication to Emeber

Install Torii

Add this to config/environment.js

Create a file name app/torii-adapters/application.js with the following code:

Add login and logout functions in the application routeapp/routes/application.js :

Now add a login/logout button to your application template to test this out. In app/templates/application.hbs

THAT IS IT!!! You can login to your app with Google…

Image for post
Image for post
Login with Google

Create Data

Let’s create some data in our firebase database.

Create an ember model

ember g model article title:string

Then simply save the model as you usually do with any ember app and it magically appears in the database…

Go look in your firebase console and you will see your data in there.

Image for post
Image for post
Realtime data in action

Deploy

Firebase provides hosting as well and it is dead simple.

Install the firebase tools cli

Build your ember app

Init firebase and follow the prompts (more info here and here)

Deploy

Tip: you can open your app url from the terminal by running firebase open .

Want to send emails with Firebase? See my article here.

It's really hard to keep up with all the front-end…

Emad Ibrahim

Written by

Frontend Weekly
Emad Ibrahim

Written by

Husband, Father of Twins, Published Author, Entrepreneur, Passionate Technologist, Programmer and Productivity Nut. more at https://about.me/eibrahim

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store