Firebase + Angular + Deploy on Firebase

Firebase + Angular + Deploy on Firebase  So now day’s many developers work with databases like MySQL, MongoDB, etc.. but lets us implement a project in the cloud database and that we called Firebase. some of you know Firebase and some of you don’t know, it’s a Google product where provides authentication, data storage, analytics, and much more functionality provide.

Firebase is a real-time NoSQL cloud database that helps you build apps without building the backend. You can save and retrieve JSON objects, build user authentication, and get data updates in real-time across connected devices in milliseconds: data remains available if your app goes offline, providing a great user experience regardless of network connectivity.

This is GitHub Repository where you can find the code: Github Repository

we are going to cover 3 topics as given bellow

1. Firebase
2. Angular
3. Deploy 

1. Firebase

Before implementing it you must have a google account and with that login to Firebase console with this link https://console.firebase.google.com/. Now you can create a project with any name you like and there is Web configuration you can find.

Let get started with the steps

Step 1 Visit Firebase https://console.firebase.google.com/ and log in with your Google account.

Step 2 Now click on Add project then enter application-related information and click on create.

Step 3 Next click on the Web App icon to get configuration text with app secret info which we will add in our Application to communicate with services related to this Firebase project.

Step 4 Now enable Firestore Database service in your Firebase project.

Click on Database in the left sidebar, then click on + Add collection enter name ideas you can add anything you want. Here we are creating example data for the test. Then click on Next

On the next screen delete the record on focus for this example or you can enter any dummy row data. We will add directly from App. After deleting then hit Save

Now we have the Firebase project and Firestore Database with a collection of ideas is ready, the next step is to connect our Application with Firebase and Firestore Database.

Step 5 Add configuration in the angular project in environment.ts file

example :
firebaseConfig : {
       apiKey: "YOUR_apiKey",
       authDomain: "YOUR_authDomain",
       databaseURL: "YOUR_databaseURL",
       projectId: "YOUR_projectId",
       storageBucket: "storageBucket",
       messagingSenderId: "messagingSenderId",
       appId: "appId",
       measurementId: "measurementId"
}

2. Angular

Let’s start with the steps

Step 1 Create a new project with ng new myApp command from the command prompt

Step 2 Put Firebase configuration in environment.ts file.

Step 3 Now generate component and install Firebase with bellow command.
npm i –save firebase @angular/fire

Step 4 Go to app.module.ts and import firebase module as bellow

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
imports: [
....,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
AngularFirestoreModule,
],

Step 5 Now Create service file ideas.service.ts with Firebase function

import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class IdeasService {
constructor(private firestore: AngularFirestore) { }
getIdeas() {
  return this.firestore.collection('ideas').snapshotChanges();
}
createIdeas(data: any){
  return this.firestore.collection('ideas').add(data);
}
updateIdeas(data: any){
  delete data.id;
  this.firestore.doc('ideas/' + data.id).update(data);
}
deleteIdeas(Id: any){
  this.firestore.doc('ideas/' + Id).delete();
}
}

Note Above ideas is a collection(table) name for the operation.

Step 6 Now import service in component

import { IdeasService} from 'src/app/services/ideas.service'
export class ContainerComponent{
  ideas: any[];
  items: Observable<any[]>;
  searchText:string = "";
  constructor(private ideasService: IdeasService) {}
  ngOnInit() {
    this.ideasService.getIdeas().subscribe(data => {
      this.ideas = data.map(e => {
      return {
         id: e.payload.doc.id,
         MainIdea: e.payload.doc.data()['MainIdea'],
         abstract: e.payload.doc.data()['abstract'],
         concept: e.payload.doc.data()['concept'],
         createdDate: e.payload.doc.data()['createdDate'],
         keywords: e.payload.doc.data()['keywords'],
         sharingLevel: e.payload.doc.data()['sharingLevel'],
         user_id: e.payload.doc.data()['user_id'],
      };
    })
   });
 }
}

now we need to render in HTML file component.html

 <div *ngFor="let idea of ideas">
     <div>
       <p>{{idea.MainIdea ? idea.MainIdea : ''}}</p>
       <p>{{idea.keywords ? idea.keywords : ''}}</p>
     </div>
 </div>

Step 7  Run the project and check in the browser.

3. Deploy

Make sure that configuration code is available in the environment.prod.ts file as well.

Step 1 Make build file with ng build or npm run build command

Step 2 Install the Firebase command-line tool with bellow command
npm install -g firebase-tools

Step 3 Press bellow command in your project directory and login with your Firebase account
firebase login

Step 4 Initialize the project with firebase init now there will be asked a few questions and if you want to deploy only then select

Firebase CLI features…: Hosting
Configure as single-page app : Y
Public directory : dist

Overwrite index.html: No

Step 5 Now press the firebase deploy command and it will take few minutes to deploy the project on Firebase and in the end, it will generate the deployed URL so you can copy and paste the URL in the browser and check it.