Code Monkey home page Code Monkey logo

angularfire-lite's Introduction

angularfire-lite-illustration

AngularFire Lite

lightweight wrapper to use Firebase API with Angular.

Travis CircleCI npm version dependencies Status Greenkeeper npm Join the chat at https://gitter.im/angularfire-lite/Lobby

Features AngularFire Lite AngularFire2
Authentication ✔️ ✔️
Firestore ✔️ ✔️
Storage ✔️
Realtime Database ✔️ ✔️
Cloud Messaging ✔️
Server Side Rendering ✔️
Transactions and Batched Writes ✔️
Observable Based
Package Size  76 KB 115 KB 🐢

angluarfire-lite-ssr

Finally SSR with Firebase!


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

  • 📁 Supports Both Firebase Databases: Firestore & Realtime Database

  • 🎉 No Flickering whatsoever when the app bootstraps

  • Better performance

  • 🔍 Search engine optimization

  • ☺️ Easy implementation

Getting Started

angularfire-lite-step-1


Reminder: don't forget to install nodejs first.

 
npm install --save angularfire-lite [email protected]
 

angularfire-lite-step-2


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>'
  }
};

angularfire-lite-step-3

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 { }

angularfire-lite-api

  • 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.

⚠️ In Progress 🚧

Full Documentation

Practical Examples


For now please use the Demo App as guide to get you started as I finish designing the new docs so check it out:




angularfire-lite-faq

Users


  • Will be there any breaking changes to AngularFire Lite?

AngularFire Lite is still in beta so some changes may happen however we will try to avoid that 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.


angularfire-lite-credits

Author:


angularfirelite-author

Maintainers:


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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.