| Features | AngularFire Lite | AngularFire2 | | ------------- |:-------------:| :-------------------: | | Authentication | :heavy_check_mark: | :heavy_check_mark: | | Firestore | :heavy_check_mark: | :heavy_check_mark: | | Storage               | :heavy_check_mark:   | :heavy_check_mark:| | Realtime Database | :heavy_check_mark: | :heavy_check_mark: | | Cloud Messaging | :heavy_check_mark: | :x: | | Server Side Rendering | :heavy_check_mark: | :heavy_plus_sign: :heavy_minus_sign: | | State Transfer | :heavy_check_mark: | :x: | | Transactions and Batched Writes | :heavy_check_mark: Observable Based | :x: | | NPM Package Size | 84 KB :zap: | 124 KB :turtle: |

Finally SSR with Firebase!

Angularfire Lite is the very first angular library to support server side rendering with firebase.

• :file_folder: Supports Both Firebase Databases: Firestore & Realtime Database

• :tada: No Flickering whatsoever when the app bootstraps

• :zap: Better performance

• :mag: Search engine optimization

• :relaxed: Easy implementation

Reminder: don't forget to install nodejs first.

 
npm install --save angularfire-lite firebase
 

How?:

• Create a firebase account and login to your dashboard

• Click on 'Add Firebase to your web app' icon and copy the config object

• Add it to environment.ts & environment.prod.ts located under /src/environments/

export const environment = {
  production: false, // production: true => in `enviroment.prod.ts`
  config: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

How?:

• Import the config object we created from enviroment.ts

• Import AngularFireLite and pass it the config object

import { AngularFireLite } from 'angularfire-lite';
import {environment} from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireLite.forRoot(environment.config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Observable based: Every function returns an Observable that you should subscribe to it to get back the data.

• Simple API: AngularFire Lite has a simple straight forward syntax similar to the native Firebase API plus some simple additions.

Users

• Will be there any breaking changes to AngularFire Lite?

AngularFire Lite will try to avoid breaking changes as much as possible and keep the API consistent across all the firebase services provided.

Contributors:

• How can I contribute?

We want to keep AngularFire Lite in sync with the Firebase API so if any new feature comes out don't hesitate to send a PR.

• Why AngularFire Lite is so simple?

Why add unnecessary complexity in simplicity draws a straight line to productivity.

• Why there are no tests?

currenty the demo is our primary test but there will be proper tests in the future.

Author:

Maintainers:

Doors are open! I will personally design for you a maintainer card just like the one above too :wink: