# 3. Fire-what!? 🔥 For this app, we'll use **Firebase** as our **backend**. If you don't know what Firebase is, it's an entire platform provided by Google that can handle almost every aspect of your app's infrastructure. * For example, they provide a database, file storage, push notifications, hosting, among other things. * For this workshop, we'll use Firestore, their new NoSQL database that has built-in real-time and offline features. * This gives us two things out of the box, the content you change in the database gets updated real-time in every app that's connected, and it has offline sync without you doing extra work. You can learn more about Firebase at [**firebase.google.com**](https://firebase.google.com/) and use it for future projects. {% hint style="success" %} Since we want to focus on building the actual app on this workshop **we have already created a Firebase app for you** to connect to, and we'll share the credentials with you later on this step {% endhint %} ## Installing Firebase 🔥 The first thing we need to do to start using Firebase is to install it in our project since Stackblitz handles that part for us. Go to the "**DEPENDENCIES**" section on your left panel and in the input box that says **Enter package name,** and type **firebase**, then hit enter. {% hint style="info" %} The package name needs to be written in **lowercase**, if you use uppercase it will show you an error saying it can't find it {% endhint %} ![Install Firebase](/files/-LX4nX9hSOW55R0bG9wq) That gives you access to the entire Firebase SDK for web development. Now, we can take things one step further and install `@angular/fire` and `@firebase/util`. * `@angular/fire` is a library created by people from both the Firebase and the Angular teams, and it gives you better integration with Firebase when you're working on Angular projects. * `@firebase/util` is a utility library from Firebase that is needed starting from version 5.8.0. You can install it by typing `@angular/fire` in the input box that says **Enter package name** the same way you installed **Firebase**, then do the same for `@firebase/util`. Once both are installed you can go into `package.json` and see the package names there, if you don't, feel free to ask one of the mentors for help 🖐 ## Connect your app with Firebase 🔌 Now that Firebase is installed we need to let our Angular app know how it will communicate with it. For that, we'll go to the `app.module.ts` file and initialize Firebase. It generally looks like this: 👇 {% code title="app.module.ts" %} ```javascript @NgModule({ imports: [BrowserModule, ReactiveFormsModule], declarations: [AppComponent], bootstrap: [AppComponent], }) ``` {% endcode %} It's a 2-step process. First, we need to import the packages we're going to use, so go ahead and add this to your imports: 👇 {% code title="app.module.ts" %} ```typescript import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; ``` {% endcode %} `@angular/fire` is modular, which means we only import what we'll use, in this case, we need the base functionality and Firestore. And second, we'll add both `AngularFireModule` and `AngularFirestoreModule` to our imports array: 👇 ```javascript @NgModule({ imports: [ BrowserModule, AngularFireModule.initializeApp({ apiKey: 'AIzaSyBIM6XVuaqeBDtyyB9Ef1U5oUv9Cue9BK8', authDomain: 'first-firebase-angular.firebaseapp.com', databaseURL: 'https://first-firebase-angular.firebaseio.com', projectId: 'first-firebase-angular', storageBucket: 'first-firebase-angular.appspot.com', messagingSenderId: '306103315077', }), AngularFirestoreModule, ], declarations: [AppComponent], bootstrap: [AppComponent] }) ``` We're adding `AngularFireModule` and calling the `.initializeApp()` method to connect our app to Firebase. The `.initializeApp()` method takes an object as a parameter, that object is our credential object, which lets Angular know **which** Firebase app it needs to connect to. * You'll copy those same credentials, the idea is we all share the same app and work faster that way. * We're also adding the `AngularFirestoreModule` to let Angular know we'll be using the Firestore database in our project. In the end, the entire file should look like this: {% code title="app.module.ts" %} ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; @NgModule({ imports: [ BrowserModule, AngularFireModule.initializeApp({ apiKey: 'AIzaSyBIM6XVuaqeBDtyyB9Ef1U5oUv9Cue9BK8', authDomain: 'first-firebase-angular.firebaseapp.com', databaseURL: 'https://first-firebase-angular.firebaseio.com', projectId: 'first-firebase-angular', storageBucket: 'first-firebase-angular.appspot.com', messagingSenderId: '306103315077', }), AngularFirestoreModule, ], declarations: [AppComponent], bootstrap: [AppComponent], providers: [], }) export class AppModule {} ``` {% endcode %} ## Next Steps 🔍 Once you're ready, move to the next step where we'll start building the **C** part of CRUD, we'll add the functionality to create a TV show and save it to the database! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ngcolombia.gitbook.io/angular-firebase/02-firebase.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.