Firebase is a great solution for creating a realtime back end for your ember app. Combined with EmberFire and Ember CLI you can quickly get up and running.
Originally I tried to create this app using Ember CLI .39 and the latest version of EmberFire. The application was constantly crashing. Version .40 of Ember CLI has fixed everything.
For this application I'm just going to create a simple model using ember data and save it to Firebase. (You can download the complete repo with the code on github here)
SETUP##
Let's use Ember CLI to create a new app. (Check out my last guide on Ember if needed)
$ ember new <app-name>
This can take several minutes. After this is done change directories into the new app and install emberFire. (@tikotzky has created a emberfire module that also includes the bower install, check out the comments for more information, it's called ember-cli-emberfire)
$ npm install --save emberfire
Next install the EmberFire bower files.
$ bower install --save emberfire
The bower command will add all the correct vendor files to the vendor/ directory. The EmberFire module will do all the linking so you don't have to edit the Brocfile.
Finally we'll need to generate some files that we'll fill in later.
$ ember generate adapter application
$ ember generate controller posts
$ ember generate template posts
$ ember generate model post
$ ember generate route index
Application##
We've created all the scaffolding and now it's time to create the application. It's probably a good time now to run the ember server and make sure no errors appear. If all is fine continue on.
Make sure to sign up for a Firebase account here. The free plan shoud be plenty to start with.
EmberFire is an adapter for Ember Data. After it's connected all your ember data models will be synced with Firebase. To connect the adapter edit the application.js file in the adapter folder.
// application.js
import DS from 'ember-data';
export default DS.FirebaseAdapter.extend({
firebase: new window.Firebase('https://<your-firebase>.firebaseio.com')
});
Make sure to update the URL with the one that was given after signing up with Firebase.
Next let's update the router.js file and add the route to posts.
//router.js
...
Router.map(function() {
this.route('posts');
});
Let's create a model for our posts.
//post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
timestamp: DS.attr('number')
});
Now we need to create a simple template for posts. It has a few text areas and a submit button.
//posts.hbs
<h2>New Post</h2>
<ul class="post-publish">
<li>
{{input value=post.title placeholder="Title"}}
</li>
<li>
{{textarea value=post.body placeholder="Body"}}
</li>
<li>
<button {{action "publishPost"}}>Publish</button>
</li>
</ul>
Next we need to create an ArrayController for posts that will handle the action publishPost.
//posts.js
...
export default Ember.ArrayController.extend({
init: function() {
this.set('post', Ember.Object.create());
},
sortProperties: ['timestamp'],
sortAscending: false, // sorts post by timestamp
actions: {
publishPost: function() {
var newPost = this.store.createRecord('post', {
title: this.get('post.title'),
body: this.get('post.body'),
timestamp: new Date()
});
newPost.save();
}
}
});
This should be enough to post a message and have it saved into Firebase. You can double check your Firebase dashboard /posts to see the posts.
We want to show each post in the front page. Let's update the index template.
//index.hbs
<section>
{{#each post in arrangedContent}}
<div>{{post.title}}</div>
<div>{{post.body}}</div>
{{/each}}
</section>
Next we need to retrieve the posts using the index route.
//index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('post');
}
});
That's it. Run ember server and check the
Some more detailed information on EmberFire can be found in the firebase docs.
Good luck!