DEV Community

Cover image for E-Commerce with Angular & Firebase, part three.

Posted on

E-Commerce with Angular & Firebase, part three.

Hello friends, I hope you all are doing well and creating or setting up your project as per my last 2 blog posts (parts one and two). If you haven't gone through those posts then please follow in sequential and also follow me on my social media platform from my profile.
This is the 3rd blog post, I'll share how to set up the firebase in angular, I've installed the firebase in the part one blog, check that out, now I'll create the Firebase project in the firebase console if you know how to create the firebase project, then its good to know, if you don't know šŸ¤”, follow this article or this.

Steps to configure Firebase:

  • Step 1: Copy the configuration code which will be provided by firebase and copy that code into your src\firebase.config.ts file, yeah you should create that file to store that configuration file. It'll look like this:
const firebaseConfig = {
  apiKey: "********Your key********",
  authDomain: "********Your auth domain*******",
  projectId: "*******Your project id******",
  storageBucket: "******Your storage bucket id*******",
  messagingSenderId: "*****Message sender id*****",
  appId: "******Your app id*******",
  measurementId: "******Your measurement id********"
Enter fullscreen mode Exit fullscreen mode

Inside this file, you've to export some variables, so this file will act like a global or centralized singleton object, which can handle the cloud I/O process, so there will not be new instances of an object while using the firebase.
so firebase.config.ts file looks like this:

import { initializeApp } from 'firebase/app'
import { collection, getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth"

const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)
export const auth = getAuth(app)
export const productEntity = collection(db, "Products")
Enter fullscreen mode Exit fullscreen mode

Now as you've seen I'm exporting the two variables db which is firestore and performing the task related to Firestore database, And the productEntity is a collection that refers to that particular collection where all products were saved.
As per our need, we'll create more collection references to make the RDBMS kind of structure in the Firestore Database because it's a NoSQL database.
So that's it for this blog, now you know how to configure Firebase into your Angular, next we'll set up the entities and user authentication.
Take care šŸ«”.

Top comments (0)