Quick Start with Ionic + Firebase

Official post: https://ionictheme.com/quick-start-with-ionic-firebase/

Starting

Before you can start building an application using Ionic, you need to get everything setup on your computer first. If you have already installed Node.js along with Ionic and Cordova, you may skip this step.

First you'll need to install Node.js on your machine. Ionic requires Node.js in order to run properly and even need it to install some packages that the project needs later on. Visit https://nodejs.org/en/ and download the latest version of Node.js.

After installing Node.js, you may now proceed with downloading Ionic and Cordova packages, by opening the terminal and calling the following npm command:

$ npm install -g ionic cordova typescript

Depending on your operating system (Linux or Mac) you might have to add sudo before the npm install.

Create the App

Now that you have installed Ionic, Cordova and Typescript, it's time to start a new Ionic project.

Open the terminal, and call the following command:

$ ionic start <APP_NAME> blank
Change <APP_NAME> to the name of your app.

When you use the Ionic CLI to create a new project, it’s going to do a lot of things for you, making necessary installs npm packages/modules it needs.

Installing Packages you'll need

Although all of the required packages of the app are already installed by calling npm install, there are still some specific packages and app configurations that you need to manually set.

We need to install Firebase and AngularFire2, (you should already be in the project folder) and...

$ npm install --save angularfire2 firebase

Firebase Setup

Start first by creating a Firebase app at https://console.firebase.google.com/. You will be required to sign-in with your Google account.

Once you already have a Firebase app, retrieve your Firebase app's credentials by selecting "Add Firebase to your web app".

Now you can copy above code and initialize firebase by going to src/app/app.module.ts and importing everything you need from Firebase:

You can open your ** app.module.ts ** and import everything we’ll be using, this is the only time you’ll see this code:

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 Modules
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
 
 
// Firebase Config copy from Firebase Console [image above]
export const **firebaseConfig** = {
  apiKey: "xxxxx",
  authDomain: "xxxxx.firebaseapp.com",
  databaseURL: "xxxxxx.firebaseio.com",
  storageBucket: "xxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxx"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(**firebaseConfig**),
    AngularFireDatabaseModle
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Excelent! now you have configured with success and open Firebase to use inside your Ionic project.

Now we have the Firebase configured and ready to start doing: authentication, social login, push notifications, CRUD and more. In the next post we will show you how to do authentication by email and social login with firebase.