You're viewing the legacy docs. They are deprecated as of May 18, 2016.
These docs are for version 2.4.2 and below of the Javascript SDK. Go to our current docs, or see our Web migration guide.

EmberJS is a framework for building ambitious web applications that utilizes auto-updating Handlebars templates, components, and routing with great URL support. You can easily add a realtime backend to your Ember app with EmberFire, our officialy supported adapter for using Firebase with Ember Data.

Create an account

The first thing you need to do to get started with EmberFire is sign up for a free Firebase account. A brand new Firebase app will automatically be created for you with its own unique URL ending in firebaseio.com. We'll use this URL to authenticate our users and store and sync data with EmberFire.

Create a new ember-cli app

EmberFire is packaged as an ember-cli addon by default. To get started, install the ember-cli, create a new ember-cli application, and cd into your app's directory:

$ npm install -g ember-cli bower
$ ember new your-app-name
$ cd your-app-name
Not using Ember CLI? Check out the guide for instructions on adding EmberFire to an app built without the CLI.

Install EmberFire as an ember-cli addon

To install EmberFire in your app, simply run the following command within your ember-cli app directory:

$ ember install emberfire

This will add Firebase as a dependency in our bower.json file and it will generate app/adapters/application.js with the following content:

import config from '../config/environment';
import Firebase from 'firebase';
import FirebaseAdapter from 'emberfire/adapters/firebase';

export default FirebaseAdapter.extend({
  firebase: new Firebase(config.firebase)
});

Configure your Firebase database URL

Your app/adapters/application.js references config.firebase. Next, add your Firebase database URL to config/environment.js:

firebase: 'https://YOUR-FIREBASE-NAME.firebaseio.com/'

Your database data will now be synced with the Ember Data store.

Save Data

Now that your data is being synced with the Ember Data store, calling save() on a model will store your data in your database. To demonstrate, let's build a blogging app. The data for our app will be stored at the Firebase database URL we initialized in the previous step. We'll start by creating a model for our blog posts. We can do this by running:

$ ember generate model post title:string body:string

This will generate app/models/post.js:

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string')
});

To save our post to our database, we'll do the following:

var newPost = this.store.createRecord('post', {
  title: 'EmberFire is flaming hot!',
  body: 'You can store and sync data in realtime without a backend.'
});
newPost.save();

Simply calling newPost.save() saves our post to the Data Store and automatically adds it to our database.

Retrieve Data

Now that we have some post data stored in our database, we need to set up a model hook in our route using find() to retrieve the data:

//app/routes/posts/index.js
export default Ember.Route.extend({
  model: function() {
    return this.store.find('post');
  }
});

To display our posts, we can loop through them in our template:

<!-- app/templates/posts.hbs -->

<section>
{{#each post in model}}
<div>
  <div>{{post.title}}</div>
  <div>{{post.body}}</div>
</div>
{{/each}}
</section>

Next Steps

This was just a quick run through of the basics of EmberFire. For a more in-depth explanation of how to use the library, continue reading on through the EmberFire guide.

For an easy way to deploy your Ember app, check out Firebase Hosting.