Copy our database

Let’s copy our local db to the firebase server

Navigate to our database from the side menu. You would see that we have an empty database. Click on the 3 dot icon next to the +- ones and import the db.json file from the src folder of our app.

Ensure that the data is imported. Note how tags are stored. Even though they were stored as an array of strings in our local db, they are mapped as array of objects in firebase.

Firebase security

By default only authenticated user will have permission to read/write to our database. Since we haven’t implemented authentication yet, let’s open it up to everyone for now. Later, we’ll see how we can restrict this. Go to the RULES tab for your db and modify the rules as follows and publish them -

{

"rules": {

".read": true,

".write": true

}

}

For more info on firebase database security - https://firebase.google.com/docs/database/security/

Adding firebase to our app

Let’s install the npm packages -

npm install firebase angularfire2 --save

angularfire2 is the library that allows firebase integration with angular2 - https://github.com/angular/angularfire2

In order to connect our app to firebase, we would need the api key and other config information for our firebase db. We can get that from the Overview page on our firebase console.

Now, let’s modify app.module.ts to configure firebase using the info from your firebase console-

// app.module.ts ...

import { AngularFireModule } from 'angularfire2';

... export const firebaseConfig = {

apiKey: "<apiKey>",

authDomain: "<authDomain>",

databaseURL: "<databaseURL>",

storageBucket: "<storageBucket>",

messagingSenderId: "<messagingSenderId>"

};

...

imports: [

BrowserModule, @NgModule ({...imports: [BrowserModule, //firebase

AngularFireModule.initializeApp(firebaseConfig), ....

And let’s modify our category service to get data from our firebase db.



...

import { AngularFire, FirebaseListObservable } from 'angularfire2';

... // category.service.ts ...import { AngularFire, FirebaseListObservable } from 'angularfire2';... export class CategoryService {

constructor(private af: AngularFire) {

}

getCategories(): Observable<Category[]> {

return this.af.database.list('/categories');

}

}

Let’s test it out. We’re now fetching categories from our online real-time firebase db.

Real-time? What does it mean to be real-time? Well navigate to the category list page on our site, then modify one of the categories in your firebase db and come back to the categories page (do not refresh your browser). You would see that the category has been updated without the need to refresh. Wow, that’s cool!

Let’s stop for a moment and think about how this works. When you include your firebase library and get the “categories” list from the db, it actually opens a web socket connection to your db (you can see this in Chrome debugger’s network tab). When the “categories” list is updated in the db, firebase checks to see which clients are subscribed to the list. Now, our getCategories() function returns an Observable and is used in our store’s middleware (using effects) that dispatches the “loadCategoriesSuccess” action with category list as the payload. This in turn calls the reducer to update or “categories” & “categoryDictionary” objects in our redux store. Any changes to our store are observed by the components to render our view. Note that the changes to the db are not pulled by our application (as is typical of web pages), but rather pushed from the db. Note that you can use the Redux DevTools to monitor how the actions get dispatched and the state changes.

That is some very powerful stuff using the combination of web sockets with firebase, Observables with RxJS and redux using ngrx.