Create Firebase Account | Setup AngularFire2 Library in Angular 7

By Digamber Rawat Last updated on

Create AngularFire2 Account

Today we are going to learn how to create Firebase account and set up the AngualrFire2 library in Angular 7 project.

Let us understand what AngualrFire2 is?

AngularFire2 is an official library for Angular and Firebase. Firebase is a real-time NoSQL database. AngularFire2 allows you to swiftly develop high-quality web and mobile apps to grow your business.

Firebase (AngularFire) is a Google product, and it provides lots of powerful features. Check out below some of them:

  • Observable Support: It supports RxJS, Firebase, and Angular.
  • Real-time database: Real-time data synchronization.
  • Firebase Authentication: Observe the application’s authentication State.
  • Offline Data: Manage offline data automatically with AngularFirestore.
  • Server-side Render: Produce static HTML to enhance performance.
  • Support ngrx: It supports ngrx with AngularFire’s action based APIs.
  • Binary Data Support: Upload, delete and download binary files such as images, videos, and other blobs.
  • Push Notification: Supports push notifications.
  • Call server code: Supports serverless Cloud Functions.

The most crucial factor is that it adds only, which is required. Almost every AngularFire package is less than 3kb. It becomes 2kb when gzipped.

01. AngularFirebase2 Tutorial: Firebase Account Set up

Visit Firebase website and login using your email id.Add Project section.

Click on the below screen.

Setup Google Firebase

Enter the project name, don’t forget to accept the terms and condition.

Firebase setup

Click on the project to enter in the Firebase admin dashboard.

Firebase dashboard

Click on the icon like given below.

Angular Firestore Setup

Then you’ll see the screen, here you have to add the Firebase to your web app.

Add Firebase

Then click on register app and it will add the Firebase to your app.

To get the firebaseConfig, click on the Gear icon > Project setting. In Your apps section you’ll find the Firebase SDK snippet section. Here you’ll have to select Config option to get the firebaseConfig.

Create Database

Firebase provides Real-time Database and Cloud Firestore, we will be using Real-time Database in this tutorial.

Click on create database button.

Create Database Firebase

For the demo purpose we will be using Start in test mode security rules option and click on enable button.

Firebase Security Rules

Then, click on the Cloud Firestore button and choose Realtime Database option.

Firebase database screen

Select Realtime Database from the options like given below.

Firebase Data Types

Go to Database > Rules. Paste these security rules in your Realtime Database’s Rules tab.

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Note: Change these rules when you are building a real app.

03. AngularFirebase2 Tutorial: Install Angular 7 Project

Enter the following command in your terminal to install Angular 7 project.

ng new angular-firebase

Answer following questions asked by Angular CLI.

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose CSS and hit Enter

Enter inside the project.

cd new angular-firebase

If you are using visual studio code then use the following command to open the project.

code .

02. AngularFirebase2 Tutorial: Install and Set up Firebase Database in Angular 7 Project.

To install the AngularFirebase 2 library in Angular project, you need to run the below command in your terminal.

npm install firebase @angular/fire --save

To make connection between your Firebase database and Angular 7 app. Go to src > environments folder and add your Firebase config details in both the environment files.

environment.prod.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
};

environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
};

It’s time to import AngularFirebase 2 services in app.module.ts file.

// Firebase services + enviorment module
import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [...],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

So far, we have created the account in Firebase real-time NoSQL database. Along with that, we have also set up the AngularFire2 library in Angular 7 project. Now you can use the powerful features of AngularFire2, and you can create your web and mobile app project.

Some useful tutorials:

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me