Skip to content

Integration with Firebase

Jump to bottom Edit New page
Shyam Chen edited this page Dec 22, 2016 · 6 revisions

This page shows how to integrate firebase (firebase@3.6.4) into the seed.

  1. Install angularfire2 and firebase:
npm install --save firebase
npm install --save-dev @types/request@0.0.32
  • package.json will be
[...]
  "dependencies": {
    [...]
    "firebase": "^3.6.4",
    [...]
  }
[...]
  1. In tools/config/project.config.ts, inside the ProjectConfig constructor:
constructor() {
...
    // Add Firebase configuration to SystemJS
    this.addPackageBundles({
      name: 'firebase',
      path: 'node_modules/firebase/',
      packageMeta: {
        main: 'firebase-browser.js',
        defaultExtension: 'js'
      }
    });
...
}
  1. Add it to files in karma.conf.js for enabling testing with firebase:
    files: [
      ...
      // Insert it after angular dependencies

      //Firebase
      { pattern: 'node_modules/firebase/**/*.js', included: false, watched: false },
      ...
    ],
  1. Add it to your app component at src/client/app/app.component.ts:
import * as firebase from "firebase";

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
})

export class AppComponent {
  constructor() {
  	const firebaseConfig = {
	    apiKey: "xxx",
	    authDomain: "xxx",
	    databaseURL: "xxx",
	    storageBucket: "xxx",
	    messagingSenderId: "xxx"
	}
	firebase.initializeApp(firebaseConfig);
  }
  1. Use firebase in your code
import * as firebase from "firebase";

export class DataAccess {
   ...
  1. Example (Firebase Authentication)

Git: https://github.com/GoEngin/GoEnginO

Demo: https://goengin-a784e.firebaseapp.com

Add a custom footer
Add a custom sidebar
Clone this wiki locally