DEV Community


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

Software Engineer - Founder at
・3 min read

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
  • @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: '',
    databaseURL: '',
    projectId: 'gkz-angular-firebase',
    storageBucket: '',
    messagingSenderId: '189575342164'


Discussion (0)