Quick Start: Firebase & Ionic 3

Connect your Ionic 3 App with Firebase (without authentication)

Getting Started

Whenever you're creating Ionic 3 projects, make sure to install the latest version of the CLI and Cordova. (Also check that Node.js 6 or greater is installed becfore you install the Ionic CLI and Cordova for native app development):

    
        npm install -g ionic cordova
    

Update Packages (Old Projects):

    
        npm install @ionic/app-scripts@latest --save-dev
    

Create the App

After your framework is up to date, you’ll create a new Ionic 3 app, this will create a blank app with a Tabs Menu (see below for alternatives):

    
        ionic start AppName --v2
    

Side Menu:

    
        ionic start AppName sidemenu --v2
    

Single Page:

    
        ionic start AppName blank --v2
    

Create a Firebase Project

Next you'll have to go to Firebase to set up the backend of your app. Just create a project by giving it a name:

Get Firebase Project Details

After you created your Project on Firebase it will open up it's Dashboard. Click on 'Add Firebase to your Web App' and Copy and paste the snippet below:

Import & Intialize your Ionic App

With the code you just copied from Firebase, it's time to initialize it in your Ionic 3 App by going to src/app/app.module.ts and importing it from Firebase:

Install AngularFire2 Package:

    
        npm install angularfire2@2.0.0-beta.6 --save
    

Import & Intialize AngularFire2:

    
    import { NgModule, ErrorHandler } from '@angular/core';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    
    // Import AngularFire2 Module
    import { AngularFireModule } from 'angularfire2';
    
    // AngularFire2 Settings (from Firebase)
    export const firebaseConfig = {
        apiKey: "aSuEXTJAIzaTESTSuOTJ66ox_F0uOTJzXY",
        authDomain: "example.firebaseapp.com",
        databaseURL: "https://example.firebaseio.com",
        storageBucket: "",
        messagingSenderId: "0101010101"
    };

    ...
    //Don't forget to Import AngularFire here
    imports: [
        IonicModule.forRoot(MyApp),
        AngularFireModule.initializeApp(firebaseConfig)
    ],
    

Configure Firebase Rules

Lastly we will just need to change our Firebase rules settings to == so that we can start pushing data to our database without having to authenticate our users:

Now Run Your App

That's it! You're ready to start building your Ionic 3 application with a Firebase backend, just run:

    
        ionic serve
    

That's it, Congrats!

Subscribe to Newsletter for Upcoming Ionic 3 & Firebase App Posts.