DEV Community

loading...

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

loizenai
Software Engineer - Founder at https://loizenai.com
・3 min read

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:

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:

angular-8-firebase-tutorial-integrate-angular-fire-create-project

Press CREATE PROJECT, browser turns into:

angular-8-firebase-tutorial-integrate-angular-fire-add-app

Click on Web App, a Popup will be shown:

angular-8-firebase-tutorial-integrate-angular-fire-popup

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:

angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database

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

Discussion (0)