/ nativescript

NativeScript and Angular: Integrating Firebase

Are you looking to integrate Firebase with NativeScript and Angular? This article looks at how we can do this in detail. We'll be using the awesome nativescript-plugin-firebase by Eddy Verbruggen to achieve this. To get started, let's create a new NativeScript Angular application:

# Create a new NativeScript application
$ tns create NSFirebase --template nativescript-template-ng-tutorial --appid io.paulhalliday.nsfire

# Navigate to NSFirebase
$ cd NSFirebase

# Add the nativescript-plugin-firebase plugin
$ tns plugin add nativescript-plugin-firebase

I've elected to add the --appid parameter to the create command as we'll need to set a custom ID to interface with Firebase. Change this from io.paulhalliday.nsfire to a one specific to your project.

At this point you'll notice that you get numerous questions from the plugin, simply hit 'Y' or 'N' depending on whether you want to add a specific Firebase feature.

Don't worry if you accidentally hit the wrong selection, you can change this with the generated .json file!

Firebase Setup

The next step is to set up Firebase. Head on over to the Firebase Dashboard and create a new project with the appropriate name and location.

ns-firebase

Adding iOS and Android

After we've created a project, we'll need to hit 'Add to iOS' and 'Add to Android' on the project dashboard. This allows us to download the respective configuration files for both platforms:

ios-1

For each platform we only need to continue until we get to the file download section. We won't need to interact with Gradle or any Podfile dependencies, so download the GoogleService-info.plist and google-services.json file(s).

android-1

After we have both files downloaded, place the GoogleService-info.plist file into app/App_Resources/iOS and google-services.json into app/App_Resources/Android:

firebase-files

Initialise Firebase

Now that we've appropriately configured Firebase, we can initialise it inside of our application like so:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";

import firebase = require('nativescript-plugin-firebase');

// We can pass a configuration option here.
firebase
  .init({})
  .then(() => console.log('Firebase initialised!'))
  .catch(() => console.error('Error!'));

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

We can then run the project on Android and iOS using the following:

# Run on Android
tns run android

# Run on iOS
tns run ios

If we've done everything correctly, we should get Firebase initialised! inside of our console. This means we've got an active Firebase installation within our NativeScript Angular application!

Want to see more Firebase articles? Get in touch @PWHSoftware!

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More