angularfire-lite - GitLite

KO | EN

gitlite — search

#typescript #llm #android #machine-learning #rust #deep-learning #linux #docker #nodejs #macos #windows #awesome #awesome-list #mcp

angularfire-lite

(★ 237)

:zap: Lightweight library to use Firebase API with Angular

File Explorer

Download Latest Version (.zip)

- - codeStyleConfig.xml
- - Project_Default.xml
- angularfire-lite.iml
- modules.xml
- vcs.xml
- - auth.service.ts
- - database.service.ts
- - firestore.service.ts
- - messaging.service.ts
- - storage.service.ts
- core.config.ts
- core.module.ts
- core.service.ts
- public_api.ts
.browserslistrc
.editorconfig
.gitignore
.travis.yml
circle.yml
LICENSE
ng-package.json
package-lock.json
package.json
README.md
tsconfig.json
tslint.json

# Installation Guide

1. Get the code

git clone https://github.com/hamedbaatour/angularfire-lite

Downloads the entire project code from GitHub to your computer.

cd angularfire-lite

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save angularfire-lite firebase

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![angularfire-lite-illustration](https://cdn.rawgit.com/hamedbaatour/ffd1020004cd8adc14535cebc53fc442/raw/086c6a7a5312ca326a0dc4582e98659865f3c6a3/ANGULAR%2520FIRE%2520ILLUSTARTION.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<p align="center">
  <h1 align="center">AngularFire Lite</h1>
    <p align="center">lightweight wrapper to use Firebase API with Angular.</p>
</p>
<div align="center">
  
<img src="https://cdn-images-1.medium.com/max/1800/1*Gdz_rBj49aPqhhAQpeYtBA.gif" height="180" />

[![travis][travis]][travis-url]
[![circleci][circleci]][circleci-url]
[![npmv][npmv]][npmv-url]
[![npmdown][npmdown]][npmdown-url]
[![daviddep][daviddep]][daviddep-url]
[![daviddevdep][daviddevdep]][daviddevdep-url]
[![greenkeeper][greenkeeper]][greenkeeper-url]

<br>
  
 [![Join the chat at https://gitter.im/angularfire-lite/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angularfire-lite/Lobby)
[![Ng-packgr](https://img.shields.io/badge/powered%20by-ng--packagr-blue.svg)](https://github.com/dherges/ng-packagr)
![license](https://img.shields.io/github/license/hamedbaatour/angularfire-lite.svg)
<br>
</div>

| 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: <br> Observable Based    |  :x:  |
| NPM Package Size | <a href="https://arve0.github.io/npm-download-size/#angularfire-lite" target="blank">**84 KB**</a> :zap: | <a href="https://arve0.github.io/npm-download-size/#angularfire2" target="blank">**124 KB**</a> :turtle: |

[![angluarfire-lite-ssr](https://cdn.rawgit.com/hamedbaatour/34003410a08925cb4301ce06fbc3936e/raw/91e29b8e406bb37404ab943519c374f1247957ec/SSR.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)
### Finally SSR with Firebase!
___

Angularfire Lite is the very first angular library to support server side rendering with firebase.
<br>
<br>
 - :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**

<p></p>
<p align="center">
  <h2 align="center">Getting Started</h2>
</p>

[![angularfire-lite-step-1](https://cdn.rawgit.com/hamedbaatour/a500be30a8520653d7759dfd248b535f/raw/7d0facd6691beadad8f74d22d44e68e4edc373fb/step1%2520-%2520angularfire-lite.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<br>

**Reminder**: don't forget to install [nodejs](https://nodejs.org/en/) first.

```bash
 
npm install --save angularfire-lite firebase
 
```
<br>

[![angularfire-lite-step-2](https://cdn.rawgit.com/hamedbaatour/9b22511bf9c59cfe1aab595bfd528c5d/raw/9e08922b4aee17d61f32bdb5500fa11a335e93e0/step%25202.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<br>

**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/`

```ts
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>'
  }
};
```
<br>

[![angularfire-lite-step-3](https://cdn.rawgit.com/hamedbaatour/3855327ef6c4f7d22133a693231d6186/raw/956f99f36d834e15898e7712064f4316787f4185/step%25203.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

**How?**: 
- Import the config object we created from `enviroment.ts`

- Import `AngularFireLite` and pass it the config object

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

```

<br>

[![angularfire-lite-api](https://cdn.rawgit.com/hamedbaatour/f8c9581ab250d47e841d49ae7690ef82/raw/2cc67b7b2d1c29adbcdf3b7ea32a2de44439056a/api.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

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

<h2 align="center"><a href="https://github.com/hamedbaatour/angularfire-lite/wiki">Documentation </a></h2>

<p>You can also clone the live demo to use it as a starting point in the meantime as <a href="https://github.com/hamedbaatour/afl-cli"><b>AFL CLI</b></a> gets launched officially soon. so stay tuned!</p>
<h5>Angular 5:</h5> 
<h3><a href="https://github.com/hamedbaatour/angularfire-lite-demo">DEMO APP</a></h3>
<h5>Ionic 2:</h5>
<h3><a href="https://github.com/hamedbaatour/angularfire-lite-ionic-demo"> DEMO APP </a></h3>

<br>

[![angularfire-lite-faq](https://cdn.rawgit.com/hamedbaatour/fbbd36bce4d7e5a4ec0e07b71b71db15/raw/d58da0f50d52c27815832f7587b29d5b3d58eb3f/FAQ.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

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

<br>

[![angularfire-lite-credits](https://cdn.rawgit.com/hamedbaatour/fe2002a2acbdd15f3067b344de7eda3c/raw/3f3cb82cc4d528cc468be349ee5378b20c7c5a24/credits.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

### Team:
___

<table>
  <tbody>
    <tr>
      <td align="center" valign="top">
        <a href="https://github.com/hamedbaatour"><img width="150" height="150" src="https://avatars3.githubusercontent.com/u/5658460?s=460&v=4?s=150"></a>
        <br>
        <a href="https://github.com/hamedbaatour">Hamed Baatour</a>
        <p>Full Stack Developer</p>
        <p>Author of AFL</p>
      </td>
      <td align="center" valign="top">
        <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
      </td>
      <td align="center" width="20%" valign="top">
               <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
      </td>
      <td align="center" valign="top">
               <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
		<br>
      </td>
     </tr>
  </tbody>
</table>

Note: doors are open to join the AFL team!

[travis]: https://img.shields.io/travis/hamedbaatour/angularfire-lite.svg
[travis-url]: https://travis-ci.org/hamedbaatour/angularfire-lite

[circleci]: https://circleci.com/gh/hamedbaatour/angularfire-lite.svg?style=shield
[circleci-url]: https://circleci.com/gh/hamedbaatour/angularfire-lite

[npmv]: https://badge.fury.io/js/angularfire-lite.svg
[npmv-url]: https://www.npmjs.com/package/angularfire-lite

[npmdown]: https://img.shields.io/npm/dt/angularfire-lite.svg
[npmdown-url]: https://www.npmjs.com/package/angularfire-lite

[daviddep]: https://david-dm.org/hamedbaatour/angularfire-lite/status.svg
[daviddep-url]: https://david-dm.org/hamedbaatour/angularfire-lite

[daviddevdep]: https://david-dm.org/hamedbaatour/angularfire-lite/dev-status.svg
[daviddevdep-url]: https://david-dm.org/hamedbaatour/angularfire-lite?type=dev

[greenkeeper]: https://badges.greenkeeper.io/hamedbaatour/angularfire-lite.svg
[greenkeeper-url]: #