0

I started my journey to try to learn MEAN stack. But then I realized I wanted to use Firebase instead of Mongo.db and Angular2 instead of Angular. I came up to a problem where I had trouble setting up Angular2 with express so that everything was simple and would work fine. trying to find a standard answer for a good setup for Firebase,Express,Angular2, and Node, I saw some posts showing that Express is not anymore necessary when using Firebase. I am still new to these frameworks so I am not sure if I understood it all correctly. I found this post, which kinda answers my question, but it's from 2014 and I know there are new versions of Firebase and express.

What is the difference in Express and Firebase currently? and In what cases should I consider using them both?

Thanks!

Community
  • 1
  • 1
GreedyAi
  • 2,709
  • 4
  • 29
  • 55

1 Answers1

1

No need for Express

npm install angularfire2 firebase --save

here is an example how to use it with Firebase

    import {Component} from '@angular/core';
    import {AngularFire, FirebaseListObservable} from 'angularfire2';

    @Component({
      selector: 'project-name-app',
      template: `
      <ul>
        <li *ngFor="let item of items | async">
          {{ item.name }}
        </li>
      </ul>
      `
    })
    export class MyApp {
      items: FirebaseListObservable<any[]>;
      constructor(af: AngularFire) {
        this.items = af.database.list('/items');
      }
    }

But you might want to use Express, from a SEO perspective, that is rendering the app on server side

    import * as express from 'express';
    import {ng2engine} from 'angular2-universal-preview';

    // Angular 2
    import {App} from './src/app';

    let app = express();

    // Express View
    app.engine('.ng2.html', ng2engine);
    app.set('views', __dirname);
    app.set('view engine', 'ng2.html');


    // static files
    app.use(express.static(__dirname));


    app.use('/', (req, res) => {
      res.render('index', { App });
    });



    app.listen(3000, () => {
      console.log('Listen on http://localhost:3000');
    });
null canvas
  • 10,201
  • 2
  • 15
  • 18