Set Up Firebase Database in Ionic 4 and Angular 8

By Digamber Rawat Last updated on
In this Ionic 4 Firebase tutorial, we are going to look at step by step how to set up Firebase Realtime Database in Ionic 4/Angular 8 project.

Firebase is a popularly known Google product and Its a NoSQL Realtime Database. Working with Firebase is easy, It doesn’t make its user to lost in its dashboard due to its superb User Experience. Firebase offers top-notch features for building web and mobile applications swiftly:

  • Cloud storage
  • Realtime update
  • Easy A/B Testing
  • Analytics Monitoring
  • Authentication support
  • Easy Server management
  • Single-page app hosting
  • Real-time communication
  • Hosting and cloud storage
  • Push notifications support
  • Google Cloud IoT tools Integration support

Firebase offers two services:

Cloud Firestore: It’s a modern Real-time NoSQL database with auto-scaling and more robust queries.

Real-time Database: It allows us to build an app which needs to be updated at real-time. e.g., stock market app, sports app, live chat app etc.

In this tutorial we will focus on Firebase Real-time Database.

Create Firebase Account

Visit console.firebase.google.com and sign in using your Gmail account.

Ionic 4 Angular Firebase Account Setup

Click on the “create a project” button then click on continue button.

Ionic 4 Firebase Tutorial

Next, click on the web icon as shown in the screenshot.

Ionic 4 Dashboard

Next, add Firebase to your web app. Enter the app’s nickname and then click on the next button.

Ionic 4 Firebase App Nickname

It will take you to the screen where you will see Firebase configuration, copy the red marked Firebase configuration keys keep it in the notepad or something else. You will need these keys to register in your Ionic 4/Angular 8 project.

Firebase Config Keys

Next, we will click on the “database” from the left side navbar. Then, look for Realtime Database and click on the “create database” button.

Firebase Realtime Database

It will open the security rules modal popover, select “start in test mode” option. Remember we are setting up these rules fro testing purpose. In real world app be careful about database rules.

Ionic 4 Firebase Security

Now, we are all set to use the Firebase Real-time Database.

Create Ionic 4/Angular Project

Run the following command to generate a new Ionic 4/Angular project.

ionic start ionic-firebase-setup --type=angular

Choose blank or which ever template you would like to choose from the Ionic’s template list.

? Starter template: 
  tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the content area 
❯ blank        | A blank starter project 
  my-first-app | An example application that builds a camera with gallery 
  conference   | A kitchen-sink application that shows off all Ionic has to offer

Head over to the Ionic 4 Firebase project folder.

cd ionic-firebase-setup

Run the following command to install lab mode.

npm i @ionic/lab --save-dev

Start the Ionic 4 app.

ionic serve -l

Ionic 4/Cordova Angular Firebase App

Install Firebase Package in Ionic 4/Angular App

We need to install the Firebase library to set up Firebase in our Ionic 4/Angular app. Run the following command in the terminal.

npm install @angular/fire

Configure Firebase Config Keys in Ionic 4

In this step, we will register the Firebase config rules inside the
environment.prod.ts (production environment) and environment.ts file, you can find these files in the src > environments folder.

Add the following code inside the environment.prod.ts file.

export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }
};

Place the following code inside the environment.ts file.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }
};

Import and Register Firebase in AppModule

Lastly, go to app.module.ts file. Here import and register Firebase services along with that also inject Firebase config keys with the AngularFireModule.initializeApp() method.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

//  firebase imports, remove what you don't require
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';

// environment
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Conclusion

That’s it for now, finally we have learned how to set up Firebase in an Ionic 4/Angular 8 app. Now, you can connect your Ionic app with Firebase Realtime database and enjoy building it.

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.

Thanks for checking this tutorial out :) Let me know if you have any suggestions or issue related to this tutorial, or you want to request a new tutorial. Just shoot me a mail here.