Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire

Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this Angular 8 Firebase tutorial, we're gonna integrate Firebase into Angular 8 App with @angular/fire module (official library for Firebase and Angular).

Related Posts:

• Angular 8 Firebase Realtime Database CRUD operations with @angular/fire
• Angular 8 Firestore tutorial with CRUD application example – @angular/fire
• Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

Technology

• Angular 8
• @angular/fire 5.1.2
• firebase 5.9.4

  Instructional Video

Integrate Firebase into Angular 8 App

Step 1: Set up the Firebase Project

Go to Firebase Console, login with your Google Account, then click on Add Project.

Enter Project name, set Project Id and select Country/Region:

Press CREATE PROJECT, browser turns into:

Click on Web App, a Popup will be shown:

Save the information for later usage.

Choose Database in the left (list of Firebase features) -> Realtime Database -> Tab RULES, then change .read and .write values to true:

Step 2: Install @angular/fire and firebase

Run command:
npm install firebase @angular/fire --save

Step 3: Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'gkz-angular-firebase.firebaseapp.com',
    databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
    projectId: 'gkz-angular-firebase',
    storageBucket: 'gkz-angular-firebase.appspot.com',
    messagingSenderId: '189575342164'
  }
};

More: https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire