Creating an angular app with firebase/firestore integration.

Hello Everyone!!!. Today I’m going to write about how to create an angular app with firebase/firestore integration.

Let’s have some ideas about angular and firebase.

Creating an angular app

Angular is a front-end framework. It is based on “TypeScript” which is the superset of JavaScript. Firebase is a service which provides by google to keep the track of data within an app or a website.

Here, We are going to integrate firebase into an angular app. So first, you have to install Angular/CLI by running the following command.

npm install -g @angular/cli

Then, to create the app you have to run the following command. Here I take the name of the app as TestApp.

ng new TestApp

Now the app is created. You can run the following command and run the app. You can view your app on http://localhost:4200/ from your browser.

ng serve

Creating a Firebase project

First, you have to create a new project in your firebase account. After that, you can register the app to the firebase project as follow.

Click the add app button displayed in the project.

Then register the app by giving a nickname to your app. If you want to host the app through firebase you can do it by ticking the box above the register app button. It’s not necessary because if you want you can host it later.

After clicking the register app button. You will be able to get the firebase configuration for your app. Then we can create a firestore database in the project which we created.

Integrating Firebase to the Angular app

Now we should integrate the firebase into this angular app. For that, you can use “AngulaFire”, which is the official Angular library for firebase. To install Angular/Fire you need to run one of the following commands in the folder in which we created the app.

npm i @angular/fire
        or
ng add @angular/fire

Then you can select the firebase project which you have created in your firebase account for the app. Then we can add firebase configuration to the environment.ts and environment.prod.ts

As the final step, you have to import the environment and the AngularFireModule to the app.module.ts file. This will be displayed as follows.

If you want to integrate other services provided by firebase you need to import the relevant files as shown below.

To integrate firestore storage 
import { AngularFireModule } from '@angular/fire/storage'
To integrate firebase authentication
import { AngularFireModule } from '@angular/fire/auth'

Now we have successfully integrated firebase to our angular app. That’s all about angular firebase integration. Hope you enjoy the article!!!.