How to integrate Firebase in Ionic 3 Project with AngularFire2

In this tutorial, we’re gonna look at steps to integrate Firebase in Ionic 3 Project with AngularFire2.

Related Post: Ionic 3 Firebase example – CRUD Operations with Firebase Realtime Database

I. Install Ionic

1. Get Node and NPM

– install LTS version of Node from NodeJs Installer.
– verify you have everything installed correctly by command: npm --version and node --version.

2. Ionic CLI and Cordova

Install Ionic, Cordova by opening your terminal and run:
npm install -g ionic cordova

II. Create Ionic Project

Using this command: ionic start ProjectName blank

After running the command above, you have the Ionic Project structure like this:

ionic-integrate-firebase-structure

To check your app, run the project with ionic serve, then open Browser with:
http://localhost:8100/

ionic-integrate-firebase-demo

http://localhost:8100/ionic-lab

ionic-integrate-firebase-demo-lab

III. Integrate Firebase

1. Create Firebase Project

Go to Firebase Console, click on Add Project.

Fill your project name, then click on CREATE PROJECT:

ionic-integrate-firebase-create-firebase-project

2. Add Firebase Configuration to Ionic Project

Click on Add Firebase to your web app:

ionic-firebase-crud-add-firebase-project

A window shows Config Information:

ionic-firebase-crud-add-firebase-project-copy-config-data

Under ProjectName/src/app folder, create new firebase.credentials.ts file:

ionic-integrate-firebase-structure-config

Copy config data from Config Information to it:

3. Install AngularFire2

Run the command: npm install firebase angularfire2

After finishing, you can see @firebase and angularfire2 have been added to node_modules folder:

ionic-integrate-firebase-install-firebase

4. Import AngularFire2 to App Modules

Open app.module.ts, add:

IV. Check Result

We will check if Firebase has been integrated successfully or not by interacting with Firebase Realtime Database.

1. Set Firebase Database rules

To simlify this example, we will set read/write for public.
Go to Firebase Console > Database > RULES tab, change rules like this:

ionic-integrate-firebase-database-rules

2. Add Angularfire2 Database Module

Open app.module.ts, add:

3. Write data to Firebase Realtime Database

Open src/pages/home/home.ts:

4. Run and check result

– Run command: ionic serve.

– Go to Firebase Console > Database > DATA tab, you can see a node has been added:

ionic-integrate-firebase-demo-console

By grokonez | February 14, 2018.

Last updated on November 29, 2018.



Related Posts


2 thoughts on “How to integrate Firebase in Ionic 3 Project with AngularFire2”

Got Something To Say:

Your email address will not be published. Required fields are marked *

*