How would you like to reduce the size of your Ionic app by 500kb to 700kb?

Starting with version 9, Firebase made their web SDK modular, which means that instead of importing the namespaces, you import the specific functions you need to use.

Throughout the next few minutes, you’ll learn how to initialize the modular SDK in your Ionic application.

Environment Setup

The first thing we’ll do is making sure we’ve got everything ready to start building Ionic and Firebase applications, and for that, we’ll install a few things.

Let’s ensure we have node and npm installed on our computer. We can do that directly from the nodejs website. Or we can install nvm (node version manager) to handle different versions of node and npm depending on the needs of our project.

Installing the dependencies

After we have node and npm installed, we want to install the Ionic and the Firebase CLI. For that, we’re going to open our terminal and type:

npm install -g @ionic/cli firebase-tools

To make sure both packages are installed, go to our terminal and type:

ionic --version
firebase --version

we should see the versions like shown in the image below (version numbers WILL change) if we see something like command not found: ionic or command not found: firebase it means that the package isn’t installed.

Party Create

Create our Application

Now that everything is installed and ready to go, it’s time to create our first application. To do that, let’s go to the terminal again, navigate to whatever folder we use for our projects, and type:

ionic start party-planner

Where party-planner is the application’s name, it will start a helper that will ask us a few questions.

First, it will ask us the UI framework we’ll use for the application, Angular, React, or Vue. For the example in this article, we’ll pick Angular.

Party Create

Then it will ask us the starter template we want to pick. We’ll start from scratch, so select blank.

Party Create

Now we need to give the CLI a few moments to create everything. Once it’s done, we can open the application folder in our preferred code editor, I use VS Code, but you can use whatever works best for you.

While we’re checking out the app, we’ll open the package.json file. We’ll see all the packages we have installed and their versions, it looks something like this:

{
  ...
  "dependencies": {
    ...
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@ionic/angular": "^5.5.2",
    "rxjs": "~6.6.0"
  },
  "devDependencies": {
    ...
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project."
}

Note, when I wrote this article, the current @ionic/angular version was 5, so to install version 6, we need to install the BETA. If when you create the app, you get version 6 already, feel free to ignore this note.

To Install the BETA, open your terminal and type npm install @ionic/angular@next

After we make sure everything looks OK, we want to install the two main packages we’ll use to build our application.

We’ll use the Firebase Web SDK with the help of AngularFire, so open your terminal, inside of the project root folder, and type:

npm install firebase @angular/fire

Would you mind double-checking the terminal output? Sometimes we’re running into an issue where AngularFire doesn’t install all the peer dependencies it needs, so it is our responsibility to install them.

In this case, we got an NPM warning that reads:

npm WARN @angular/fire@7.0.4 requires a peer of rxfire@^6.0.0, but none is installed. You must install peer dependencies yourself.

So we go back to the terminal and install it manually by typing:

npm install rxfire@6

Once we’re done, and we see that everything is OK, we want to initialize the Firebase SDK so that our Ionic and Firebase applications can talk to each other.

For that, we’re going to go to the scr/app/app.module.ts file, and in that file, we’re going to import packages from 3 different places, we want to import the base AngularFire app, then the authentication and database packages.

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore, enableIndexedDbPersistence } from '@angular/fire/firestore';

And then, we’ll add them to the imports array of our NgModule:

@NgModule({
  imports: [
    ...,
    provideFirebaseApp(() =>
      initializeApp({
        apiKey: '',
        authDomain: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
      })
    ),
    provideAuth(() => getAuth()),
    provideFirestore(() => {
      const firestore = getFirestore();
      enableIndexedDbPersistence(firestore);
      return firestore;
    }),
  ],
})
export class AppModule {}

Note that here we’re initializing three different things. First, we’re initializing our Firebase application, with the initializeApp() method, and we’re passing our Firebase application credentials.

If you don’t know where those credentials are, you can open a browser window and go to the Firebase console at https://console.firebase.google.com.

There you can go to your Firebase app, and navigate to the settings and find the credentials (You’ll need to create a new app if you don’t have one yet).

Firebase Credentials

We’re also initializing Firebase Authentication, regular authentication with no additional configurations passed.

And lastly, we’re initializing Firestore, our database. You can see that we’re passing one configuration to Firestore, the enableIndexedDbPersistence() method, which enables offline support for our Firestore database.

By the way, while you’re in the Firebase Console, go ahead and enable both email/password authentication and the Firestore database. If not, we’ll run into issues later.

To enable email & password authentication, we need to go to the Authentication menu, then go to Sign In options, and enable email and password as shown in the image below

Enable Firebase Authentication

To create your Firestore database, you need to go to the Firestore option in the menu, click on Create Firestore Database and select to start with Test Mode.

Create Firestore Database

At this point, we should be able to run ionic serve in the terminal and have our application running without any compile or build errors.

If you have errors here and want some help, remember you can send me a quick email at jorge@jsmobiledev.com.